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 { test, expect } from "@playwright/test";
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([]);
});