Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

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

Open Beginner friendly
  • Is something wrong?
#1,780 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
78/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
tailwindcss, typescript
Domain
accessibility, frontend

Research direction

Start with apps/outreach/src/components/layout/Header.astro and apps/outreach/src/components/overview/Testimonials.astro, then inspect the menu open/close handlers and the common.json translations. Verify manually as directed in apps/outreach/AGENTS.md: Tab through /en/ at desktop width and inspect the accessibility tree. Done when the closed menu is skipped, all listed controls have accessible names, and the names have French translations.

Written by the indexing model from the issue text.

Description

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

Dominant language
TypeScript
Stars
119
Forks
19
Avg merge
1d 4h
Merged PRs (30d)
44

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from DouglasNeuroInformatics/OpenDataCapture

All issues in DouglasNeuroInformatics/OpenDataCapture

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.