VBC-035: aria-label-icon-button

error

Category: ux-dx
Analysis: Regex (whole file)
File types: .html, .tsx, .jsx, .astro
Scope: source code only, ignoring anything inside strings and comments
Tags: accessibility

What it reports

Icon-only button without aria-label at line {line}. A button containing only an SVG icon has no accessible name, making it completely opaque to screen readers. Add aria-label="Descriptive action" to every icon-only button.

Flagged

<button onClick={close}>
  <svg viewBox="0 0 24 24" />
</button>

<button onClick={close}>
  <svg viewBox="0 0 24 24"><path d="M6 6l12 12"/></svg>
</button>

Not flagged

<button aria-label="Close" onClick={close}>
  <svg viewBox="0 0 24 24" />
</button>

<button class="btn-primary" id="btn-download-zip">
  <svg width="18" height="18" viewBox="0 0 24 24"><path d="M21 15v4"/></svg>
  Download Project ZIP
</button>

<button onClick={close}>
  <svg viewBox="0 0 24 24" />
  <span class="sr-only">Close</span>
</button>

Pattern

<button\b(?![^>]*(?:aria-label|aria-labelledby|title))[^>]*>\s*<svg\b[^>]*(?:/>|>(?:(?!</svg>)[\s\S]){0,2000}?</svg>)\s*</button>