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

Accessibility: name the sidebar links and Logout button when the sidebar is collapsed

Aperta
  • Qualcosa non va?
#24 4 commenti 0 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@GauriMalge ci sta già lavorando.

Dal 11/10/2026.

Valutazione

Questa issue non è ancora stata valutata.

Descrizione

difficulty: easy enhancement frontend good first issue hacktoberfest
Context

The sidebar can be collapsed with the small ‹ button on its edge. When it's collapsed, the Dashboard, Tasks and Profile links and the Logout button show only an icon: the text labels are hidden. Screen readers then announce them as just "link" or "button", so users who rely on them can't tell what each one does. Sighted users get no hint either, since there's no tooltip.

This was found while reviewing #23, which fixed labels and icon buttons elsewhere in the app.

Please wait until #23 is merged before starting, since it also changes Sidebar.jsx. Starting from the latest main after that avoids merge conflicts.

Files likely involved
  • client/src/components/Layout/Sidebar.jsx (the NavLink inside navItems.map(...) and the Logout <button>)
Acceptance criteria
  • When the sidebar is collapsed, each nav link has an accessible name matching its label: aria-label="Dashboard", "Tasks" and "Profile". Using item.label keeps it in one place.
  • When collapsed, the Logout button has aria-label="Logout".
  • The icons inside these links and the button get aria-hidden="true", since the text or aria-label already describes them.
  • When collapsed, hovering shows a tooltip with the same text (a title attribute is enough).
  • When the sidebar is expanded, nothing changes for sighted users: the visible text labels still provide the name.
  • No visual changes apart from the tooltips.
How to test
  1. Run npm run dev, log in, and click the ‹ button on the sidebar's edge to collapse it.
  2. Hover over each icon: a tooltip shows "Dashboard", "Tasks", "Profile" and "Logout".
  3. Dev tools (F12) → Elements → select a collapsed link → the Accessibility panel (next to "Styles", or under the » menu). Its Name shows the label, not an empty name.
  4. Expand the sidebar again: the links look and work exactly as before.

New here? 👋 Good first issues are reserved for people making their first few open-source contributions. Comment below to ask to work on this issue, and wait to be assigned. Then follow CONTRIBUTING.md for setup and how to open a pull request. Questions are welcome in the comments or in Discussions.

Lingua principale
JavaScript
Stelle
3
Fork
2
Merge medio
7h 8m
PR unite (30g)
38

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 KEX-03/taskflow

Tutte le issue di KEX-03/taskflow

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.