📝 Accordion: Update docs to explain headerlevels (#3206)

equinor · Jan 5, 2024 · cd3de72 · cd3de72
1 parent 3611a39
commit cd3de72
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 1 deletion.
diff --git a/packages/eds-core-react/src/components/Accordion/Accordion.docs.mdx b/packages/eds-core-react/src/components/Accordion/Accordion.docs.mdx
@@ -59,6 +59,7 @@ import { Accordion } from '@equinor/eds-core-react'
     <code>Accordion.HeaderActions</code> which should be used if there is a need
      for additional action buttons in the header. Raw text will get wrapped 
      in an <code>Accordion.HeaderTitle</code> automatically.</li>
+      <li>For accessibility, please make sure to set the correct `headerLevel` based on the context the Accordion is used in. An accordion under a `h2` paragraph should be set to `h3`and so on. There is no visual difference between Accordion headerlevels.</li>
     <li>The expand/collapse functionality is tied to the entire header.</li>
 </ul>
 

diff --git a/packages/eds-core-react/src/components/Accordion/Accordion.types.ts b/packages/eds-core-react/src/components/Accordion/Accordion.types.ts
@@ -1,5 +1,5 @@
 export type AccordionProps = {
-  /** The header level, i.e. h1, h2, h3 etc. */
+  /** The header level, i.e. h1, h2, h3 etc. Note: This only changes the element type, the style is the same for all headerlevels */
   headerLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
   /** Which side the chevron should be on  */
   chevronPosition?: 'left' | 'right'