fix(HCM): update Firefox HCM focus styles #7314
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Deploy preview for carbon-elements ready! Built with commit 230ee8d |
|
Deploy preview for carbon-components-react ready! Built without sensitive environment variables with commit 230ee8d https://deploy-preview-7314--carbon-components-react.netlify.app |
|
@tw15egan thanks for doing this! After the break, do you think you would have any time to talk about all the HCM fixes that are being done and explain what the process has been like? I feel like all of us could benefit from better understanding this stuff 👀 |
joshblack
approved these changes
Nov 19, 2020
dakahn
approved these changes
Nov 19, 2020
|
@joshblack yeah definitely! |
tw15egan
added
status: ready to merge 🎉
and removed
status: ready for review 👀
type: a11y ♿
labels
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #7313
Closes #7301
This is a quick and dirty fix for the lack of focus state support in HCM when using Firefox. After some debugging with DA, it seems like Firefox's
prefers-contrastoverrides any type of custom colors when in HCM. Because of this, we were not seeing the same blue outline we would see on Windows Edge in HCM. To remedy this, I added media queries to thefocus-outlinemixin that will set the border/outline to bedottedinstead of solid, which will offer some affordance to the user when using a keyboard to navigate. Not a perfect solution, but until there is a better fix on the Firefox end, at least you will be able to tell which item currently has keyboard focus.Changelog
New
Changed
focus-outlinemixin now has a media query that only targets users on Windows 10 using Firefox withprefers-contrastto be enabledRemoved
Testing / Reviewing
To test these changes, you'll need a Windows 10 machine and High Contrast Mode enabled (
Settings --> Ease of Access --> High Contrast Mode)To enable
prefers-contrastin Firefox, typeabout:configin the address bar, search forlayout.css.prefers-contrast, and set this totrueVerify focus is visible throughout the React Storybook for any component that is expected to receive focus.
@dakahn I went through each component in both Firefox and Edge, so this should address all outstanding HCM issues. Let me know if I missed any of them 👍