Scroll Area

---
// src/components/ui/media/scroll-area/ScrollArea.astro — headless primitive (see ../../README.md).
// A scroll container that a keyboard can actually reach. That is the entire primitive, and it is a
// real accessibility failure rather than a nicety: WCAG 2.1.1 requires content reachable by pointer
// to be reachable by keyboard, and an `overflow: auto` box is not — you can see the scrollbar, drag
// it with a mouse, and have no way to move it with a keyboard.
//
// Browsers have started closing that hole themselves, but only halfway: a scroller with NO focusable
// content becomes focusable automatically in recent Chrome, and a scroller WITH focusable content
// does not — on the theory that you can tab through the children instead. That theory fails the
// moment the scrollable content is a table, a log, a long code block, or a diagram, which is most of
// the times anyone reaches for this. So `tabindex="0"` is written here, unconditionally, in markup:
// it has to work with no JavaScript, and it has to work in every browser.
//
// A focusable box needs a name and a role, or a screen reader announces "group" and nothing else —
// hence `role="group"` and a `label`. `overflow` itself lives in structure.css, because without it
// this component is a plain <div> with a stray tab stop.
import "../../../../styles/structure.css";

// The rule guards against tab stops on inert content. A scroll container is the opposite of inert,
// and this tab stop is the entire primitive — see the note above on why the browser's own
// heuristic does not cover it.
/* eslint-disable astro/jsx-a11y/no-noninteractive-tabindex */
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"div"> & {
  /** Which axis may scroll. The other is clipped, so content cannot escape sideways. */
  orientation?: "vertical" | "horizontal" | "both";
  /** Names the region. A focusable box with no name is announced as nothing at all. */
  label?: string;
};

const {
  orientation = "vertical",
  label = "Scrollable content",
  class: className,
  ...rest
} = Astro.props;
---

<div
  tabindex="0"
  role="group"
  aria-label={label}
  data-slot="scroll-area"
  data-orientation={orientation}
  class={className}
  {...rest}
>
  <slot />
</div>

import ScrollArea from "./ScrollArea.astro";

export { ScrollArea };
export default ScrollArea;