Button Example Page: Fix CSS that caused focus indicator to disappear #2673
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
howard-e
approved these changes
Apr 12, 2023
|
It is also very important to ensure that high contrast mode is not negatively impacted. I'm guessing that it would not based on the nature of these changes, but it needs to be tested. @a11ydoer are you available to review this?? |
charmarkk
approved these changes
Apr 12, 2023
There was a problem hiding this comment.
@alflennik I'm seeing visual focus indication now with Firefox and Chrome latest on Windows!
@mcking65 I'm also seeing that HCM is working well on Windows. Both Firefox and Chrome give a thick white outline (thicker than the focus indication that was already there, actually) in HCM Black; HCM White has a thick black outline on both. In Chrome and HCM Black, there is a slight cyan outline underneath/inside the white outline, too.
|
Thank you, thank you for the speedy review!! |
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.
For more information see #2650.
On the button example there was an interaction between the website template's focus indication implementation and the example's focus indication that resulted in no indicator showing. There was some rightful concern from Howard that naively removing z-index of -1 might result in a regression that the original author had intended to fix, so I tested the button as thoroughly as I can to cover our bases:
Following the change I tested both the final version as it appears on the website as well as the raw HTML version as it appears in the APG source code, on Mac with Chrome, Firefox and Safari, including with VoiceOver, and on Windows with Chrome, Firefox and Edge, including with NVDA. In all cases the buttons were focusable and interactable with visible focus indication.
cc @mcking65
WAI Preview Link (Last built on Wed, 12 Apr 2023 18:18:56 GMT).