fix(memory-graph): accessible names and states for graph controls#1349
Open
abhay-codes07 wants to merge 1 commit into
Open
fix(memory-graph): accessible names and states for graph controls#1349abhay-codes07 wants to merge 1 commit into
abhay-codes07 wants to merge 1 commit into
Conversation
The graph control surfaces had a few screen-reader gaps in the published
component:
- The zoom in/out buttons rendered only a "+"/"−" glyph with no text, so they
had no accessible name. Added aria-label ("Zoom in"/"Zoom out") and marked the
glyphs aria-hidden.
- The Legend header and the expandable "Connections" row are disclosure
buttons but never exposed aria-expanded, so assistive tech could not tell
whether the section was open. Wired aria-expanded to the actual state.
- The loading indicator was a plain div, so the loading message was not
announced. Switched it to an output element (implicit status role) with
aria-live="polite".
Adds a mounted test covering the accessible names, the toggling aria-expanded,
and the loading live region.
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.
A few screen-reader gaps in the published
@supermemory/memory-graphcontrol surfaces.Zoom buttons had no accessible name
The zoom in/out buttons render only a
+/−glyph inside a<span>, with no text or label, so assistive tech announces them as an unnamed "button". Addedaria-label("Zoom in" / "Zoom out") and marked the decorative glyphsaria-hidden. The neighbouring Fit/Center buttons already have visible text, so only the icon-only zoom controls needed it.Legend disclosure buttons never exposed
aria-expandedThe Legend header toggle and the expandable "Connections" row are disclosure widgets that show/hide content on click, but neither set
aria-expanded, so a screen-reader user cannot tell whether the section is open or closed. Wiredaria-expandedto the actual state (and left it off non-expandable rows).Loading indicator was not announced
The loading card was a plain
<div>, so when loading starts or flips to "loading more" the status text is never announced. Switched the container to an<output>element (implicitstatusrole) witharia-live="polite", matching how a status region should behave.Tests
Added
controls-a11y.e2e.test.tsx(mounted, happy-dom, same pattern as the existing popover render test): asserts the zoom buttons resolve by accessible name, the Legend toggle flipsaria-expandedfalse → true on click, and the loading indicator exposes a politestatuslive region. Full package suite (198 tests) andtsc --noEmitare green.