React fix guide

Fix Empty buttons on React

Icon-only buttons need visible text or `aria-label`.

This page ties the generic issue to how it usually shows up in React markup and tooling, then walks you through a fix and verification loop.

Verify on a live URL

Scan, fix, deploy, then rescan the same address to compare reports.

Main issue guide: Empty buttons →

At a glance

Instructional

No accessible name

Visible text names the control

Icon-only controls need a name

Visible text, aria-label, or associated text can supply an accessible name.

Where this comes from on React

Icon-only `<button>` or `<div role="button">` in design-system wrappers.

What this issue means

Causes

Designers remove visible text assuming icons are universal. SVG or `<img>` icons without alt contribute empty names.

Fixes

Add visually hidden text or `aria-label` that matches the action: “Close dialog”, “Submit order”.

How to fix on React

Radix/shadcn primitives often expose label props—wire them in consistently.

How to fix

Add visible text or aria-label that states the action: “Close dialog”, “Add to favorites”.

Ensure disabled state is communicated to assistive tech, not only styled gray.

Code snippet

<button type="button" aria-label="Close dialog">
  <CloseIcon aria-hidden />
</button>

Common mistakes on React

Spreading props that strip `children` text.
Icon components that do not forward aria-label.
Fixing Storybook but not production props.
Conditional roles that differ between tests and prod.

How to verify the fix

Run `npm run build && npm start` and test the production bundle.
Tab through the component; check the accessibility tree in devtools.
Rerun the scan on the deployed or staging URL.

Related: 4.1.2 Name, Role, Value.

Same issue on other platforms

Guides

Pre-launch checklist

Next steps

Run a scan on staging or production.
Re-read the main issue page for context and WCAG notes.
React and Next.js accessibility hub for more platform resources.

TestAccessibility · React fix · localhost:3001