Add ARIA disclosure attributes to bottom-right panel tab buttons#3566
Open
Yayabtw wants to merge 1 commit into
Open
Add ARIA disclosure attributes to bottom-right panel tab buttons#3566Yayabtw wants to merge 1 commit into
Yayabtw wants to merge 1 commit into
Conversation
The "live docs" and "process status" tab buttons are toggle controls that show/hide a panel. Add `aria-expanded` (reflecting the open state) and `aria-controls` (pointing to the `<pluto-helpbox>` panel) so that assistive technologies can announce the relationship and state. Follows the W3C WAI-ARIA disclosure pattern (https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/). Refs JuliaPluto#3274
Member
|
Hey! Thanks for your contribution! Could you write a bit about who you are and what makes you interested in contributing to Pluto's accessibility? Do you have experience with Web Acccessibility? -fons |
Member
|
✨ |
This file contains hidden or 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
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.
What
Adds
aria-expandedandaria-controlsattributes to the two tab buttons that toggle the live docs and process status panels in the bottom-right helpbox (BottomRightPanel.js).Why
As described in #3274, these
<button>elements act as toggle controls (open/close a panel) but expose no semantics to assistive technologies — screen-reader users cannot tell that the buttons control a different region of the page or whether the panel is currently expanded.How
The interaction matches the W3C WAI-ARIA disclosure pattern:
aria-expandedis bound to the open state (open_tab === "docs"/open_tab === "process"), so it flips betweentrueandfalseas the user toggles the panel.aria-controlspoints to the<pluto-helpbox>element, which holds the disclosed content (the helpbox is the single container that swaps between docs view and status view depending on which tab is active). Anid="pluto-helpbox"is added so the reference is resolvable.Fix #3274
Try this Pull Request!
Open Julia and type: