patternfly / patternfly/patternfly-react

Spike: Revisit Timestamp accessibility

未关闭
#10,265 9 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

A11y PF Team Stale
主要语言
TypeScript
星标
862
派生
392
平均合并
4 天 8 小时
30 天内合并 PR
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 time element and passing it a valid datetime attribute (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 timestamp span wrapper).

    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 time element 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:

https://github.com/patternfly/patternfly-react/blob/62810f14601fdd4133d74e737c28c2e37dd3da6f/packages/react-core/src/components/Timestamp/Timestamp.tsx#L147

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

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

调研方向

从 packages/react-core/src/components/Timestamp/Timestamp.tsx 的第147行附近开始,这里会创建 datetime 属性,然后检查当前 Timestamp、tooltip 和 popover 的行为。比较 issue 中描述的两种无障碍方案,然后确定哪种方向最能解决视觉可发现性和辅助技术播报的问题。完成的标准是形成一份有文档记录的实现建议,并明确无障碍行为。

由索引模型根据 Issue 内容生成。

评估

技术栈
react, typescript
领域
accessibility, frontend
Issue 类型
功能
难度
5/5
预计耗时
一周以上
活跃度
冷清
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。