Repository navigation
fix(a11y): add missing aria-label to icon-only clear-search and close-tab buttons - #182
Merged
Merged
Conversation
…-tab buttons Audited every <IconButtonV2> in packages/app/src for a missing accessible name (icon-only buttons need aria-label since they have no visible text). Found 4 real gaps, all icon-only: - The "clear search" button in Settings > Models, Servers, and Shortcuts (same settings-v2-tab-search-clear pattern in three files) — now uses the existing common.clearSearch key. - The tab close (x) button in TabNavItem (titlebar-tab-nav.tsx) — now uses the existing common.closeTab key, matching the one already used by the sibling DraftTabItem component in the same file. Part of the dark-mode/Apple-like design pass (opencode#169, #170). Co-Authored-By: Claude Sonnet 5 <[email protected]>
This was referenced Sep 9, 2026
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.
Issue for this PR
Relates to #169, #170, #171, #172 (each has broader scope than this one fix — not closing them, this PR only covers the a11y gap found in each)
Type of change
What does this PR do?
Part of a broader dark-mode/Apple-like design audit (foundation in #164). I audited every
<IconButtonV2>usage inpackages/app/srcfor a missing accessible name — an icon-only button has no visible text, so it needsaria-labelor it's invisible to screen readers.Wrote a small script to find every
<IconButtonV2and check whetheraria-labelappears anywhere inside that JSX element's opening tag (up to its>//>). Out of ~45 usages, found 4 real gaps, all icon-only:components/settings-v2/models.tsx, part of [Design] Settings — Modelos e Combos #172's scope), Servers (components/settings-v2/servers.tsx, part of [Design] Settings — Servidores e Provedores #171's scope), and Shortcuts (components/settings-keybinds.tsx, part of [Design] Settings — Geral e Atalhos #170's scope) — samesettings-v2-tab-search-clearpattern in three files, missing the label each time. Now uses the existingcommon.clearSearchkey (already used for the same pattern inhome-sessions-view.tsx).TabNavItem(components/titlebar-tab-nav.tsx, part of [Design] Shell do app — sidebar e layout #169's scope) — now uses the existingcommon.closeTabkey, matching the one already used by the siblingDraftTabItemcomponent in the same file. Had to addconst language = useLanguage()toTabNavItemsince it didn't call the hook before.No behavior or visual change — only adds the accessible name. This does not close #169-#172; each of those issues still needs its own full pass (contrast, elevation, etc.) — this PR just fixes the one concrete a11y gap this sweep found in their file scope.
How did you verify your code works?
bun run typecheck(packages/app) passes.box-shadowvalues instead of--v2-elevation-*tokens, non-token Tailwind color classes liketext-gray-*) came back clean — this codebase's v2 components already consistently use semantic tokens, so this PR is scoped to just the 4 real a11y gaps found.Screenshots / recordings
Not applicable — no visual change, only an added
aria-labelattribute (not visible in the UI).Checklist