A11Y-010: positive tabindex

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

A tabindex of 1 or more moves an element ahead of everything else when someone uses the Tab key, so focus jumps around the page in an order nobody expects. (WCAG 2.4.3)

Fails

page(title: "Shoes", description: "All our running shoes, from light racers to trail shoes.") {
  h1 "Shoes"
  a("/sale", tabindex: 1) "Sale"
}

warning[A11Y-010]: a positive tabindex changes the keyboard order
 --> page.hypra:3:24
  |
3 |   a("/sale", tabindex: 1) "Sale"
  |                        ^
  = help: use tabindex: 0 to make it focusable, and order the page instead
  = docs: https://hypralang.dev/rules/a11y-010/

0 errors, 1 warning

Fixed

page(title: "Shoes", description: "All our running shoes, from light racers to trail shoes.") {
  h1 "Shoes"
  a("/sale") "Sale"
  div(tabindex: 0, class: "scroll-x") { p "EU 38, 39, 40, 41, 42, 43, 44, 45, 46, 47" }
}

Links, buttons and fields can be focused already. tabindex: 0 makes something else focusable, in the page's order, and tabindex: -1 makes it focusable from a script only. To change the order, change the order of the page.