-
Notifications
You must be signed in to change notification settings - Fork 526
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
ActionList: a11y fixes #1958
ActionList: a11y fixes #1958
Conversation
🦋 Changeset detectedLatest commit: 09e0bf9 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
size-limit report 📦
|
ActionList: Add focus styles for Windows high contrast mode | ||
ActionList: Fix incorrect role for ActionList.Group outside ActionMenu |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
FYI you can add multiple changesets in one PR
':focus': { | ||
// we set color to be transparent and let the high contrast rules | ||
// decide what color with contrast should that be corrected to | ||
outline: 'solid 1px transparent !important' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is there documentation about this browser behavior anywhere?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also what happens with safari with this media tag?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is there documentation about this browser behavior anywhere?
Yep! Here's the color adjustment spec and windows blog post with transparent tip. I got this trick from primer/css action-list-item.scss
Also what happens with safari with this media tag?
Safari doesn't support it, so it skips it. (Not sure if there's a way to make this work with windows high contrast + safari)
Group container should not have role=none when there is no role on the List.
Added example for Links with Heading
High contrast mode:
Copying what we do in primer/css:
Before:
hc-before.mov
After: (the color is chosen by the browser)
hc-after.mov