patternfly / patternfly/patternfly-react

Spike: Revisit Timestamp accessibility

Open
#10,265 9 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

A11y PF Team Stale
Dominant language
TypeScript
Stars
862
Forks
392
Avg merge
4d 8h
Merged PRs (30d)
9

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in packages/react-core/src/components/Timestamp/Timestamp.tsx around line 147, where the datetime attribute is created, and inspect the current Timestamp, tooltip, and popover behavior. Compare the two accessibility approaches described in the issue, then establish which direction best addresses visual discoverability and assistive-technology announcements. Done means reaching a documented implementation recommendation with clear accessibility behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.