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.

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

fix(material/list): fix action-list focus state for high contrast fir… #23584

Merged
merged 1 commit into from Sep 16, 2021

Conversation

zarend
Copy link
Collaborator

@zarend zarend commented Sep 14, 2021

…efox

From the commit message

Fixes the focus state on the action-list for firefox in high-contrast
mode. In firefox, the outline only renders on the top, right and left –
not the bottom. This fixes the bottom of the outline being cut-off by
setting the z-index of the focused list item to 1.

fixes #23583

Other things I've tried

Also tried using margin but that turned out to be harder than this because we would also have to update the background of the list. This seems to only happen with buttons inside the list, but works fine with divs. I know that outline works differently between Firefox and Chrome, but I couldn't find a specific bug report for this situation.

I also considered ditching outline and using a box-shadow instead, but then the action-list's focus state would match our nav-list and other lists.

…efox

Fixes the focus state on the action-list for firefox in high-contrast
mode. In firefox, the outline only renders on the top, right and left –
not the bottom. This fixes the bottom of the outline being cut-off by
setting the z-index of the focused list item to 1.

fixes angular#23583
@zarend zarend added a11y area: material/list labels Sep 14, 2021
@zarend zarend requested review from jelbourn and crisbeto Sep 14, 2021
@zarend zarend added this to In progress (review, presubmit) in Accessibility 2021 via automation Sep 14, 2021
@zarend zarend requested a review from devversion as a code owner Sep 14, 2021
@google-cla google-cla bot added the cla: yes label Sep 14, 2021
Copy link
Member

@crisbeto crisbeto left a comment

LGTM

Copy link
Member

@jelbourn jelbourn left a comment

lgtm

@jelbourn jelbourn added merge ready P2 target: patch labels Sep 14, 2021
@wagnermaciel wagnermaciel merged commit ef4fc56 into angular:master Sep 16, 2021
17 checks passed
Accessibility 2021 automation moved this from In progress (review, presubmit) to Done Sep 16, 2021
wagnermaciel pushed a commit that referenced this issue Sep 16, 2021
…efox (#23584)

Fixes the focus state on the action-list for firefox in high-contrast
mode. In firefox, the outline only renders on the top, right and left –
not the bottom. This fixes the bottom of the outline being cut-off by
setting the z-index of the focused list item to 1.

fixes #23583

(cherry picked from commit ef4fc56)
@angular-automatic-lock-bot
Copy link

@angular-automatic-lock-bot angular-automatic-lock-bot bot commented Oct 17, 2021

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 Oct 17, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
a11y area: material/list cla: yes merge ready P2 target: patch
Projects
Development

Successfully merging this pull request may close these issues.

5 participants