Accessibility rough edges in custom (non-Base-UI) components
メンテナーはふだん 5 日以内に返信
評価
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 初心者へのやさしさ
- 48/100
- issue の種類
- バグ
- 明瞭さ
- おおむね明確
- 活発さ
- 静か
- 技術スタック
- react, typescript
調査の方向性
command-item.tsx:65-81 から始めて、無効化されたオプションが Autocomplete のキーボードナビゲーションの対象外になる理由を理解します。次に data-view/components/search.tsx、ordering.tsx、menu/menu-content.tsx、context-menu/context-menu-content.tsx、および dialog と tooltip の CSS モジュールを調査します。完了の条件は、列挙した専用コンポーネントがキーボードアクセス、フィルター/結果のアナウンス、堅牢な bridge の動作、明示的な focus-visible スタイルを提供することです。
索引モデルが issue の本文から書いたものです。
説明
Summary
Components built directly on Base UI primitives (Dialog, Select, Tabs, Checkbox, Switch, Tooltip) get keyboard nav, focus trap/restore, and roles for free and look solid. The gaps are in components with hand-rolled behavior.
Issues found
-
Command: disabled items are unreachable by keyboard.
command-item.tsx:65-81renders disabled items as a raw<div role='option' aria-disabled>outside the Autocomplete primitive, with an existing TODO acknowledging it's a workaround ("Fix this when Base UI fixes this issue"). This item isn't reachable by the primitive's own roving keyboard navigation. -
Menu/ContextMenu bridge keyboard nav with a synthetic-event hack.
menu/menu-content.tsx:60-96(mirrored incontext-menu/context-menu-content.tsx:61-92) callsdispatchKeyboardEvent(item, KEYCODES.ARROW_RIGHT/ESCAPE)againstquerySelectorAll('[role="option"]')to bridge two primitives. Fragile — depends on synthetic event dispatch working the same as real keyboard input. -
DataView doesn't announce filter/result changes.
data-view/components/search.tsxandordering.tsxhave noaria-live/aria-expandedwhen filter or result counts change. Screen reader users get no feedback when a filter narrows the list. -
Missing
:focus-visiblerules in Dialog and Tooltip CSS. Confirmed zero matches forfocus-visibleindialog/*.module.cssortooltip/*.module.css, vs. 52 matches across 29 other component.module.cssfiles. May look fine today via inherited/default browser focus styling, but isn't explicit.
Suggested approach
Priority order: fix #1 first (keyboard-unreachable content is the most severe — a real WCAG failure), then #3 (DataView live regions), then #2 and #4.
Notes
Found via a components.build practices audit (accessibility dimension). Base-UI-backed primitives were not found to have equivalent issues — this is isolated to bespoke composite components.
- 主要言語
- TypeScript
- スター
- 69
- フォーク
- 13
- 平均マージ
- 4日 4時間
- マージ済み PR（30日）
- 27
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートあり
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
raystack/apsara のほかの issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 84/100
メンテナーはふだん 5 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 86/100
メンテナーはふだん 5 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 84/100
メンテナーはふだん 5 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 85/100
メンテナーはふだん 5 日以内に返信
-
難易度 4/5 3〜5日 初心者へのやさしさ 48/100
メンテナーはふだん 5 日以内に返信
raystack/apsara の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
メンテナーはふだん 1 日以内に返信
-
high priority
難易度 2/5 1〜3時間 初心者へのやさしさ 62/100
CI-CMG/deep-sea-corals-exb#84 · コメント 1 件 ·
-
Create/import wallet form shows raw "password must be at least 1 characters" instead of the translated message対応中かも @CapThunder19 が今日担当しました。 オープンbug
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
joinmarket-webui/jam#1538 ·
メンテナーはふだん 1 日以内に返信
-
t0ggles
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
nolimits4web/swiper#8240 · コメント 1 件 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
メンテナーはふだん 1 日以内に返信