Accessibility Patterns

<section class="row g-4">
      <div class="col-lg-6">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-success mb-3">Keyboard Ready</span>
          <h2 class="h4">Focus And Navigation</h2>
          <p class="text-secondary">Pages include a skip link, visible focus states, logical headings, and controls that keep their accessible names.</p>
          <div class="d-flex flex-wrap gap-2" aria-label="Keyboard focus examples">
            <a class="btn btn-primary" href="#accessibility-live-region">Jump To Status Demo</a>
            <button class="btn btn-outline-secondary" type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltips are supplementary, not the only label.">Tooltip Button</button>
            <button class="btn btn-icon btn-outline-primary" type="button" aria-label="Icon button with accessible name"><i class="bi bi-check2-circle" aria-hidden="true"></i></button>
          </div>
        </article>
      </div>
      <div class="col-lg-6">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-primary mb-3">Form Labels</span>
          <h2 class="h4">Labelled Inputs</h2>
          <p class="text-secondary">Each field keeps a visible or programmatic label, helper text, and native validation state.</p>
          <form class="row g-3" action="../pages/search-results.html" method="get">
            <div class="col-md-6">
              <label class="form-label" for="a11y-project-name">Project Name</label>
              <input id="a11y-project-name" name="q" class="form-control" type="text" value="Accessibility review" aria-describedby="a11y-project-help">
              <div id="a11y-project-help" class="form-text">Clear labels survive zoom, translation, and screen reader use.</div>
            </div>
            <div class="col-md-6">
              <label class="form-label" for="a11y-priority">Priority</label>
              <select id="a11y-priority" name="priority" class="form-select">
                <option>High</option>
                <option>Medium</option>
                <option>Low</option>
              </select>
            </div>
            <div class="col-12">
              <button class="btn btn-outline-primary" type="submit">Search Documentation</button>
            </div>
          </form>
        </article>
      </div>
      <div class="col-lg-4">
        <article class="athena-card p-4 h-100" id="accessibility-live-region">
          <span class="badge text-bg-info mb-3">Live Region</span>
          <h2 class="h5">Status Messages</h2>
          <p class="text-secondary">Toast notifications are announced politely and can be dismissed with an accessible close button.</p>
          <button class="btn btn-outline-primary" type="button" data-athena-toast>Show Status Toast</button>
        </article>
      </div>
      <div class="col-lg-4">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-warning mb-3">Reduced Motion</span>
          <h2 class="h5">Motion And Theme</h2>
          <p class="text-secondary">Animations are restrained, colour theme changes are explicit, and information is not carried by colour alone.</p>
          <div class="d-flex align-items-center gap-2">
            <span class="badge text-bg-success">Pass</span>
            <span class="badge text-bg-danger">Action Required</span>
            <span class="badge text-bg-secondary">Muted</span>
          </div>
        </article>
      </div>

      <div class="col-lg-4">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-secondary mb-3">Checklist</span>
          <h2 class="h5">WCAG 2.2 Touchpoints</h2>
          <ul class="athena-check-list mb-0">
            <li><i class="bi bi-check2" aria-hidden="true"></i><span>Keyboard access and focus order.</span></li>
            <li><i class="bi bi-check2" aria-hidden="true"></i><span>Labels, names, and helper text.</span></li>
            <li><i class="bi bi-check2" aria-hidden="true"></i><span>Responsive layouts without horizontal traps.</span></li>
            <li><i class="bi bi-check2" aria-hidden="true"></i><span>Semantic tables, headings, and landmarks.</span></li>
          </ul>
        </article>
      </div>
    </section>