TS · correctness

←Previous Next→

require-button-accessible-name

Require an accessible name on statically unnamed native or configured JSX buttons.

missingName Rule source Tests Catalog JSON

Why

An icon-only action without an accessible name cannot communicate its purpose to assistive technology.

Fix

Provide meaningful visible or visually hidden text, aria-label, or aria-labelledby for the action.

Examples

Before — flagged Name an icon action

src/action.tsx

<button>
  <svg aria-hidden="true" />
</button>;

After — preferred Provide the action name

src/action.tsx

<button aria-label="Close">
  <svg aria-hidden="true" />
</button>;

Options

{
  "additionalProperties": false,
  "properties": {
    "components": {
      "items": {
        "additionalProperties": false,
        "properties": {
          "export": { "minLength": 1, "type": "string" },
          "module": { "minLength": 1, "type": "string" }
        },
        "required": ["module", "export"],
        "type": "object"
      },
      "type": "array"
    },
    "iconModules": {
      "items": { "minLength": 1, "type": "string" },
      "type": "array",
      "uniqueItems": true
    }
  },
  "type": "object"
}