feat: DAYL-102 Update Expand-Collapse A11y Docn (#5328)

* Improve the Accessibility section of the expand-collapse readme * Improve button explanation and add info about retaining focus and being adjacent to the content * Apply Margaree's suggestions Co-authored-by: Margaree Peacocke <[email protected]> --------- Co-authored-by: Margaree Peacocke <[email protected]>
BrightspaceUI · Jan 21, 2025 · b067221 · b067221
1 parent 615ec3a
commit b067221
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/components/expand-collapse/README.md b/components/expand-collapse/README.md
@@ -36,7 +36,13 @@ The `d2l-expand-collapse-content` element can be used to create expandable and c
 - `d2l-expand-collapse-content-collapse`: dispatched when the content starts to collapse. The `detail` contains a `collapseComplete` promise that can be waited on to determine when the content has finished collapsing.
 <!-- docs: end hidden content -->
 
-### Accessibility Properties
+## Accessibility
 
-To make your usage of `d2l-expand-collapse-content` accessible, the [`aria-expanded` attribute](https://www.w3.org/TR/wai-aria/#aria-expanded) should be added to the element that controls expanding and collapsing the content with `"true"` or `"false"` to indicate that the content is expanded or collapsed.
+To make your usage of `d2l-expand-collapse-content` accessible, it should follow the [W3C Disclosure (Show/Hide) Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/).
+
+To achieve this, the control that toggles the expanded state should:
+ - Use the [`d2l-button`](../button) or use an element with the [`button`](https://w3c.github.io/aria/#button) role
+ - Toggle between states when using the `Enter` and `Space` buttons and retain focus upon toggle
+ - Have the [`aria-expanded`](https://www.w3.org/TR/wai-aria/#aria-expanded) attribute set to `'true'` or `'false'` depending on expansion state so that screen reader users will know what state it's in
+ - Be adjacent to the expanded/collapsed content