Accessibility: search input lacks label, sidebar toggle not keyboard accessible, missing ARIA attributes

[ryuno2525]

Hi! This React dashboard template has 1600+ stars and is used by many developers. I reviewed the source code and found several accessibility issues.

Issues Found

1. Search input has no <label> element

In src/components/Header/Header.js, the search input relies solely on a placeholder:

<Input placeholder="Search for..." />

There is no associated <label> element or aria-label. Screen readers cannot identify the purpose of this field (WCAG 1.3.1, 3.3.2).

Fix: Add an aria-label:

<Input placeholder="Search for..." aria-label="Search" />

2. Sidebar toggle is not a proper button

The sidebar toggle is a <NavItem> with onClick and an <i> icon:

<NavItem ... onClick={this.props.sidebarToggle}>
  <i className="fa fa-bars fa-2x text-muted" />
</NavItem>

<NavItem> renders as a <li>, which is not focusable or keyboard-activatable. The icon also lacks an accessible name (WCAG 2.1.1, 4.1.2).

Fix: Use a <button> element with aria-label:

<button onClick={this.props.sidebarToggle} aria-label="Toggle sidebar" aria-expanded={sidebarOpen}>
  <i className="fa fa-bars fa-2x text-muted" aria-hidden="true" />
</button>

3. Logo icon link lacks accessible name

In src/components/Sidebar/Sidebar.js:

<Link to="/app/main">
  <Icon glyph="logo" />
</Link>

This link contains only an icon with no text alternative. Screen readers announce it as an empty link (WCAG 2.4.4).

Fix: Add aria-label="Dashboard home" to the Link.

4. Sidebar navigation icons lack ARIA hiding

Each LinksGroup has a glyph icon that's decorative (the header prop provides the text). These icons should have aria-hidden="true" (WCAG 1.1.1).

5. No skip navigation link

There is no skip-to-main-content mechanism. In a sidebar layout, this is especially important since keyboard users must tab through all sidebar links before reaching the main content area (WCAG 2.4.1).

WCAG References

• 1.1.1 Non-text Content
• 1.3.1 Info and Relationships
• 2.1.1 Keyboard
• 2.4.1 Bypass Blocks
• 2.4.4 Link Purpose
• 4.1.2 Name, Role, Value

For a quick automated accessibility scan:

npx accessscore [your-demo-url]

Or visit https://accessscore.autonomous-claude.com

Happy to help with a PR!