patternfly / patternfly/patternfly-react
Spike: Revisit Timestamp accessibility
まだ誰も着手していません。
- 主要言語
- TypeScript
- スター
- 862
- フォーク
- 392
- 平均マージ
- 4日 8時間
- マージ済み PR(30日)
- 9
説明
Describe the enhancement or change
Per a discussion including @jgiardino and @jessiehuff there are some issues related to accessibility with our current Timestamp implementation:
-
There's no clear visual indication that the timestamp text can be interacted with when there's a tooltip
-
The tooltip content does not get announced by AT when triggered
Some ideas that have been brought up to help resolve this include:
-
Render screen reader text in the timestamp wrapper element of the UTC (or whatever other) time, and render the full timestamp info in the tooltip. Essentially treating the timestamp as truncated content when there's a tooltip. This would require rendering the UTC/additional time in a
timeelement and passing it a validdatetimeattribute (we're already handling this in a way if no dateTime prop is passed to Timestamp, so we could just expose a new "tooltipDateTime" prop or something if a user wants/needs to pass their own datetime attribute). See the following video for an example (note that VO is not announcing the tooltip content, it is announcing the visible text + screen reader text that is also wrapped in the main timestampspanwrapper).https://github.com/patternfly/patternfly-react/assets/70952936/629a9b1a-fbd3-4d80-ae9a-483067a39eab
-
Rendering an icon button next to the main timestamp visual text, and apply a popover (instead of a tooltip) to that button. This would require rendering a
timeelement inside the popover as well if users can navigate into the popover.
For both points above, we already handle creating a datetime attribute internally if a consumer doesn't pass their own dateTime prop:
Which just creates a string of the UTC time already which should be valid.
Is this request originating from a Red Hat product team? If so, which ones and is there any sort of deadline for this enhancement?
Any other information?
Jira Issue: PF-83
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
packages/react-core/src/components/Timestamp/Timestamp.tsx の147行目付近、datetime属性が作成されている箇所から始め、現在の Timestamp、tooltip、popover の動作を確認します。Issueで説明されている2つのアクセシビリティアプローチを比較し、視覚的な発見可能性と支援技術によるアナウンスに最も適切に対応できる方向を決定します。明確なアクセシビリティ動作を伴う、文書化された実装推奨事項に到達すれば完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- react, typescript
- 領域
- accessibility, frontend
- issue の種類
- 機能追加
- 難易度
- 5/5
- 見積もり時間
- 1週間以上
- 活発さ
- 静か
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 35/100