Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bug(select, autocomplete): strong focus indicator not present for selected option #26801

Closed
1 task
zarend opened this issue Mar 16, 2023 · 2 comments
Closed
1 task

bug(select, autocomplete): strong focus indicator not present for selected option #26801

zarend opened this issue Mar 16, 2023 · 2 comments
Assignees
@zarend
Labels
Accessibility This issue is related to accessibility (a11y) area: material/autocomplete area: material/core area: material/select P2 The issue is important to a large percentage of users, with a workaround

Comments

@zarend
Copy link
Contributor

zarend commented Mar 16, 2023 •
edited
Loading

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

For options in a select or autocomplete, strong focus only appears on items that are not selected. Indicator does not appear on the selected item.

Reproduction

Steps to reproduce:

  1. https://material2-dev.web.app/select
  2. Click "Enable strong focus"
  3. Under "ngModel", click on "drink"
  4. (Opens a list of drink options "None", "Coke", etc.)
  5. Click "Coke"
  6. (closes)
  7. Click "Coke"

Expected Behavior

Coke has check icon to indicate selection, gray background and blue focus ring

Actual Behavior

"Coke" has check icon gray background, but no focus ring.

Pressing up/down to focus other options shows a blue focus ring, but not on "Coke"

image

image

Environment

  • Angular:
  • CDK/Material:
  • Browser(s):
  • Operating System (e.g. Windows, macOS, Ubuntu):
@zarend zarend added P2 The issue is important to a large percentage of users, with a workaround Accessibility This issue is related to accessibility (a11y) area: material/autocomplete area: material/core area: material/select labels Mar 16, 2023
@zarend zarend self-assigned this Mar 16, 2023
zarend added a commit to zarend/components that referenced this issue Mar 16, 2023
@zarend
fix(material/core): apply strong focus styles to selected option
d2af6cb 
Apply strong focus styles to the selected option. Do this by applying
`border` and `border-radius` styles with increases specificity.
Fix issue where the List styles from MDC override the strong focus
style, which causes the strong focus indicator to not be present on
selected option (angular#26801).

Fix angular#26801
@zarend zarend mentioned this issue Mar 16, 2023
Closed
zarend added a commit to zarend/components that referenced this issue Mar 16, 2023
@zarend
fix(material/core): apply strong focus styles to selected option
7dac27c 
Apply strong focus styles to the selected option. Do this by applying
`border` and `border-radius` styles with increases specificity.
Fix issue where the List styles from MDC override the strong focus
style, which causes the strong focus indicator to not be present on
selected option (angular#26801).

Fix angular#26801
zarend added a commit to zarend/components that referenced this issue Mar 20, 2023
@zarend
fix(material/core): apply strong focus styles to selected option
ef7d14f 
Apply strong focus styles to the selected option. Do this by putting the
`.mat-mdc-focus-indicator` class on the ripple element.

Fix issue where the List styles from MDC override the strong focus
style, which causes the strong focus indicator to not be present on
selected option (angular#26801).

Align maat-option with list-item's implementation by putting the focus
indicator on a child element of the component root, rather than directly
on the component root.

Does not add aditional DOM nodes.
@zarend zarend mentioned this issue Mar 20, 2023
Merged
zarend added a commit to zarend/components that referenced this issue Mar 20, 2023
@zarend
fix(material/core): apply strong focus styles to selected option
da54e57 
Apply strong focus styles to the selected option. Do this by putting the
`.mat-mdc-focus-indicator` class on the ripple element.

Fix issue where the List styles from MDC override the strong focus
style, which causes the strong focus indicator to not be present on
selected option (angular#26801).

Align maat-option with list-item's implementation by putting the focus
indicator on a child element of the component root, rather than directly
on the component root.

Does not add aditional DOM nodes.
angular-robot bot pushed a commit that referenced this issue Mar 22, 2023
@zarend
fix(material/core): apply strong focus styles to selected option (#26811
96aadaa 
)

Apply strong focus styles to the selected option. Do this by putting the
`.mat-mdc-focus-indicator` class on the ripple element.

Fix issue where the List styles from MDC override the strong focus
style, which causes the strong focus indicator to not be present on
selected option (#26801).

Align maat-option with list-item's implementation by putting the focus
indicator on a child element of the component root, rather than directly
on the component root.

Does not add aditional DOM nodes.
angular-robot bot pushed a commit that referenced this issue Mar 22, 2023
@zarend
fix(material/core): apply strong focus styles to selected option (#26811
580fbf5 
)

Apply strong focus styles to the selected option. Do this by putting the
`.mat-mdc-focus-indicator` class on the ripple element.

Fix issue where the List styles from MDC override the strong focus
style, which causes the strong focus indicator to not be present on
selected option (#26801).

Align maat-option with list-item's implementation by putting the focus
indicator on a child element of the component root, rather than directly
on the component root.

Does not add aditional DOM nodes.

(cherry picked from commit 96aadaa)
@crisbeto
Copy link
Member

It looks like this was fixed in #26801. Closing.

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators May 28, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@zarend zarend

Labels
Accessibility This issue is related to accessibility (a11y) area: material/autocomplete area: material/core area: material/select P2 The issue is important to a large percentage of users, with a workaround
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(material/core): apply strong focus styles to selected option zarend/components
2 participants
@crisbeto @zarend