A11Y-012: ARIA name or state on a div without a role

Warning: the page still builds, but this is most likely a mistake.

A div or span is nothing to a screen reader, so most of them ignore an aria-label or ARIA state on it. Use an element that means something, or give the div a role.

Fails

page(title: "Shoes", description: "All our running shoes, from light racers to trail shoes.") {
  h1 "Shoes"
  div(aria-label: "Shoe sizes") { p "EU 38 to 47" }
}

warning[A11Y-012]: `aria-label` on a div without a role does nothing
 --> page.hypra:3:7
  |
3 |   div(aria-label: "Shoe sizes") { p "EU 38 to 47" }
  |       ^^^^^^^^^^
  = help: add a role, e.g. role: "group", or use an element like nav, section or button
  = docs: https://hypralang.dev/rules/a11y-012/

0 errors, 1 warning

Fixed

page(title: "Shoes", description: "All our running shoes, from light racers to trail shoes.") {
  h1 "Shoes"
  section(aria-label: "Shoe sizes") { p "EU 38 to 47" }
  div(role: "group", aria-label: "Colors") { p "Blue, black, white" }
}