|
1 | 1 | # Accordion |
2 | 2 |
|
3 | | -An _accordion_ allows users to collapse and expand sections of content. |
| 3 | +The accordion component helps you organise content by allowing users to expand and collapse sections. This keeps pages tidy and makes information easy to scan. |
4 | 4 |
|
5 | | -## Usage |
| 5 | +## When to Use an Accordion |
6 | 6 |
|
7 | | -Accordions are composed of a header area and a content area. They deliver large amounts of information in user-controlled sections. They can be used to group or hide information which helps to keep order and scannability on a page. |
| 7 | +Accordions are useful for grouping related information and reducing visual clutter. They give users control over which sections they view, making it easier to focus on what matters. However, avoid using accordions for critical information that should always be visible. |
8 | 8 |
|
9 | | -### Simple |
| 9 | +**Consider using an accordion when:** |
10 | 10 |
|
11 | | -### Different types of headers |
| 11 | +- You want to group related information. |
| 12 | +- You need to reduce visual clutter on a page. |
| 13 | +- Users should be able to choose which sections to view. |
12 | 14 |
|
13 | | - |
| 15 | +## Structure |
14 | 16 |
|
15 | | -## Guidelines |
16 | | - |
17 | | -### Header area |
18 | | - |
19 | | -Whether expanded or collapsed, the header height must be 48px. The header area must contain one action indicating that the section expands or collapses and can contain additional actions. The expand/collapse functionality is tied to the entire header. Additional actions are triggered only by interacting directly with that action. |
20 | | - |
21 | | -#### Labels |
22 | | - |
23 | | -Labels should be to the point, short and no more than three words. Note that if the label is longer than the maximum width, it will be truncated and should have a provided. |
24 | | - |
25 | | -### Content area |
| 17 | +An accordion is made up of a header area and a content area. The header is the clickable section that expands or collapses the content. The content area appears when the section is expanded. |
26 | 18 |
|
27 | | -When the accordion is expanded, the minimum height for the content area is 96px. There is no maximum height for the content area. |
| 19 | +## Guidelines |
28 | 20 |
|
29 | | -### Interaction |
| 21 | +**Header area:** |
30 | 22 |
|
31 | | -Multiple sections can be expanded simultaneously. |
| 23 | +- Always 48px in height, whether expanded or collapsed. |
| 24 | +- Must include an action to expand or collapse the section. |
| 25 | +- You may add extra actions if needed. |
| 26 | +- The entire header is clickable for expand/collapse. Additional actions are triggered only by clicking directly on them. |
32 | 27 |
|
| 28 | +**Labels:** |
33 | 29 |
|
| 30 | +- Keep labels short and clear, ideally no more than three words. |
| 31 | +- If a label is too long, it will be truncated. Provide a tooltip or another method to show the full label. |
34 | 32 |
|
35 | | -# Design |
| 33 | +**Content area:** |
36 | 34 |
|
37 | | -When expanded use tab to review current page headings and press enter or space to navigate to the selected section |
| 35 | +- When expanded, the content area should be at least 96px in height. There is no maximum height. |
| 36 | +- Users can expand multiple sections at the same time. |
| 37 | +- When navigating with a keyboard, use the tab key to move through headings and press enter or space to open a section. |
38 | 38 |
|
39 | | -SURFACES |
| 39 | +## Accessibility |
40 | 40 |
|
41 | | -# Accordion |
| 41 | +Make sure all actions are keyboard accessible. Use clear labels and provide tooltips for truncated text. Maintain a logical tab order for easy navigation. |
42 | 42 |
|
43 | | -An _accordion_ allows users to collapse and expand sections of content. |
| 43 | +When an accordion section is expanded, you can use the tab key to move through headings. Press enter or space to open the selected section. This ensures users can efficiently navigate and interact with accordion sections using a keyboard. |
44 | 44 |
|
45 | 45 | ## Implementation in Figma |
46 | 46 |
|
47 | | -### Instructions |
48 | | - |
49 | | -1. In Figma go to the **Assets Panel** and search for **accordion**. |
50 | | - |
51 | | -2. Drag and drop the component in your frame. |
52 | | - |
53 | | -3. Rename and resize the component if needed. |
54 | | - |
55 | | -4. Choose the variant from the **Design Panel**. |
| 47 | +To add an accordion in Figma: |
56 | 48 |
|
| 49 | +1. Open the Assets Panel and search for "accordion". |
| 50 | +2. Drag and drop the component into your frame. |
| 51 | +3. Rename and resize it as needed. |
| 52 | +4. Select the desired variant from the Design Panel. |
| 53 | +<!-- Add link to Figma when the UI-User Interface board is redone--> |
57 | 54 |
|
| 55 | +## Code Example |
58 | 56 |
|
59 | | -# Code |
| 57 | +For implementation details and usage examples, please refer to our [Storybook documentation](https://storybook.eds.equinor.com/?path=/docs/surfaces-accordion--docs). |
60 | 58 |
|
61 | | -When expanded use tab to review current page headings and press enter or space to navigate to the selected section |
62 | | - |
63 | | -SURFACES |
64 | | - |
65 | | -# Accordion |
| 59 | +--- |
66 | 60 |
|
67 | | -An _accordion_ allows users to collapse and expand sections of content. |
| 61 | +If you have questions or need support, please visit our [Support page](../../support/support.md). We are here to help you organise your content and create accessible, user-friendly experiences. |
0 commit comments