docs(collapsible): added a11y section in collapsible doc

adevinta · Jun 7, 2024 · caec9de · caec9de
1 parent b196c08
commit caec9de
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git a/packages/components/collapsible/package.json b/packages/components/collapsible/package.json
@@ -14,7 +14,8 @@
     "wai-aria",
     "aria",
     "a11y",
-    "collapsible"
+    "collapsible",
+    "disclosure"
   ],
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

diff --git a/packages/components/collapsible/src/Collapsible.doc.mdx b/packages/components/collapsible/src/Collapsible.doc.mdx
@@ -1,5 +1,6 @@
 import { Meta, Canvas } from '@storybook/addon-docs'
 import { ArgTypes } from '@storybook/blocks'
+import { Kbd } from '@spark-ui/kbd'
 
 import { Collapsible } from '.'
 
@@ -38,3 +39,18 @@ A `Collapsible` is closed by default. Interacting with its trigger will open the
 ### Animation
 
 TODO
+
+## Accessibility
+
+Adheres to the [Disclosure (Show/Hide) Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/).
+
+### Keyboard Interactions
+
+- <Kbd>Enter</Kbd> - activates the disclosure control and toggles the visibility of the disclosure content.
+- <Kbd>Space</Kbd> - activates the disclosure control and toggles the visibility of the disclosure content.
+
+### WAI-ARIA Roles, States, and Properties
+
+- The element that shows and hides the content has role [button](https://w3c.github.io/aria/#button).
+- When the content is visible, the element with role button has [aria-expanded](https://w3c.github.io/aria/#aria-expanded) set to `true`. When the content area is hidden, it is set to `false`.
+- Optionally, the element with role button has a value specified for [aria-controls](https://w3c.github.io/aria/#aria-controls) that refers to the element that contains all the content that is shown or hidden.
diff --git a/packages/components/collapsible/src/Collapsible.stories.tsx b/packages/components/collapsible/src/Collapsible.stories.tsx
@@ -15,9 +15,7 @@ const meta: Meta<typeof Collapsible> = {
 export default meta
 
 const CartItem = ({ children }: PropsWithChildren) => {
-  return (
-    <div className="rounded-md bg-neutral-container p-lg text-on-neutral-container">{children}</div>
-  )
+  return <div className="rounded-md bg-main-container p-lg text-on-main-container">{children}</div>
 }
 
 export const Default: StoryFn = () => {