Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

[Bug] Header fullscreen/close controls lack accessible names and use hardcoded icon fills

Abierto
  • ¿Algo no está bien?
#1,880 0 comentarios 0 reacciones 1 asignado Ver en GitHub

Los mantenedores suelen responder en 1 día

@PARTH-TUSSLE ya está trabajando en esto.

Desde el 18/10/2026.

  • #1881 de @PARTH-TUSSLE — abierto

Evaluación

Este issue todavía no se ha evaluado.

Descripción

kind/bug
Current Behavior

In src/custom/Modal/index.tsx, the modal header actions are not properly accessible:

  1. The enter/exit fullscreen controls are the styled FullScreenIcon / FullScreenExitIcon SVG components with an onClick. They appear to be plain SVGs rather than buttons, so they have no role and no accessible name, and they are probably not keyboard-focusable. Please verify with a keyboard and a screen reader. The surrounding CustomTooltip only helps on hover.
  2. The close control is an IconButton (CloseBtn) with no aria-label, so a screen reader announces only "button".
  3. CloseBtn hardcodes fill: #fff (and CloseIcon passes fill="#fff") instead of using the theme/token or inheriting currentColor. The fullscreen icons already use theme.palette.common.white, so the header is inconsistent.

This conflicts with the existing guidance in DESIGN.md ("Semantic ARIA: icon-only buttons must supply descriptive aria-label and Tooltip").

Expected Behavior
  • Fullscreen toggle: a native, keyboard-operable button (for example MUI IconButton) with aria-label "Enter fullscreen" / "Exit fullscreen", keeping the existing tooltip and data-testids (modal-enter-fullscreen-btn, modal-exit-fullscreen-btn).
  • Close control: aria-label="Close dialog" (keep data-testid="modal-close-btn").
  • Icon colors come from the existing theme token or inherit via currentColor (the header's color) rather than a hardcoded literal.
  • Keep this focused on the header controls: no layout or styling redesign.
Acceptance Criteria
  • getByRole('button', { name: 'Enter fullscreen' }), { name: 'Exit fullscreen' } and { name: 'Close dialog' } resolve in tests.
  • Both controls can be focused and activated with Tab, Enter and Space.
  • No hardcoded color literals remain in the header controls.
  • Existing Modal tests and data-testids keep passing.
  • Does not change Modal / useModal public props.
Context
  • Raised in review by @leecalcote on #1868, and deliberately left out of that PR to keep it scoped to #1864.
Screenshots/Logs
Environment
Contributor Guides and Resources
Lenguaje dominante
TypeScript
Estrellas
140
Forks
244
Merge medio
2 d 22 h
PR fusionados (30 d)
17

Preparar el entorno

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.

Más de layer5io/sistent

Todos los issues de layer5io/sistent

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.