patternfly / patternfly/patternfly-react

MenuToggle - add aria-controls prop to relate toggle and content it controls

Abierto
#11,304 10 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

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

Descripción

Describe the problem
With PF6, the dropdown menu popover is by default parented to the root. When the menu is open, there is no attribute which relates the popover menu back to the toggle button which opened it.

react-table ActionColumn is an example where PF owns both components but there's still no relation. It would be possible to override the MenuToggle by supplying a custom actionsToggle function.

In writing this issue, I realize it may not be possible without "hacks" for PF to relate the two when the application controls the rendering of both the toggle and menu separately.

Having a relationship between the two at the dom level would help with test automation such as cypress.

How do you reproduce the problem?
Go to https://www.patternfly.org/components/menus/dropdown
Open a dropdown menu
Using web inspector, inspect the dropdown toggle and popover menu parented to the root. Observe there is no attribute relating the two.

Expected behavior
Expected some attribute present, wether arbitrary or a11y requirement, to relate the two dom nodes.

Is this issue blocking you?
It is possible to supply an ID which then gets applied to the popover menu.

What is your product and what release date are you targeting?
RHOAI


Jira Issue: PF-998

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 con el ejemplo de la documentación de dropdown de PatternFly y la API de MenuToggle descrita en el issue. Traza cómo se renderizan el toggle y el popover con el elemento root como padre, y después define el comportamiento de las props para que los dos nodos DOM reciban una relación; verifica el resultado en el ejemplo de dropdown y en sus pruebas de accesibilidad o interacción, si están disponibles.

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
3/5
Tiempo estimado
1-2 días
Estado de actividad
Tranquilo
Claridad
Bastante claro
Aptitud para principiantes
58/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.