A11Y-005: button has no text

Error: the page doesn't build until this is fixed.

A button without text is announced as just "button", so nobody using a screen reader knows what it does. An icon alone, like a decorative image, doesn't name it. (WCAG 4.1.2)

Fails

page(title: "Shoes", description: "All our running shoes, from light racers to trail shoes.") {
  h1 "Shoes"
  button(type: "button") { img("/icons/close.svg", decorative: true) }
}

error[A11Y-005]: button has no text
 --> page.hypra:3:3
  |
3 |   button(type: "button") { img("/icons/close.svg", decorative: true) }
  |   ^^^^^^
  = help: button "Send", or aria-label: "..." for an icon button
  = docs: https://hypralang.dev/rules/a11y-005/

1 error, 0 warnings

Fixed

page(title: "Shoes", description: "All our running shoes, from light racers to trail shoes.") {
  h1 "Shoes"
  button(type: "button", aria-label: "Close the menu") { img("/icons/close.svg", decorative: true) }
  button(type: "button") "Close"
}