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
Contributor

@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 Accessibility This issue is related to accessibility (a11y) area: material/list labels Sep 14, 2021
@google-cla google-cla bot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Sep 14, 2021
Copy link
Member

@crisbeto crisbeto left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Copy link
Member

@jelbourn jelbourn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm

@jelbourn jelbourn added action: merge The PR is ready for merge by the caretaker P2 The issue is important to a large percentage of users, with a workaround target: patch This PR is targeted for the next patch release labels Sep 14, 2021
@wagnermaciel wagnermaciel merged commit ef4fc56 into angular:master Sep 16, 2021
wagnermaciel pushed a commit that referenced this pull request 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

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
Accessibility This issue is related to accessibility (a11y) action: merge The PR is ready for merge by the caretaker area: material/list cla: yes PR author has agreed to Google's Contributor License Agreement P2 The issue is important to a large percentage of users, with a workaround target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

bug(list): firefox renders action list focus state on 3 sides instead of all 4 sides
5 participants