Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
  • Qualcosa non va?
#1,880 0 commenti 0 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@PARTH-TUSSLE ci sta già lavorando.

Dal 18/10/2026.

  • #1881 di @PARTH-TUSSLE — aperta

Valutazione

Questa issue non è ancora stata valutata.

Descrizione

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
Lingua principale
TypeScript
Stelle
140
Fork
244
Merge medio
2g 18h
PR unite (30g)
18

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di layer5io/sistent

Tutte le issue di layer5io/sistent

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.