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

Closed mobile menu stays in the keyboard tab order, and the site's icon-only buttons have no accessible name

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

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
78/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
tailwindcss, typescript
Ambito
accessibility, frontend

Direzione di ricerca

Inizia da apps/outreach/src/components/layout/Header.astro e apps/outreach/src/components/overview/Testimonials.astro, poi esamina i gestori di apertura e chiusura del menu e le traduzioni di common.json. Verifica manualmente come indicato in apps/outreach/AGENTS.md: percorri /en/ con il tasto Tab a larghezza desktop e ispeziona l’albero di accessibilità. Il lavoro è completato quando il menu chiuso viene ignorato, tutti i controlli elencati hanno nomi accessibili e questi nomi hanno traduzioni in francese.

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

Descrizione

Area: Outreach Bug Difficulty: Low Priority: Medium

The marketing site's closed mobile menu stays in the keyboard tab order, and five of its controls have no accessible name. The mobile-slider panel is "closed" only by translate-x-112, which slides it off-screen. Nothing makes it inert, hidden or aria-hidden, so it is rendered on every page at every width. At desktop width, a keyboard user tabbing past the header lands on seven invisible stops: the panel's logo link, its close button and five nav links. Focus disappears from the screen while it does. On a 1280px viewport, the tenth Tab focuses #close-slider-button at x=1672. Screen readers also announce the duplicate navigation on every page. The icon-only controls have no name:

  • the hamburger (#nav-toggle) and the panel's close button (#close-slider-button);
  • the testimonial carousel's previous and next buttons (#left-testimonial-button, #right-testimonial-button);
  • the header's home link below 1024px, where the "Open Data Capture" text is hidden and only the unlabeled logo SVG is left.

A screen reader reads these as "button" or "link" with nothing else.

Where

apps/outreach/src/components/layout/Header.astro:53-55 and :64-79:

<button class="flex h-10 items-center md:hidden [&>svg]:h-full [&>svg]:w-auto" id="nav-toggle" type="button">
  <MenuIcon />
</button>
...
<div
  class="fixed right-0 z-30 flex h-screen w-full max-w-md translate-x-112 flex-col overflow-y-scroll bg-slate-50 py-6 shadow-xl transition-transform duration-300 dark:bg-slate-800"
  id="mobile-slider"
>
  ...
    <button class="rounded-lg p-2 text-slate-700 transition-colors dark:text-slate-300" type="button" id="close-slider-button">
      <XMarkIcon />
    </button>

apps/outreach/src/components/layout/Header.astro:42, which hides the home link's only text below lg:

<SiteTitle className="[&>span]:hidden [&>span]:lg:block" />

apps/outreach/src/components/overview/Testimonials.astro:25-30 (and :51-56 for the right button):

<button
  class="text-muted-foreground hidden rounded-full border border-slate-300 bg-slate-200 p-2 sm:block dark:border-slate-700 dark:bg-slate-800"
  id="left-testimonial-button"
>
  <ArrowLeftIcon />
</button>

Reproduce

  1. Open https://opendatacapture.org/en/ in a 1280×800 window.
  2. Press Tab ten times from the top of the page.
  3. Inspect the accessibility tree, or use VoiceOver at 390px wide.

Actual: after the header's theme and language buttons, focus moves to elements outside the viewport and no focus ring is visible for seven Tab presses. The tree lists a second, hidden navigation. At 390px, the home link, the menu button and the close button are announced without a name, and so are the testimonial arrows at desktop width.
Expected: the closed panel is not focusable or exposed, and every icon-only control has a translated accessible name.

Tests

apps/outreach has no unit or Playwright suite, by decision (apps/outreach/AGENTS.md). Verify manually: Tab from the top of /en/ at desktop width reaches the hero's "View Demo" link right after the language button, and the accessibility tree shows names for every button and link.

Suggested fix

Add the inert attribute to #mobile-slider while it is closed: set it in the markup, remove it in openSlider and restore it in closeSlider. Give the four buttons aria-labels from new common.json keys ("Open menu", "Close menu", "Previous testimonial", "Next testimonial", with French entries). Give the home link aria-label={t('meta.title')} or mark the logo SVG role="img" with a <title>. Mark the decorative icons inside labelled buttons aria-hidden="true".

Lingua principale
TypeScript
Stelle
119
Fork
19
Merge medio
1g 2h
PR unite (30g)
56

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 DouglasNeuroInformatics/OpenDataCapture

Tutte le issue di DouglasNeuroInformatics/OpenDataCapture

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.