Adjust element sequence for improved screen reader announcement

microsoft · Sep 24, 2023 · 2173bae · 2173bae
1 parent 87f3443
commit 2173bae
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 1 deletion.
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({});