Accessibility

// Warning: <img> without alt
html! { <img src="/photo.jpg" /> }
//       ^^^^ missing `alt` attribute — screen readers cannot describe this image.
//            Use alt="description" or alt="" for decorative images.

// OK: descriptive alt
html! { <img src="/photo.jpg" alt="Team photo from the company retreat" /> }

// OK: decorative image (empty alt)
html! { <img src="/divider.svg" alt="" /> }

// Error: invalid role
html! { <div role="buttn">"Click"</div> }
//                 ^^^^^^ "buttn" is not a valid ARIA role. Did you mean "button"?

// Error: abstract role
html! { <div role="widget">"Click"</div> }
//                 ^^^^^^^ "widget" is an abstract role and cannot be used in content.
//                          Use a concrete role like "button", "checkbox", or "slider".

// Error: role="checkbox" requires aria-checked
html! { <div role="checkbox">"Accept terms"</div> }
//       ^^^^ role="checkbox" requires the `aria-checked` attribute.
//            Add aria-checked="true", aria-checked="false", or aria-checked="mixed".

// OK
html! {
    <div role="checkbox" aria_checked="false">"Accept terms"</div>
}

// Error: not a real ARIA attribute
html! { <div aria_labeledby="title">"content"</div> }
//            ^^^^^^^^^^^^^^^ "aria-labeledby" is not a valid ARIA attribute.
//                             Did you mean "aria-labelledby"?

// Error: invalid value
html! { <div aria_hidden="yes">"content"</div> }
//                        ^^^^ "yes" is not a valid value for aria-hidden.
//                              Use "true" or "false".

// Warning: redundant role
html! { <button role="button">"Save"</button> }
//               ^^^^^^^^^^^^^ <button> already has an implicit role of "button".
//                              Remove the role attribute.

// Warning: prefer native element
html! { <div role="button" tabindex="0">"Save"</div> }
//            ^^^^^^^^^^^^^ prefer <button> over <div role="button"> —
//                           native elements provide keyboard support and
//                           accessibility semantics for free.

// Warning: positive tabindex
html! { <input tabindex="5" /> }
//              ^^^^^^^^^^^^^ tabindex="5" overrides the natural document tab order.
//                            Use tabindex="0" to add to natural order, or
//                            tabindex="-1" for programmatic focus only.

// Warning: <html> without lang
html! {
    <html>
        <head><title>"My Page"</title></head>
    </html>
}
// ^^^^^ <html> should have a `lang` attribute (e.g., lang="en").
//       Screen readers use this to select the correct pronunciation rules.

// Example: axe-core in Playwright
import AxeBuilder from "@axe-core/playwright";

test("home page is accessible", async ({ page }) => {
  await page.goto("/");
  const results = await new AxeBuilder({ page }).analyze();
  expect(results.violations).toEqual([]);
});