patternfly / patternfly/patternfly-react

[react] Resolve violations for WCAG 2.2 a11y tool bump

オープン
#12,558 コメント 2 件 リアクション 1 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

PF Team Stale
主要言語
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

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

まず、一覧にあるコンポーネント例に対してアクセシビリティチェックを実行し、兄弟関係にある Checkboxes、Radios、リンク、アクションに関するターゲットサイズ違反に重点を置きます。ClipboardCopy、Checkbox、Label、Truncate、指定されたサンプルコンポーネント、CodeEditor を調査します。報告された 2.2AA のターゲットサイズ違反と CodeEditor のライトテーマのコントラスト違反が解消されれば、作業は完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
react, typescript
領域
accessibility, frontend, testing
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
活発
明瞭さ
おおむね明確
初心者へのやさしさ
52/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。