Merge pull request #7022 from Sage/FE-6862

fix(tile-select): remove not allowed aria-expanded from accordion
Sage · Oct 18, 2024 · 5820047 · 5820047
2 parents 38f9a42 + f3d0200
commit 5820047
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 1 deletion.
diff --git a/src/components/tile-select/__internal__/accordion/accordion.component.tsx b/src/components/tile-select/__internal__/accordion/accordion.component.tsx
@@ -28,7 +28,6 @@ const Accordion = ({
 
   return (
     <StyledContentContainer
-      aria-expanded={expanded}
       isExpanded={expanded}
       maxHeight={contentHeight}
       data-role="tile-select-accordion-content-container"

diff --git a/src/components/tile-select/tile-select.mdx b/src/components/tile-select/tile-select.mdx
@@ -95,6 +95,9 @@ It is possible to render an `Accordion` footer for the `TileSelect`. Pass a desi
 and a use the `accordionControl` render prop to supply the control for the expanded state of the accordion by toggling the
 `accordionExpanded` prop.
 
+To ensure proper screen reader behaviour, please pass the `aria-controls` and `aria-expanded` props to the control for the 
+Accordion as shown in the example. 
+
 <Canvas of={TileSelectStories.WithAccordionFooter} />
 
 ### With custom spacing

diff --git a/src/components/tile-select/tile-select.stories.tsx b/src/components/tile-select/tile-select.stories.tsx
@@ -515,6 +515,7 @@ export const WithAccordionFooter: Story = () => {
           px={1}
           mt={2}
           aria-controls={contentId}
+          aria-expanded={expanded}
           id={controlId}
         >
           {expanded ? "Close" : "Open"} accordion