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

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

Open
  • Is something wrong?
#24 3 comments 0 reactions 1 assignee View on GitHub

Maintainers usually reply within 1 day

@GauriMalge is already working on this.

Since Oct 11, 2026.

Assessment

This issue has not been assessed yet.

Description

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.

Dominant language
JavaScript
Stars
3
Forks
2
Avg merge
6h 50m
Merged PRs (30d)
37

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

All issues in KEX-03/taskflow

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.