Repository navigation
Conversation
Fixes the remaining axe button-role-name-missing findings in DEQ-541 (items 1 to 3). Tooltip triggers attached directly to a bare svg or img had no role or name. - Build timeline stage info icons are now buttons named "About <stage>". - All logs source icons are now buttons named after the log source. Only the first line of each run from the same source is a trigger; continuation lines are decorative, so long logs don't add a tab stop per line. - History build reason icons sit inside the build link, so the reason is added to the link's accessible name instead of a nested control.
This branch has not been deployed
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.
Fixes the
button-role-name-missing(WCAG 4.1.2) findings in DEQ-541 items 1 to 3. These tooltip triggers were attached straight to a baresvgorimg, so they had no role or accessible name.Part of DEQ-541 (items 1 to 3). Item 4 (build timeline bars) is handled separately with DEQ-232.
<button aria-label="About <stage>"><button aria-label="<source name>">on the first line of each run from the same sourcesr-only)Adds Vitest coverage in
AgentLogs.test.tsx,WorkspaceTimings.test.tsxandWorkspaceBuildData.test.tsx. All three fail without the fix. AddsSourceIconFocusedandStageInfoFocusedstories so Pixel captures the focus ring and the tooltip opened from the keyboard.Implementation notes and review decisions
Scope. The original plan grouped every
button-role-name-missingticket for icon tooltip triggers. Most of them were already handled elsewhere, so this PR covers only what was left:mainby fix(site/src): make text-only tooltip triggers keyboard focusable #30403.Mapping axe selectors to components
section:nth-of-type(9)info icon in History:WorkspaceBuildData(rendered byHistorySidebarandWorkspaceBuildPageView).img alt=""and thedashed-linediv withdata-state: the source icon inAgentLogs.lucide-infonext to provisioning and agent stage labels:StagesChart.Decisions
<button>inside it would be nested interactive content (axenested-interactive), and clicking it would also follow the link. Instead the icon isaria-hiddenand the reason issr-onlytext in the link's accessible name ("start by admin, build reason: CLI"). Tradeoff: sighted keyboard users still can't open the visual tooltip, as before. Showing the reason as visible text, or opening the tooltip when the link has focus, would need a design decision.aria-hiddenand have no tooltip. Before, every line had a hover trigger. Making each line a button would add a tab stop per log line. Mouse users now hover the first icon of a run to see the source name.Tooltip/InfoTooltip, so a shared primitive (or asideprop onInfoTooltip) is better done after it merges.InfoTooltipdoesn't fitStagesChartas is: it uses a fixedside="right"and 12/16px icons, while this icon is 14px with the tooltip below.m-0 border-0 bg-transparent p-0 cursor-pointerfrom the new buttons, because Tailwind preflight andindex.cssalready apply them.Verification
pnpm lint:types,biome check, andmake pre-commit(via the hook) pass.AgentLogs,WorkspaceBuildData,WorkspaceTimings. Each new test was confirmed to fail against the original components.AgentLogs,WorkspaceTimings,WorkspaceBuildData,AgentRow,Workspace,WorkspaceBuildPageView(82 tests) pass.frontend-deep-reviewandfrontend-reviewaudits were run, and their blocking and should-fix findings were fixed or recorded above.