---
import MainLayout from "../layouts/MainLayout.astro";
import Header from "../components/Header.astro";
---

<MainLayout
  title="Accessibility - Kumo"
  description="Learn how to make the most of Kumo's accessibility features and guidelines."
>
  <div class="flex flex-col">
    <Header />

    <!-- Page Header -->
    <div
      class="border-b border-kumo-line md:pr-12"
    >
      <div class="mx-auto md:border-r md:border-kumo-line">
        <div class="mx-auto max-w-3xl px-6 py-16">
          <h1
            class="mb-4 text-4xl font-semibold tracking-tight text-kumo-default"
          >
            Accessibility
          </h1>
          <p class="text-lg leading-relaxed text-kumo-strong">
            Learn how to make the most of Kumo's accessibility features and
            guidelines.
          </p>
        </div>
      </div>
    </div>

    <!-- Content -->
    <main class="flex grow flex-col md:pr-12">
      <div
        class="mx-auto w-full grow md:border-r md:border-kumo-line"
      >
        <div class="mx-auto max-w-3xl px-6 py-16">
          <div class="space-y-12 text-kumo-default">
            <!-- Introduction -->
            <section class="space-y-4 leading-relaxed">
              <p class="text-[17px]">
                Accessibility is a top priority for Kumo. Built on <a
                  href="https://base-ui.com/react/overview/accessibility"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="text-kumo-link underline-offset-2 hover:underline"
                  >Base UI</a
                >, Kumo components handle many complex accessibility details
                including ARIA attributes, role attributes, pointer
                interactions, keyboard navigation, and focus management. The
                goal is to provide an accessible user experience out of the box,
                with intuitive APIs for configuration.
              </p>
              <p class="text-[17px]">
                This page highlights some of the key accessibility features of
                Kumo, as well as some ways you will need to augment the library,
                in order to ensure that your application is accessible to
                everyone.
              </p>
            </section>

            <!-- Keyboard Navigation -->
            <section class="space-y-4">
              <h2
                class="text-2xl font-semibold tracking-tight text-kumo-default"
              >
                Keyboard Navigation
              </h2>
              <p class="text-[17px] leading-relaxed">
                Kumo components adhere to the <a
                  href="https://www.w3.org/WAI/ARIA/apg/"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="text-kumo-link underline-offset-2 hover:underline"
                  >WAI-ARIA Authoring Practices</a
                > to provide basic keyboard accessibility out of the box. This is
                critical for users who have difficulty using a pointer device, but
                it's also important for users who prefer navigating with a keyboard
                or other input mode.
              </p>
              <p class="text-[17px] leading-relaxed">
                Many components provide support for arrow keys, alphanumeric
                keys, <kbd
                  class="rounded border border-kumo-line bg-kumo-control px-1.5 py-0.5 font-mono text-sm"
                  >Home</kbd
                >, <kbd
                  class="rounded border border-kumo-line bg-kumo-control px-1.5 py-0.5 font-mono text-sm"
                  >End</kbd
                >, <kbd
                  class="rounded border border-kumo-line bg-kumo-control px-1.5 py-0.5 font-mono text-sm"
                  >Enter</kbd
                >, and <kbd
                  class="rounded border border-kumo-line bg-kumo-control px-1.5 py-0.5 font-mono text-sm"
                  >Esc</kbd
                >.
              </p>
            </section>

            <!-- Focus Management -->
            <section class="space-y-4">
              <h2
                class="text-2xl font-semibold tracking-tight text-kumo-default"
              >
                Focus Management
              </h2>
              <p class="text-[17px] leading-relaxed">
                Kumo components manage focus automatically following a user
                interaction. Additionally, some components provide props like <code
                  class="rounded bg-kumo-control px-1.5 py-0.5 font-mono text-sm"
                  >initialFocus</code
                > and <code
                  class="rounded bg-kumo-control px-1.5 py-0.5 font-mono text-sm"
                  >finalFocus</code
                >, to configure focus management.
              </p>
              <p class="text-[17px] leading-relaxed">
                While Kumo components manage focus, it's the developer's
                responsibility to visually indicate focus. This is typically
                handled by styling the <code
                  class="rounded bg-kumo-control px-1.5 py-0.5 font-mono text-sm"
                  >:focus</code
                > or <code
                  class="rounded bg-kumo-control px-1.5 py-0.5 font-mono text-sm"
                  >:focus-visible</code
                > CSS pseudo-classes. <a
                  href="https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="text-kumo-link underline-offset-2 hover:underline"
                  >WCAG provides guidelines on focus appearance</a
                >.
              </p>
            </section>

            <!-- Color Contrast -->
            <section class="space-y-4">
              <h2
                class="text-2xl font-semibold tracking-tight text-kumo-default"
              >
                Color Contrast
              </h2>
              <p class="text-[17px] leading-relaxed">
                When styling elements, it's important to meet the minimum
                requirements for color contrast between each foreground element
                and its corresponding background element. Unless your
                application has strict requirements around compliance with
                current standards, consider adhering to <a
                  href="https://www.myndex.com/APCA/"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="text-kumo-link underline-offset-2 hover:underline"
                  >APCA</a
                >, which is slated to become the new standard in WCAG 3.
              </p>
            </section>

            <!-- Accessible Labels -->
            <section class="space-y-4">
              <h2
                class="text-2xl font-semibold tracking-tight text-kumo-default"
              >
                Accessible Labels
              </h2>
              <p class="text-[17px] leading-relaxed">
                Kumo provides components like <code
                  class="rounded bg-kumo-control px-1.5 py-0.5 font-mono text-sm"
                  >Field</code
                >, <code
                  class="rounded bg-kumo-control px-1.5 py-0.5 font-mono text-sm"
                  >Input</code
                >, and <code
                  class="rounded bg-kumo-control px-1.5 py-0.5 font-mono text-sm"
                  >Checkbox</code
                > to automatically associate form controls. Additionally, you can
                use the native HTML <code
                  class="rounded bg-kumo-control px-1.5 py-0.5 font-mono text-sm"
                  >&lt;label&gt;</code
                > element to provide context to corresponding inputs.
              </p>
              <p class="text-[17px] leading-relaxed">
                Most applications will present custom controls that require
                accessible names provided by markup features such as <code
                  class="rounded bg-kumo-control px-1.5 py-0.5 font-mono text-sm"
                  >alt</code
                >, <code
                  class="rounded bg-kumo-control px-1.5 py-0.5 font-mono text-sm"
                  >aria-label</code
                > or <code
                  class="rounded bg-kumo-control px-1.5 py-0.5 font-mono text-sm"
                  >aria-labelledby</code
                >. <a
                  href="https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="text-kumo-link underline-offset-2 hover:underline"
                  >WAI-ARIA provides guidelines on providing accessible names to
                  custom controls</a
                >.
              </p>
            </section>

            <!-- Testing -->
            <section class="space-y-4">
              <h2
                class="text-2xl font-semibold tracking-tight text-kumo-default"
              >
                Testing
              </h2>
              <p class="text-[17px] leading-relaxed">
                Kumo components, built on Base UI, are tested on a broad
                spectrum of browsers, devices, platforms, screen readers, and
                environments to ensure accessibility across different user
                contexts.
              </p>
            </section>

            <!-- Learn More -->
            <section
              class="border-t border-kumo-line pt-8"
            >
              <p class="mb-4 text-[17px] leading-relaxed">
                For more detailed information about the accessibility features
                provided by Base UI, visit the <a
                  href="https://base-ui.com/react/overview/accessibility"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="text-kumo-link underline-offset-2 hover:underline"
                  >official accessibility documentation</a
                >.
              </p>
            </section>
          </div>
        </div>
      </div>
    </main>
  </div>
</MainLayout>
