Adjust element sequence for improved screen reader announcement

microsoft · Mar 7, 2024 · b0100e9 · b0100e9
1 parent bf483ac
commit b0100e9
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 2 deletions.
diff --git a/change/@microsoft-fast-foundation-422cca6d-1c45-47a9-aa69-517df2d15393.json b/change/@microsoft-fast-foundation-422cca6d-1c45-47a9-aa69-517df2d15393.json
@@ -1,6 +1,6 @@
 {
   "type": "prerelease",
-  "comment": "Foundation: Update Accordion template element naming",
+  "comment": "Foundation: Update Accordion template element naming (https://github.com/microsoft/fast/pull/6796)",
   "packageName": "@microsoft/fast-foundation",
   "email": "[email protected]",
   "dependentChangeType": "prerelease"

diff --git a/packages/web-components/fast-foundation/src/accordion-item/accordion-item.template.ts b/packages/web-components/fast-foundation/src/accordion-item/accordion-item.template.ts
@@ -17,7 +17,6 @@ export function accordionItemTemplate<T extends FASTAccordionItem>(
             role="heading"
             aria-level="${x => x.headinglevel}"
         >
-            ${startSlotTemplate(options)}
             <button
                 class="button"
                 part="button"
@@ -32,6 +31,10 @@ export function accordionItemTemplate<T extends FASTAccordionItem>(
                     <slot name="heading"></slot>
                 </span>
             </button>
+            ${
+                /* The start slot is after the button for an improved screen reader experience */ ""
+            }
+            ${startSlotTemplate(options)}
             ${endSlotTemplate(options)}
             <span class="expand-collapse-icon" part="expand-collapse-icon" aria-hidden="true">
                 <slot name="expand-collapse-icon">

diff --git a/packages/web-components/fast-foundation/src/accordion/stories/accordion.stories.ts b/packages/web-components/fast-foundation/src/accordion/stories/accordion.stories.ts
@@ -66,6 +66,31 @@ AccordionWithSlottedStartEnd.args = {
     `,
 };
 
+export const AccordionWithSlottedInteractiveStartEnd: Story<FASTAccordion> =
+    renderComponent(storyTemplate).bind({});
+AccordionWithSlottedInteractiveStartEnd.args = {
+    storyContent: html`
+        <fast-accordion-item>
+            <fast-button slot="start">start</fast-button>
+            <span slot="heading">Accordion Item 1 Heading</span>
+            <fast-button slot="end">end</fast-button>
+            Accordion Item 1 Content
+        </fast-accordion-item>
+        <fast-accordion-item>
+            <fast-button slot="start">start</fast-button>
+            <span slot="heading">Accordion Item 2 Heading</span>
+            <fast-button slot="end">end</fast-button>
+            <fast-checkbox>A checkbox as content</fast-checkbox>
+        </fast-accordion-item>
+        <fast-accordion-item disabled>
+            <fast-button slot="start" disabled>start</fast-button>
+            <span slot="heading">Accordion Item 3 Heading</span>
+            <fast-button slot="end" disabled>end</fast-button>
+            Accordion Item 3 Content
+        </fast-accordion-item>
+    `,
+};
+
 export const AccordionWithExpandedChild: Story<FASTAccordion> = renderComponent(
     storyTemplate
 ).bind({});