patternfly / patternfly/patternfly-react
[react] Resolve violations for WCAG 2.2 a11y tool bump
まだ誰も着手していません。
- 主要言語
- TypeScript
- スター
- 862
- フォーク
- 392
- 平均マージ
- 4日 8時間
- マージ済み PR(30日)
- 9
説明
Describe the enhancement or change
Follow up to #12296
All reported 2.2AA errors are target-size violations. The common trend behind these errors is the placement of sibling Checkboxes and Radios in our examples.
Component issues:
-
ClipboardCopy: inline + compact clipboard copies that contain additional actions. Needs additional spacing between the internal copy action and additional actions, and possibly between additional actions as well.
-
Checkbox: sibling checkboxes. Needs additional spacing.
-
Label: the following needs additional spacing between actionable elements
- All labels that are links or clickable with the close button
- All compact labels (base, link, clickable) with the close button
- Editable labels with the close button
-
Truncate: truncated links and sibling truncated links
Example-only target-size violations due to checkboxes/radios:
-
Card
-
CodeEditor
-
Drawer
-
FileUpload, both Single and Multiple
-
Modal
-
Progress
-
ProgressStepper
-
Popover
-
SearchInput
-
Select (templates tab)
-
Table (demos tab) - specifically demos contain truncated links
-
Tooltip
CodeEditor was also getting a couple contrast violations for the monaco text colors in light theme.
Jira Issue: PF-4439
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
まず、一覧にあるコンポーネント例に対してアクセシビリティチェックを実行し、兄弟関係にある Checkboxes、Radios、リンク、アクションに関するターゲットサイズ違反に重点を置きます。ClipboardCopy、Checkbox、Label、Truncate、指定されたサンプルコンポーネント、CodeEditor を調査します。報告された 2.2AA のターゲットサイズ違反と CodeEditor のライトテーマのコントラスト違反が解消されれば、作業は完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- react, typescript
- 領域
- accessibility, frontend, testing
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 活発
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 52/100