You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Spinner: accessible name is set on an aria-hidden SVG and there is no status live region #8652
The aria-hidden here makes the element — and therefore the aria-label / aria-labelledby set on it — inert. So:
<Spinner srText={null} aria-label="Loading comments" /> produces no announced name at all: the labelled element is hidden from the accessibility tree and nothing else carries the string.
The default <Spinner /> is announced only as a side effect of the separate VisuallyHidden node rendering the word "Loading" in the document, not because anything is labelled.
There is no role="status" / aria-live anywhere, so a spinner that appears after a button press is not announced when it mounts. A sighted user sees motion; a screen reader user gets a static word sitting in the layout that may have been there since page load.
Worth noting the component does read the motion preference already (useMedia('(prefers-reduced-motion: no-preference)'), used only to skip the negative animation-delay that keeps multiple spinners in sync) — so the rotation itself also runs unchanged under prefers-reduced-motion: reduce. I have no opinion on whether that is right for a status indicator, and I would not change it without a call from the team.
What I'd suggest discussing
Put the labelling on a reachable element: either role="status" on the wrapper span with aria-label moved off the aria-hidden SVG, or keep VisuallyHidden as the only source of text and drop the dead aria-label/aria-labelledby props from the SVG.
Decide whether aria-hidden should stay on the SVG at all — as written it silently cancels the documented srText / aria-label API.
Either of these changes what assistive tech reports, so I would rather wait for a design call than open a PR that quietly alters announcement behaviour. Happy to implement whichever option the team picks, with a vitest assertion on the computed accessible name.
Activity
adityalenova commentedon Nov 4, 2026
I'd love to work on this! Could you please assign this issue to me so I can submit a pull request?"
Fix:primer#8652
khanaarizkhan008-spec commentedon Nov 4, 2026
Hi! I'd like to work on this issue. I have experience with React, JavaScript and TypeScript.
I’ve reviewed the issue and would like to investigate a solution. Is it available for contribution?
Thanks!
khanaarizkhan008-spec commentedon Nov 4, 2026
i have Done my PR no #8680 please check it out