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

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

Abierto Apto para principiantes
  • ¿Algo no está bien?
#1,780 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
78/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
tailwindcss, typescript
Área
accessibility, frontend

Línea de trabajo

Empieza con apps/outreach/src/components/layout/Header.astro y apps/outreach/src/components/overview/Testimonials.astro; después, inspecciona los controladores para abrir y cerrar el menú y las traducciones de common.json. Verifica manualmente según las instrucciones de apps/outreach/AGENTS.md: recorre /en/ con la tecla Tab a ancho de escritorio e inspecciona el árbol de accesibilidad. El trabajo estará terminado cuando se omita el menú cerrado, todos los controles enumerados tengan nombres accesibles y esos nombres tengan traducciones al francés.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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".

Lenguaje dominante
TypeScript
Estrellas
119
Forks
19
Merge medio
18 h 50 min
PR fusionados (30 d)
36

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

Todos los issues de DouglasNeuroInformatics/OpenDataCapture

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.