@solid-aria/accordion

@solid-aria/accordion

Accordion display a list of high-level options that can expand/collapse to reveal more information.

• createAccordion and createAccordionItem - Provides the behavior and accessibility implementation for an accordion component.

Installation

npm install @solid-aria/accordion
# or
yarn add @solid-aria/accordion
# or
pnpm add @solid-aria/accordion

createAccordion and createAccordionItem

Provides the behavior and accessibility implementation for an accordion component.

Features

An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content. The headings function as controls that enable users to reveal or hide their associated sections of content. createAccordion and createAccordionItem help implement these in an accessible way.

• Exposed to assistive technology using ARIA
• Support for disabled items
• Labeling support for accessibility
• Support for mouse, touch, and keyboard interactions
• Keyboard navigation support including arrow keys and home/end

How to use it

import {
  AriaAccordionItemProps,
  AriaAccordionProps,
  createAccordion,
  createAccordionItem
} from "@solid-aria/accordion";
import { ForItems, Item } from "@solid-aria/collection";
import { filterDOMProps } from "@solid-aria/utils";

import { createMemo, mergeProps } from "solid-js";

function AccordionItem(props: AriaAccordionItemProps) {
  let ref: HTMLButtonElement | undefined;

  const { buttonProps, regionProps, isExpanded } = createAccordionItem(props, () => ref);

  return (
    <div>
      <h3 style={{ margin: 0, padding: 0 }}>
        <button
          {...buttonProps}
          ref={ref}
          style={{
            appearance: "none",
            border: "none",
            display: "block",
            margin: 0,
            padding: "1em 1.5em",
            "text-align": "left",
            width: "100%"
          }}
        >
          {props.item.title}
        </button>
      </h3>
      <div
        {...regionProps}
        style={{
          display: isExpanded() ? "block" : "none",
          margin: 0,
          padding: "1em 1.5em"
        }}
      >
        {props.item.children}
      </div>
    </div>
  );
}

function Accordion(props: AriaAccordionProps) {
  let ref: HTMLDivElement | undefined;

  const { AccordionProvider, accordionProps, state } = createAccordion(props, () => ref);

  const domProps = createMemo(() => filterDOMProps(props));

  const rootProps = mergeProps(domProps, accordionProps);

  return (
    <div
      {...rootProps}
      ref={ref}
      style={{
        margin: 0,
        padding: 0,
        border: "2px solid gray",
        width: "10rem"
      }}
    >
      <AccordionProvider>
        <ForItems in={state.collection()}>{item => <AccordionItem item={item()} />}</ForItems>
      </AccordionProvider>
    </div>
  );
}

function App() {
  return (
    <Accordion>
      <Item key="one" title="Section One">
        Content One
      </Item>
      <Item key="two" title="Section Two">
        Content Two
      </Item>
      <Item key="three" title="Section Three">
        Content Three
      </Item>
    </Accordion>
  );
}

Changelog

All notable changes are described in the CHANGELOG.md file.