|
| 1 | +import{j as e}from"./jsx-runtime-Cf8x2fCZ.js";import{useMDXComponents as a}from"./index-1Ha5aU2j.js";import{M as i,e as r,P as c,f as d,h as o}from"./index-BNbikkJM.js";import{A as h,E as l,R as m}from"./Accordion.stories-DrW2U0B5.js";import"./index-yBjzXJbu.js";import"./index-C0MU9AHG.js";import"./_commonjsHelpers-CqkleIqs.js";import"./iframe-jaBkKXcC.js";import"./index-fNjTmf9T.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";import"./index.esm-hirjXOjg.js";import"./clsx-B-dksMZM.js";import"./index.esm-DvoLfDtE.js";import"./exampleContent-PGFPgakh.js";import"./getHeadingTag-Dv1eMqvl.js";import"./Icon-CJVFfJZC.js";import"./useKeyboardFocus-nadMEUdd.js";const p=`<!-- @license CC0-1.0 --> |
| 2 | +
|
| 3 | +# Accordion |
| 4 | +
|
| 5 | +The accordion component is a clickable (vertically stacked) list of headings to hide or show associated content. |
| 6 | +With an accordion, you offer content to users progressively. |
| 7 | +
|
| 8 | +## Guidelines |
| 9 | +
|
| 10 | +- Use an accordion on a full page with essential and non-essential content. |
| 11 | +- Hiding non-essential content helps users get to important content more quickly. |
| 12 | +- Avoid using an accordion to avoid too much essential content on 1 page. |
| 13 | +- Rewrite the page more compactly or divide the content over multiple pages instead of using the accordion in the first place. |
| 14 | +- Don’t hide essential information in an accordion. |
| 15 | +- An accordion consists of several accordion sections. |
| 16 | +- Use a minimum of 3 and a maximum of 10 sections underneath each other. |
| 17 | +- It is essential for accordion sections to have clear headings, as the user cannot "scan" the hidden content to find relevant information. |
| 18 | +- Hiding the content has the disadvantage that "search in page" does not yield any hidden content results. |
| 19 | +- If you know the search term the user used to get to the accordion page, you can automatically expand the sections that contain the search term. |
| 20 | +- The accordion’s content may contain formatting (e.g. headings, lists, links and buttons). |
| 21 | +
|
| 22 | +You can navigate an accordion with your keyboard: |
| 23 | +
|
| 24 | +| key | element | |
| 25 | +| :------------- | :-------------------------------------------------------------------------------------------------------------------- | |
| 26 | +| Enter or Space | Open or close the accordion section that has the focus | |
| 27 | +| Tab | Go to the next element that can have focus | |
| 28 | +| Shift + Tab | Go to the next element that can have focus | |
| 29 | +| Down arrow | If an accordion section has focus, go to the next section; if the last section has focus, go to the first section | |
| 30 | +| Up arrow | If an accordion section has focus, go to the previous section; if the first section has focus, go to the last section | |
| 31 | +| Home | If an accordion section has focus: go to the first section | |
| 32 | +| End | If an accordion section has focus, go to the last section | |
| 33 | +
|
| 34 | +## Relevant WCAG requirements |
| 35 | +
|
| 36 | +The WCAG requirements for the Button and Heading components also apply to the accordion header. |
| 37 | +
|
| 38 | +Pay extra attention to these parts: |
| 39 | +
|
| 40 | +- [WCAG requirement 1.3.1](https://www.w3.org/TR/WCAG21/#info-and-relationships): the heading level of the accordion sections depends on where in the page the accordion is placed, this may differ per page. |
| 41 | +- [WCAG requirement 1.3.6](https://www.w3.org/TR/WCAG21/#identify-purpose): use \`aria-controls\` for the button, and use a \`region\` landmark for the expandable region (use the HTML element \`<section>\` for this) |
| 42 | +- [WCAG requirement 1.4.3](https://www.w3.org/TR/WCAG21/#contrast-minimum): contrast between text and background and between icon and background is sufficient in all variants, all interactive statuses and all possible combinations. |
| 43 | +- [WCAG requirement 3.2.1](https://www.w3.org/TR/WCAG21/#on-focus): do not automatically make the accordion expanded when the button gets focus. |
| 44 | +- [WCAG requirement 2.1.3](https://www.w3.org/TR/WCAG21/#keyboard-no-exception): Support the optional keys: \`Down Arrow\`, \`Up Arrow\`, \`Home\` and \`End\`. |
| 45 | +- \`Space\` should activate the button, not scroll the page (use \`keypressEvt.preventDefault()\`). |
| 46 | +- [WCAG requirement 2.4.6](https://www.w3.org/TR/WCAG21/#headings-and-labels): The text used both as a heading and as a label for the button must be clear because the content is not always visible. |
| 47 | +- [WCAG requirement 2.4.10](https://www.w3.org/TR/WCAG21/#section-headings): accordions that are part of the running text must use section headings. |
| 48 | +
|
| 49 | +## References |
| 50 | +
|
| 51 | +- [W3C - Accordion Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) |
| 52 | +`;/*@license CC0-1.0*/function s(t){const n={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",ul:"ul",...a(),...t.components};return e.jsxs(e.Fragment,{children:[` |
| 53 | +`,` |
| 54 | +`,e.jsx(i,{of:h}),` |
| 55 | +`,e.jsx(r,{children:p}),` |
| 56 | +`,e.jsxs(n.p,{children:[`Each accordion section has its unique name. |
| 57 | +Provide this name via the `,e.jsx(n.code,{children:"label"})," property of the ",e.jsx(n.code,{children:"Accordion.Section"})," component."]}),` |
| 58 | +`,e.jsx(c,{}),` |
| 59 | +`,e.jsx(d,{}),` |
| 60 | +`,e.jsx(n.h2,{id:"examples",children:"Examples"}),` |
| 61 | +`,e.jsx(n.h3,{id:"expanded-by-default",children:"Expanded by default"}),` |
| 62 | +`,e.jsxs(n.p,{children:["If you want the contents of an accordion section to appear initially, pass the ",e.jsx(n.code,{children:"expanded"})," property to the ",e.jsx(n.code,{children:"Accordion.Section"})," component."]}),` |
| 63 | +`,e.jsx(o,{of:l}),` |
| 64 | +`,e.jsx(n.h3,{id:"limit-the-amount-of-accessibility-landmarks",children:"Limit the amount of accessibility landmarks"}),` |
| 65 | +`,e.jsxs(n.p,{children:["An Accordion Section renders a ",e.jsx(n.code,{children:"section"}),` element in HTML by default. |
| 66 | +Each of them introduces a landmark region, but having many of them on a page can confuse screen reader users. |
| 67 | +Let Accordions with 6 Sections or more render generic `,e.jsx(n.code,{children:"div"})," elements through ",e.jsx(n.code,{children:'sectionAs="div"'}),"."]}),` |
| 68 | +`,e.jsx(o,{of:m}),` |
| 69 | +`,e.jsx(n.h3,{id:"technical-considerations",children:"Technical considerations"}),` |
| 70 | +`,e.jsxs(n.h3,{id:"the-accordion-parent-component",children:["The ",e.jsx(n.code,{children:"Accordion"})," parent component"]}),` |
| 71 | +`,e.jsx(n.p,{children:"The parent component is used for several reasons:"}),` |
| 72 | +`,e.jsxs(n.ul,{children:[` |
| 73 | +`,e.jsx(n.li,{children:"It sets the spacing between Accordion Sections."}),` |
| 74 | +`,e.jsx(n.li,{children:"It allows you to set the same heading level for all Accordion Sections."}),` |
| 75 | +`,e.jsx(n.li,{children:"It allows you to set the same HTML element for all Accordion Sections."}),` |
| 76 | +`,e.jsx(n.li,{children:"It adds the extra keyboard navigation described in the guidelines."}),` |
| 77 | +`]}),` |
| 78 | +`,e.jsxs(n.h3,{id:"the-html-details-element",children:["The HTML ",e.jsx(n.code,{children:"details"})," element"]}),` |
| 79 | +`,e.jsxs(n.p,{children:["Currently (28-6-2023), the ",e.jsx(n.code,{children:"details"}),` element has some accessibility problems. |
| 80 | +`,e.jsx(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary#summaries_as_headings",rel:"nofollow",children:"For example, a heading in a summary is not adequately understood by screen readers"}),` and |
| 81 | +NVDA does not read Chrome and Edge’s collapsed and expanded status correctly. |
| 82 | +That’s why we chose not to use this native element. |
| 83 | +If these problems are solved, we could do this.`]})]})}function M(t={}){const{wrapper:n}={...a(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(s,{...t})}):s(t)}export{M as default}; |
0 commit comments