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

[Frontend] Add aria-live announcement and keyboard focus management to NotificationDropdown

Aperta Adatta ai principianti
  • Qualcosa non va?
#1,636 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 7 giorni

@aazminu ci sta già lavorando.

Dal 19/10/2026.

  • #1690 di @aazminu — aperta

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
84/100
Tipo di issue
Funzionalità
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
next.js, typescript
Ambito
accessibility, frontend

Direzione di ricerca

Leggi frontend/src/components/NotificationDropdown.tsx per individuare il trigger a forma di campana e lo stato di apertura del menu a discesa, poi esamina frontend/src/components/NotificationDropdown.test.tsx per trovare i test di interazione esistenti. Aggiungi gli attributi ARIA specificati e la chiusura con Escape, ripristinando il focus sul trigger. Il lavoro è completo quando i test confermano che lo stato espanso si aggiorna e che Escape chiude il menu a discesa e riporta il focus al trigger.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

a11y drips-wave frontend good-first-issue

Overview

The notification menu in frontend/src/components/NotificationDropdown.tsx opens on click, but lacks aria-expanded, aria-controls, and Escape key dismissal to return focus to the bell trigger button.

Problem

  • Screen reader and keyboard-only users cannot easily tell whether the dropdown is open or close it without tabbing through every item.

Proposed Changes

  1. Add aria-expanded, aria-haspopup="menu", and aria-label to the notification bell trigger in NotificationDropdown.tsx.
  2. Listen for Escape key presses when open to close the dropdown and restore focus to the trigger button.

Acceptance Criteria

  • Bell button exposes accurate aria-expanded boolean state.
  • Pressing Escape closes the dropdown and returns focus to the bell button.
  • Tested in frontend/src/components/NotificationDropdown.test.tsx.
Lingua principale
TypeScript
Stelle
18
Fork
250
Merge medio
5g 23h
PR unite (30g)
72

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 LabsCrypt/flowfi

Tutte le issue di LabsCrypt/flowfi

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.