Repository navigation
fix: clear the storybook axe baseline - #91
Conversation
|
Hi @TheGreatAxios! Could you push the branch behind #88 to corbitsdev/react-ui? My account can only read the repo, and I'd like to stack this PR on top of it. This PR fixes the accessibility violations that #88's axe sweep records as known, and it's built on #88's branch. A PR's base has to be a branch in this repo, though, and #88's branch exists only on my fork. Until it's here, this PR targets Pushing it is one fetch and one push: git fetch https://github.com/pratikbuilds/react-ui.git claude/zealous-mcnulty-3ed6f4
git push origin FETCH_HEAD:refs/heads/claude/zealous-mcnulty-3ed6f4Please keep that branch name so this PR can be retargeted onto it. If #88 gets new commits before it merges, I'll ask you to push again. Thanks! |
Badge, step-list and progress-checklist pass label="" because nearby text already names the state, which rendered an unnamed role="img". An empty label now drops the dot from the accessibility tree, as <img alt=""> does.
SidebarItemRow renders an <li>, but the panel family had no list to put it in, so rows sat directly in a <div>. SidebarPanelSection is that <ul>, with an optional label that adds a heading and names the list.
A listbox may only own options and groups. Status copy now renders beside it as role="status", and the listbox hides and the combobox reports aria-expanded=false while there are no options.
Each scroll container takes tabIndex=0 so it can be scrolled without a pointer. The page panel and the stepper rail draw the focus ring inset, since an overflow-hidden parent and the edge mask hide an outset ring.
warn colours the medium RiskBadge label and measured 3.30:1 on the card. The contrast gate now checks ok and warn as text on the page and the card, and the light values move to #2f7c40 and #966319 to pass it.
e5e614e to
7f656b6
Compare
|
Hey @pratikbuilds -- #88 is on This should hopefully make things easier, but as 88 was clean seemed simpler to merge that in. |
|
Triage: Unsure Waiting on:
|
corbits-triage
Bot
added
Triage: Needs Human Review
and removed
Triage: Waiting for CI
labels
|
LGTM |
![corbits-triage[bot]](https://avatars.githubusercontent.com/u/275831056?s=60&v=4){kind=small}
Rebased onto
mainafter #88 merged. The Storybook commits are no longer in this diff.What changed
The Storybook axe sweep from #88 had 57 known serious/critical violations in
e2e/stories-a11y.known.json. They are all fixed and the list is empty. None were kept.label,select-name,label-title-only): every control is wrapped in a real<label>. Story-only change.role-img-altin badge workflow-status and inspector-shell): callers passlabel=""when nearby text already names the state. That includesstep-listandprogress-checklistinsrc/. The dot rendered an unnamedrole="img". An empty label now hides the dot from assistive tech, as<img alt="">does.listitemin sidebar-panel channels and live rows):SidebarItemRowrenders an<li>, but the panel family had no list to hold it. The Pins doc comment already referred to aSidebarPanelSection. It now exists: a<ul>with an optionallabelthat adds a visible heading and names the list. This is a new export (feat). Existing consumers whose rows sit directly inSidebarPanelBodyneed to wrap them to be valid.aria-required-childrenin loading and empty): the loading, empty-catalog and no-matches copy moves out of the listbox into arole="status"sibling. While the listbox has no options it ishidden, and the combobox reportsaria-expanded="false". The listbox stays in the DOM, soaria-controlsstill resolves.scrollable-region-focusablein page-panel, tool-block and horizontal-stepper): each scroll container takestabIndex={0}, the pattern the Tabs tabpanel already uses. The page panel and stepper rail draw the focus ring inset (-outline-offset-2), because the panel'soverflow-hiddenparent and the rail's edge mask hide an outset ring. The trade-off: a panel or detail box that isn't overflowing still adds a tab stop.--warncolours the medium RiskBadge label and measured 3.30:1 on the card. A new rule inchecksFor(3b) checks the status-text tokensokandwarnas text (4.5:1) on background and card. The light values move to--ok: #2f7c40and--warn: #966319to pass it. Dark already passed.--okwas 3.63:1 on the card; it is only used as a fill today, but the theme defines it as status text. These values no longer match the consumer app'sapp.css, so the comment saying they do is removed.Verification
bun run build && bun run test:e2e: the sweep passes with an empty known list.bun run check(typecheck, lint, format, 245 unit tests),bun run dep-guard,bun run contrast-test: pass.status-dot.test.tsx,sidebar-panel.test.tsx, a ToolPicker status/listbox test, and a ToolBlock focusable-detail test.Closes #90