patternfly / patternfly/patternfly-react

Spike: Revisit Timestamp accessibility

Abierto
#10,265 9 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

A11y PF Team Stale
Lenguaje dominante
TypeScript
Estrellas
862
Forks
392
Merge medio
4 d 8 h
PR fusionados (30 d)
9

Descripción

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

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Comienza en packages/react-core/src/components/Timestamp/Timestamp.tsx alrededor de la línea 147, donde se crea el atributo datetime, e inspecciona el comportamiento actual de Timestamp, tooltip y popover. Compara los dos enfoques de accesibilidad descritos en el issue y, a continuación, establece qué dirección aborda mejor la visibilidad para el descubrimiento visual y los anuncios para tecnologías de asistencia. Se considera terminado cuando se haya llegado a una recomendación de implementación documentada con un comportamiento de accesibilidad claro.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
react, typescript
Área
accessibility, frontend
Tipo de issue
Nueva funcionalidad
Dificultad
5/5
Tiempo estimado
Más de una semana
Estado de actividad
Tranquilo
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.