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.

Sign up for GitHub

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

Jump to bottom

in high contrast mode button elements with role=tab with aria-selected="true" render differently after receiving focus #2257

Closed
jongund opened this issue Mar 8, 2022 · 1 comment · Fixed by #2625
Closed

in high contrast mode button elements with role=tab with aria-selected="true" render differently after receiving focus #2257

jongund opened this issue Mar 8, 2022 · 1 comment · Fixed by #2625
Labels
browser-dependency Track browser bugs of particular interest; not a practices issue but may impact APG. bug Code defects; not for inaccurate prose Example Page Related to a page containing an example implementation of a pattern
Milestone
H1/2023 Content U...

Comments

@jongund
Copy link
Contributor

jongund commented Mar 8, 2022 •
edited
Loading

When in high contrast mode a button element with role=tab and aria-selected=true renders differently after it receives and looses focus. The border around the active tab has a different color after being focused. See APG automatic and manual tablist examples to see and example of this behavior.

Example of Tabs with Automatic Activation
Example of Tabs with Manual Activation

Issues seem to be:

  1. Using the button element has some visual side effects in high contrast mode, that are either a browser bug or an accounted for CSS property similar to ::visited psuedo element.
  2. The effect does effect accessibility of the tabs examples, since the visual affordances for the selected tab are not based on the color of the borders.
@mcking65 mcking65 added bug Code defects; not for inaccurate prose Example Page Related to a page containing an example implementation of a pattern browser-dependency Track browser bugs of particular interest; not a practices issue but may impact APG. labels Mar 22, 2022
@mcking65 mcking65 mentioned this issue Mar 7, 2023
Merged
4 tasks
@jongund
Copy link
Contributor Author

jongund commented Mar 16, 2023

@mcking65
I think replacing the button elements with div elements would make the CSS code for visual focus and supporting high contrast much simpler. Not a big fan of using button elements to create custom element due to the styling difficulties and gotchas.

@mcking65 mcking65 linked a pull request Apr 4, 2023 that will close this issue
Tablist Examples: Improve support for magnification #2625
Merged
4 tasks
@mcking65 mcking65 added this to the H1/2023 Content Updates milestone Apr 4, 2023
mcking65 added a commit that referenced this issue Apr 10, 2023
@jongund @mcking65 @andreancardona
Tablist Examples: Improve support for magnification (pull #2625)
9a729ec 
Resolves #2284 and #2257 with the following changes: 
1. Changes CSS so it defines tab width as a percentage of screen width. This prevents screen magnification from causing horizontal scrolling. As the screen is magnified ,the height of the tabs increases and the tab content reflows to fit the new dimensions.
2. Adds explanation of the use of percentage to the Accessibility Features section.

---------

Co-authored-by: Matt King <a11yThinker@gmail.com>
Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
browser-dependency Track browser bugs of particular interest; not a practices issue but may impact APG. bug Code defects; not for inaccurate prose Example Page Related to a page containing an example implementation of a pattern
Projects
Tabs Pattern and Examples Development Project
Status: Complete
Milestone
H1/2023 Content Updates
Development

Successfully merging a pull request may close this issue.

Tablist Examples: Improve support for magnification w3c/aria-practices
2 participants
@jongund @mcking65