Improve accessibility for help buttons in server UI#117
Open
daiverd wants to merge 4 commits intoChHarding:mainfrom
Open
Improve accessibility for help buttons in server UI#117daiverd wants to merge 4 commits intoChHarding:mainfrom
daiverd wants to merge 4 commits intoChHarding:mainfrom
Conversation
added 4 commits
March 27, 2026 12:55
- Add aria-expanded attributes to collapsible panel links in index.html - Replace clickable img with proper button element in intro.html
- Add macros.html with help_popover macro that includes: - aria-expanded attribute for screen reader state - aria-controls pointing to adjacent content container - Content container placed immediately after button in DOM - Update index.html to use the macro for all help buttons - Fix heading hierarchy: change h4 to h1 for main title - Add aria-expanded toggle handlers in JS for popover events
6 tasks
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
1 participant
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.
Summary
aria-expandedupdates when popovers show/hideWhy
Screen readers need to understand the relationship between help buttons and their content. The previous implementation had two problems:
container: 'body'appends popover content to the end of<body>, breaking the logical reading orderWhat this changes
The new
help_popovermacro generates buttons with:aria-expanded- indicates whether help content is visiblearia-controls- links button to its content container<div id="X-content">) placed immediately after the buttonThis means when a screen reader user activates a help button, the help text appears right after in reading order rather than at the end of the document.
Test plan
aria-expandedtoggles between true/false when opening/closing popovers