@solid-aria/accordion
v0.0.1
Published
Primitives for building accessible accordion component.
Downloads
4,458
Readme
@solid-aria/accordion
Accordion display a list of high-level options that can expand/collapse to reveal more information.
createAccordion
andcreateAccordionItem
- 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.