Fix Empty Button Errors

An "empty button" is any <button> that exposes no accessible name — typically because it contains only an SVG, an icon font, or an image without alt text. axe-core reports this as button-name; Lighthouse reports it as "Buttons do not have an accessible name."

Screen reader users navigate UIs by listing buttons and links. An unnamed button is announced as "button" — useless. On a modal with three icon buttons, the user hears "button, button, button" with no way to choose. This violates WCAG 2.1 Success Criterion 4.1.2 (Name, Role, Value), which is a direct Section 508 requirement and one of the most frequently cited failures in ADA Title III lawsuits.

<button onClick={onClose}>
  <XIcon />
</button>

<button>
  <img src="/cart.svg" />
</button>

<button aria-label="" onClick={onSave}>
  <SaveIcon />
</button>

<button type="button" onClick={onClose} aria-label="Close dialog">
  <XIcon aria-hidden="true" />
</button>

<button type="button" aria-label="View cart">
  <img src="/cart.svg" alt="" />
</button>

<button type="button" onClick={onSave} aria-label="Save changes">
  <SaveIcon aria-hidden="true" />
</button>

The fixed version adds an explicit aria-label, hides decorative icons from the accessibility tree with aria-hidden="true" (or empty alt=""), and locks down type="button" so the control does not submit forms accidentally.

fixa11y traces the accessible name computation for every <button> in the JSX tree, including buttons built from asChild wrappers, Radix slots, and custom icon components. When the computed name is empty, the fixer generates a label from surrounding context (handler name, neighboring text, icon component name) and inserts a properly scoped aria-label.