@pnx-mixtape/mxds 0.1.0-rc.1 → 0.1.0-rc.3

package/src/Component/ProgressIndicator/progress-indicator.css

@@ -0,0 +1,59 @@
+/**
+ * ProgressIndicator
+ */
+
+@layer design-system.components {
+  .mx-progress-indicator {
+    /* @public --gap */
+    display: grid;
+    gap: var(--gap, var(--spacing-xs));
+  }
+
+  .mx-progress-indicator__count {
+    margin: 0;
+    font-size: var(--font-size-s);
+    font-weight: var(--font-weight-bold);
+    color: var(--colour-foreground-alt);
+  }
+
+  .mx-progress-indicator__track {
+    /* @public --track-gap --marker-size --marker-colour --marker-colour-complete --marker-colour-active */
+    display: flex;
+    gap: var(--track-gap, var(--spacing-xxxs));
+  }
+
+  .mx-progress-indicator__marker {
+    flex: 1;
+    block-size: var(--marker-size, var(--spacing-xxxs));
+    border-radius: var(--border-radius);
+    background-color: var(--marker-colour, var(--colour-border));
+  }
+
+  .mx-progress-indicator__marker--done {
+    background-color: var(--marker-colour-complete, var(--colour-primary));
+  }
+
+  .mx-progress-indicator__marker--now {
+    background-color: var(--marker-colour-active, var(--colour-primary));
+  }
+
+  .mx-progress-indicator__steps {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-xxxs) var(--spacing-m);
+    margin: 0;
+    padding-inline-start: 0;
+    list-style: none;
+    font-size: var(--font-size-xs);
+    color: var(--colour-foreground-alt);
+  }
+
+  .mx-progress-indicator__step[aria-current="step"] {
+    color: var(--marker-colour-active, var(--colour-primary));
+    font-weight: var(--font-weight-bold);
+  }
+
+  .mx-progress-indicator__step--done::before {
+    content: "✓ ";
+  }
+}

package/src/Component/ProgressIndicator/progress-indicator.twig

@@ -0,0 +1,22 @@
+{% set attributes = (attributes ?? create_attribute()).addClass('mx-progress-indicator') %}
+{% set total = steps|length %}
+
+<div{{ attributes }}>
+  <p class="mx-progress-indicator__count">Step {{ current }} of {{ total }} — {{ steps[current - 1] }}</p>
+  <div class="mx-progress-indicator__track" aria-hidden="true">
+    {% for step in steps %}
+      {% set markerClass = 'mx-progress-indicator__marker' %}
+      {% if loop.index < current %}
+        {% set markerClass = markerClass ~ ' mx-progress-indicator__marker--done' %}
+      {% elseif loop.index == current %}
+        {% set markerClass = markerClass ~ ' mx-progress-indicator__marker--now' %}
+      {% endif %}
+      <i class="{{ markerClass }}"></i>
+    {% endfor %}
+  </div>
+  <ol class="mx-progress-indicator__steps">
+    {% for step in steps %}
+      <li class="mx-progress-indicator__step{% if loop.index < current %} mx-progress-indicator__step--done{% endif %}"{% if loop.index == current %} aria-current="step"{% endif %}>{{ step }}</li>
+    {% endfor %}
+  </ol>
+</div>

package/src/Component/SideNavigation/__snapshots__/SideNavigation.stories.ts.snap

@@ -8,8 +8,7 @@ exports[`Side Navigation 1`] = `
     
 <a href="#">
   
-  <span>About</span>
-    
+  About  
 </a>
 
   </div>

package/src/Component/SocialLinks/__snapshots__/SocialLinks.stories.ts.snap

@@ -5,28 +5,25 @@ exports[`Social Links 1`] = `
                     
 <h2 class="mx-heading--m">Follow us</h2>
 
-  
-<a href="#">
+        
+<a href="#" aria-label="Facebook">
   
 <span class="mx-icon mx-icon--facebook mx-icon--size-md"></span>
 
-  <span class="sr-only">Facebook</span>
     
 </a>
-
-<a href="#">
+      
+<a href="#" aria-label="Instagram">
   
 <span class="mx-icon mx-icon--instagram mx-icon--size-md"></span>
 
-  <span class="sr-only">Instagram</span>
     
 </a>
-
-<a href="#">
+      
+<a href="#" aria-label="LinkedIn">
   
 <span class="mx-icon mx-icon--linkedin mx-icon--size-md"></span>
 
-  <span class="sr-only">LinkedIn</span>
     
 </a>
 

package/src/Component/Steps/Steps.stories.ts

@@ -31,7 +31,7 @@ const meta: Meta<StepsType> = {
   },
   argTypes: {
     modifiers: {
-      description: "Change the colour of the line and marker.",
+      description: "Change the colour of the line and marker (only one applies).",
       options: Object.values(StepsModifier),
       control: "check",
       type: "string",

package/src/Component/Steps/steps.css

@@ -2,6 +2,8 @@
  * Steps
  */
 
+@import "../../Utility/_mixins.css";
+
 @layer design-system.components {
   .mx-steps {
     counter-reset: step;
@@ -73,6 +75,8 @@
       inset-inline-start: calc((var(--counter-size, 2rem) / 2) + (var(--line-width, 2px)));
       inset-block: 0;
       position: absolute;
+
+      @add-mixin forced-colors-paint;
     }
   }
 
@@ -89,6 +93,15 @@
   .mx-steps--fill:where(:not(:has(.mx-steps--fill))) {
     --background: var(--line-colour, var(--colour-border));
     --foreground: var(--counter-foreground, var(--colour-foreground));
+
+    @media (--forced-colors) {
+      &.mx-steps__panel::before,
+      & .mx-steps__panel::before {
+        forced-color-adjust: none;
+        background-color: CanvasText;
+        border-color: CanvasText;
+      }
+    }
   }
 
   .mx-steps--counters {

package/src/Component/Sticky/Elements/Sticky.ts

@@ -25,7 +25,7 @@ export default class Sticky extends HTMLElement {
   }
 
   connectedCallback(): void {
-    this.offsetPropName = this.getAttribute("offsetpropname")
+    this.offsetPropName = this.getAttribute("offsetpropname") || "--sticky-offset"
     const options: IOOptions = {
       root: this.root,
       rootMargin: this.rootMargin,

package/src/Component/Sticky/sticky.css

@@ -16,18 +16,18 @@
 
 @layer design-system.components {
   .mx-sticky {
-    @mixin sticky;
+    @add-mixin sticky;
   }
 
   .mx-sticky--m {
     @media (--medium-up) {
-      @mixin sticky;
+      @add-mixin sticky;
     }
   }
 
   .mx-sticky--l {
     @media (--large-up) {
-      @mixin sticky;
+      @add-mixin sticky;
     }
   }
 

package/src/Component/Tabs/Elements/Tabs.ts

@@ -227,14 +227,16 @@ export default class Tabs extends HTMLElement {
   }
 
   set active(id: string) {
-    this.tabs.forEach(({ tab, panel }: TabsType, key: string): void => {
+    this.tabs.forEach(({ tab, button, panel }: TabsType, key: string): void => {
       if (key === id) {
         tab.setAttribute("aria-selected", "true")
+        button.setAttribute("aria-selected", "true")
         tab.setAttribute("tabindex", "0")
         panel.removeAttribute("inert")
         this.dropMenuTrigger.textContent = tab.textContent
       } else {
         tab.setAttribute("aria-selected", "false")
+        button.setAttribute("aria-selected", "false")
         tab.setAttribute("tabindex", "-1")
         panel.setAttribute("inert", "")
       }

package/src/Component/Tabs/Tabs.stories.ts

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from "@storybook/html-vite"
-import { expect } from "storybook/test"
+import { expect, waitFor } from "storybook/test"
 import Component from "./tabs.twig"
 import TabItem from "./tab-item.twig"
 import { HeadingTypes, Tabs as TabsType } from "@pnx-mixtape/ids-shape"
@@ -12,6 +12,7 @@ import "../Popover/popover.css"
 import "../DropMenu/drop-menu.css"
 import Heading from "../../Atom/Heading/heading.twig"
 import { modes } from "../../../.storybook/modes"
+import { runScreenReaderWalkthrough } from "../../../tools/test-utils/screen-reader"
 
 /**
  * A Tabs component built from a list of TabItems.
@@ -98,51 +99,106 @@ type Story = StoryObj<TabsType>
 
 export const Tabs: Story = {
   play: async ({ canvas, canvasElement, userEvent, step }) => {
-    const tab1 = canvas.getByRole("tab", { name: "Funk" })
-    const tab2 = canvas.getByRole("tab", { name: "Soul" })
-    const tab3 = canvas.getByRole("tab", { name: "Motown" })
+    const isMobile = matchMedia("(max-width: 767px)").matches
+    const [button1, tab1] = canvas.getAllByRole("tab", { name: "Funk", hidden: true })
+    const [button2, tab2] = canvas.getAllByRole("tab", { name: "Soul", hidden: true })
+    const [button3, tab3] = canvas.getAllByRole("tab", { name: "Motown", hidden: true })
     const panel = (id: string): HTMLElement => canvasElement.querySelector(`#${id}`) as HTMLElement
 
     await step("Funk starts selected", async () => {
-      await expect(tab1).toHaveAttribute("aria-selected", "true")
+      if (isMobile) {
+        await expect(button1).toHaveAttribute("aria-selected", "true")
+      } else {
+        await expect(tab1).toHaveAttribute("aria-selected", "true")
+      }
       await expect(panel("tab-1")).not.toHaveAttribute("inert")
       await expect(panel("tab-2")).toHaveAttribute("inert")
     })
 
     await step("Click selects a tab and moves focus to its panel", async () => {
-      await userEvent.click(tab2)
-      await expect(tab2).toHaveAttribute("aria-selected", "true")
-      await expect(tab1).toHaveAttribute("aria-selected", "false")
+      if (isMobile) {
+        await userEvent.click(button2)
+        await waitFor(() => expect(button2).toHaveAttribute("aria-selected", "true"))
+        await expect(button1).toHaveAttribute("aria-selected", "false")
+      } else {
+        await userEvent.click(tab2)
+        await waitFor(() => expect(tab2).toHaveAttribute("aria-selected", "true"))
+        await expect(tab1).toHaveAttribute("aria-selected", "false")
+      }
       await expect(panel("tab-2")).not.toHaveAttribute("inert")
       await expect(panel("tab-1")).toHaveAttribute("inert")
       await expect(panel("tab-2")).toHaveFocus()
     })
 
     await step("ArrowRight/ArrowLeft move focus, with wraparound", async () => {
-      tab2.focus()
-      await userEvent.keyboard("{ArrowRight}")
-      await expect(tab3).toHaveFocus()
-      await userEvent.keyboard("{ArrowRight}")
-      await expect(tab1).toHaveFocus()
-      await userEvent.keyboard("{ArrowLeft}")
-      await expect(tab3).toHaveFocus()
+      if (isMobile) {
+        button2.focus()
+        await userEvent.keyboard("{ArrowRight}")
+        await expect(button3).toHaveFocus()
+        await userEvent.keyboard("{ArrowRight}")
+        await expect(button1).toHaveFocus()
+        await userEvent.keyboard("{ArrowLeft}")
+        await expect(button3).toHaveFocus()
+      } else {
+        tab2.focus()
+        await userEvent.keyboard("{ArrowRight}")
+        await expect(tab3).toHaveFocus()
+        await userEvent.keyboard("{ArrowRight}")
+        await expect(tab1).toHaveFocus()
+        await userEvent.keyboard("{ArrowLeft}")
+        await expect(tab3).toHaveFocus()
+      }
     })
 
     await step("Home/End jump to first/last tab", async () => {
-      await userEvent.keyboard("{Home}")
-      await expect(tab1).toHaveFocus()
-      await userEvent.keyboard("{End}")
-      await expect(tab3).toHaveFocus()
+      if (isMobile) {
+        await userEvent.keyboard("{Home}")
+        await expect(button1).toHaveFocus()
+        await userEvent.keyboard("{End}")
+        await expect(button3).toHaveFocus()
+      } else {
+        await userEvent.keyboard("{Home}")
+        await expect(tab1).toHaveFocus()
+        await userEvent.keyboard("{End}")
+        await expect(tab3).toHaveFocus()
+      }
     })
 
     await step("Reset: reselect Funk and clear the ?tab= param", async () => {
-      await userEvent.click(tab1)
-      await expect(tab1).toHaveAttribute("aria-selected", "true")
+      if (isMobile) {
+        await userEvent.click(button1)
+        await expect(button1).toHaveAttribute("aria-selected", "true")
+      } else {
+        await userEvent.click(tab1)
+        await expect(tab1).toHaveAttribute("aria-selected", "true")
+      }
       window.history.replaceState({}, "", window.location.pathname)
+      await userEvent.click(canvasElement)
     })
   },
 }
 
+/**
+ * Steps a virtual screen reader through the tab list and asserts on what it announces.
+ */
+export const ScreenReaderAnnouncements: Story = {
+  play: async () => {
+    const log = await runScreenReaderWalkthrough()
+    await expect(log).toEqual([
+      "document",
+      "tablist, orientated horizontally",
+      "tab, Funk, selected, 1 control, position 1, set size 3",
+      "tab, Soul, not selected, 1 control, position 2, set size 3",
+      "tab, Motown, not selected, 1 control, position 3, set size 3",
+      "end of tablist, orientated horizontally",
+      "tabpanel, Funk",
+      "Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.",
+      "end of tabpanel, Funk",
+      "end of document",
+    ])
+  },
+}
+
 /**
  * Can have a heading above the tabs for extra context.
  */

package/src/Component/Tabs/Tabs.stories.tsx

@@ -11,6 +11,7 @@ import "./tabs.css"
 import "../DropMenu/drop-menu.css"
 import { TabStyles } from "../../enums"
 import { Page } from "../../../.storybook-react/decorators"
+import { runScreenReaderWalkthrough } from "../../../tools/test-utils/screen-reader"
 
 const defaultChildren = (
   <Fragment>
@@ -114,3 +115,26 @@ export const Default: StoryObj<typeof meta> = {
     })
   },
 }
+
+/**
+ * Steps a virtual screen reader through the tab list and asserts on what it announces.
+ */
+export const ScreenReaderAnnouncements: StoryObj<typeof meta> = {
+  play: async () => {
+    const log = await runScreenReaderWalkthrough()
+    await expect(log).toEqual([
+      "document",
+      "tablist, orientated horizontally",
+      "tab, Tab 1, selected, 1 control, position 1, set size 3",
+      "tab, Tab 2, not selected, 1 control, position 2, set size 3",
+      "tab, Tab 3, not selected, 1 control, position 3, set size 3",
+      "end of tablist, orientated horizontally",
+      "tabpanel, Tab 1",
+      "paragraph",
+      "This is tab 1",
+      "end of paragraph",
+      "end of tabpanel, Tab 1",
+      "end of document",
+    ])
+  },
+}

package/src/Component/Tabs/Tabs.tsx

@@ -8,7 +8,6 @@ import React, {
   createContext,
   use,
   useState,
-  useEffect,
   useMemo,
   useId,
   useRef,
@@ -17,6 +16,7 @@ import React, {
 } from "react"
 import classNames from "classnames"
 import DropMenuProvider from "../DropMenu/Components/DropMenuContext"
+import useIsomorphicLayoutEffect from "../../Utility/Hooks/useIsomorphicLayoutEffect"
 import { TabStyles } from "../../enums"
 
 type TabContextValues = {
@@ -54,7 +54,7 @@ const Tabs = ({ children, active, modifier, id }: TabsProps): JSX.Element => {
     window.history.replaceState({}, "", `${window.location.pathname}?${urlParams.toString()}`)
   }
 
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (typeof window === "undefined") return
     const tabParam = new URLSearchParams(window.location.search).get("tab")
     if (tabParam && tabParam !== activeTab) {

package/src/Component/Tabs/__snapshots__/Tabs.stories.ts.snap

@@ -1,9 +1,27 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`Screen Reader Announcements 1`] = `
+"
+
+<mx-tabs class="mx-tabs mx-tabs--lined" id="tab-example"><mx-dropmenu closeonclick="true"><button id="unique-3" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="tab-example" style="anchor-name: --tab-example" hidden="">Funk</button><div class="mx-popover mx-drop-menu" id="tab-example" aria-describedby="unique-0" style="position-anchor: --tab-example" data-placement="bottom-start" popover="" role="tablist"><button type="button" role="tab" aria-controls="unique-1" aria-selected="true">Funk</button><button type="button" role="tab" aria-controls="unique-2" aria-selected="false">Soul</button><button type="button" role="tab" aria-controls="unique-3" aria-selected="false">Motown</button></div></mx-dropmenu><div class="mx-tabs__list" role="tablist"><button type="button" role="tab" aria-controls="unique-4" aria-selected="true" tabindex="0">Funk</button><button type="button" role="tab" aria-controls="unique-5" aria-selected="false" tabindex="-1">Soul</button><button type="button" role="tab" aria-controls="unique-6" aria-selected="false" tabindex="-1">Motown</button></div>
+  <div class="mx-tabs__panel mx-vertical-flow mx-container" id="unique-0" data-tab="Funk" role="tabpanel" tabindex="-1" aria-label="Funk">
+  Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
+</div>
+<div class="mx-tabs__panel mx-vertical-flow mx-container" id="unique-1" data-tab="Soul" role="tabpanel" tabindex="-1" aria-label="Soul" inert="">
+  Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.
+</div>
+<div class="mx-tabs__panel mx-vertical-flow mx-container" id="unique-2" data-tab="Motown" role="tabpanel" tabindex="-1" aria-label="Motown" inert="">
+  Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
+</div>
+
+</mx-tabs>
+"
+`;
+
 exports[`Tabs 1`] = `
 "
 
-<mx-tabs class="mx-tabs mx-tabs--lined" id="tab-example"><mx-dropmenu closeonclick="true"><button id="unique-3" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="tab-example" style="anchor-name: --tab-example" hidden="">Funk</button><div class="mx-popover mx-drop-menu" id="tab-example" aria-describedby="unique-0" style="position-anchor: --tab-example" data-placement="bottom-start" popover="" role="tablist"><button type="button" role="tab" aria-controls="unique-1" aria-selected="false">Funk</button><button type="button" role="tab" aria-controls="unique-2" aria-selected="false">Soul</button><button type="button" role="tab" aria-controls="unique-3" aria-selected="false">Motown</button></div></mx-dropmenu><div class="mx-tabs__list" role="tablist"><button type="button" role="tab" aria-controls="unique-4" aria-selected="true" tabindex="0">Funk</button><button type="button" role="tab" aria-controls="unique-5" aria-selected="false" tabindex="-1">Soul</button><button type="button" role="tab" aria-controls="unique-6" aria-selected="false" tabindex="-1">Motown</button></div>
+<mx-tabs class="mx-tabs mx-tabs--lined" id="tab-example"><mx-dropmenu closeonclick="true"><button id="unique-3" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="tab-example" style="anchor-name: --tab-example" hidden="">Funk</button><div class="mx-popover mx-drop-menu" id="tab-example" aria-describedby="unique-0" style="position-anchor: --tab-example" data-placement="bottom-start" popover="" role="tablist"><button type="button" role="tab" aria-controls="unique-1" aria-selected="true">Funk</button><button type="button" role="tab" aria-controls="unique-2" aria-selected="false">Soul</button><button type="button" role="tab" aria-controls="unique-3" aria-selected="false">Motown</button></div></mx-dropmenu><div class="mx-tabs__list" role="tablist"><button type="button" role="tab" aria-controls="unique-4" aria-selected="true" tabindex="0">Funk</button><button type="button" role="tab" aria-controls="unique-5" aria-selected="false" tabindex="-1">Soul</button><button type="button" role="tab" aria-controls="unique-6" aria-selected="false" tabindex="-1">Motown</button></div>
   <div class="mx-tabs__panel mx-vertical-flow mx-container" id="unique-0" data-tab="Funk" role="tabpanel" tabindex="-1" aria-label="Funk">
   Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
 </div>
@@ -23,7 +41,7 @@ exports[`With Heading 1`] = `
 
 <h2>Tabs heading</h2>
 
-<mx-tabs class="mx-tabs mx-tabs--lined" id="tab-example"><mx-dropmenu closeonclick="true"><button id="unique-3" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="tab-example" style="anchor-name: --tab-example" hidden="">Funk</button><div class="mx-popover mx-drop-menu" id="tab-example" aria-describedby="unique-0" style="position-anchor: --tab-example" data-placement="bottom-start" popover="" role="tablist"><button type="button" role="tab" aria-controls="unique-1" aria-selected="false">Funk</button><button type="button" role="tab" aria-controls="unique-2" aria-selected="false">Soul</button><button type="button" role="tab" aria-controls="unique-3" aria-selected="false">Motown</button></div></mx-dropmenu><div class="mx-tabs__list" role="tablist"><button type="button" role="tab" aria-controls="unique-4" aria-selected="true" tabindex="0">Funk</button><button type="button" role="tab" aria-controls="unique-5" aria-selected="false" tabindex="-1">Soul</button><button type="button" role="tab" aria-controls="unique-6" aria-selected="false" tabindex="-1">Motown</button></div>
+<mx-tabs class="mx-tabs mx-tabs--lined" id="tab-example"><mx-dropmenu closeonclick="true"><button id="unique-3" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="tab-example" style="anchor-name: --tab-example" hidden="">Funk</button><div class="mx-popover mx-drop-menu" id="tab-example" aria-describedby="unique-0" style="position-anchor: --tab-example" data-placement="bottom-start" popover="" role="tablist"><button type="button" role="tab" aria-controls="unique-1" aria-selected="true">Funk</button><button type="button" role="tab" aria-controls="unique-2" aria-selected="false">Soul</button><button type="button" role="tab" aria-controls="unique-3" aria-selected="false">Motown</button></div></mx-dropmenu><div class="mx-tabs__list" role="tablist"><button type="button" role="tab" aria-controls="unique-4" aria-selected="true" tabindex="0">Funk</button><button type="button" role="tab" aria-controls="unique-5" aria-selected="false" tabindex="-1">Soul</button><button type="button" role="tab" aria-controls="unique-6" aria-selected="false" tabindex="-1">Motown</button></div>
   <div class="mx-tabs__panel mx-vertical-flow mx-container" id="unique-0" data-tab="Funk" role="tabpanel" tabindex="-1" aria-label="Funk">
   Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
 </div>

package/src/Component/Tabs/__snapshots__/Tabs.stories.tsx.snap

@@ -1,3 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Default 1`] = `"<div class="mx-tabs"><div class="mobile-only"><button id="tabs-storybook-target" type="button" class="mx-button mx-icon mx-icon--chevron-down mx-icon--end mx-popover__trigger" popovertarget="tabs-storybook" style="anchor-name: --drop-menu-tabs-storybook;">Tab 1</button><div id="tabs-storybook" class="mx-popover mx-drop-menu" popover="" aria-labelledby="tabs-storybook-target" aria-describedby="tabs-storybook-description" role="tablist" style="position-anchor: --drop-menu-tabs-storybook;"><div id="tabs-storybook-description" class="sr-only">Results will update when you make a selection. Press escape to close.</div><span data-focus-scope-start="true" hidden=""></span><button type="button" data-id="tab-1" aria-checked="true" role="tab" aria-controls="tab-1" aria-selected="true">Tab 1</button><button type="button" data-id="tab-2" aria-checked="false" role="tab" aria-controls="tab-2" aria-selected="false">Tab 2</button><button type="button" data-id="tab-3" aria-checked="false" role="tab" aria-controls="tab-3" aria-selected="false">Tab 3</button><span data-focus-scope-end="true" hidden=""></span></div></div><div class="mx-tabs__list desktop-only" role="tablist"><span data-focus-scope-start="true" hidden=""></span><button id="tab-1-button" aria-controls="tab-1" role="tab" aria-selected="true" tabindex="0" type="button">Tab 1</button><button id="tab-2-button" aria-controls="tab-2" role="tab" aria-selected="false" tabindex="-1" type="button">Tab 2</button><button id="tab-3-button" aria-controls="tab-3" role="tab" aria-selected="false" tabindex="-1" type="button">Tab 3</button><span data-focus-scope-end="true" hidden=""></span></div><div id="tab-1" class="mx-tabs__panel mx-vertical-flow mx-section--l" aria-labelledby="tab-1-button" role="tabpanel" tabindex="0"><p>This is tab 1</p></div><div id="tab-2" class="mx-tabs__panel mx-vertical-flow mx-section--l" aria-labelledby="tab-2-button" role="tabpanel" tabindex="0" inert=""><p>This is tab 2</p></div><div id="tab-3" class="mx-tabs__panel mx-vertical-flow mx-section--l" inert="" aria-labelledby="tab-3-button" role="tabpanel" tabindex="0"><p>This is tab 3</p></div></div>"`;
+exports[`Default 1`] = `"<div class="mx-tabs"><div class="mobile-only"><button id="tabs-storybook-target" type="button" class="mx-button mx-icon mx-icon--chevron-down mx-icon--end mx-popover__trigger" popovertarget="tabs-storybook" style="anchor-name: --drop-menu-tabs-storybook;">Tab 1</button><div id="tabs-storybook" class="mx-popover mx-drop-menu" popover="" aria-labelledby="tabs-storybook-target" aria-describedby="tabs-storybook-description" role="tablist" style="position-anchor: --drop-menu-tabs-storybook;"><div id="tabs-storybook-description" class="sr-only" aria-hidden="true">Results will update when you make a selection. Press escape to close.</div><span data-focus-scope-start="true" hidden=""></span><button type="button" data-id="tab-1" aria-checked="true" role="tab" aria-controls="tab-1" aria-selected="true">Tab 1</button><button type="button" data-id="tab-2" aria-checked="false" role="tab" aria-controls="tab-2" aria-selected="false">Tab 2</button><button type="button" data-id="tab-3" aria-checked="false" role="tab" aria-controls="tab-3" aria-selected="false">Tab 3</button><span data-focus-scope-end="true" hidden=""></span></div></div><div class="mx-tabs__list desktop-only" role="tablist"><span data-focus-scope-start="true" hidden=""></span><button id="tab-1-button" aria-controls="tab-1" role="tab" aria-selected="true" tabindex="0" type="button">Tab 1</button><button id="tab-2-button" aria-controls="tab-2" role="tab" aria-selected="false" tabindex="-1" type="button">Tab 2</button><button id="tab-3-button" aria-controls="tab-3" role="tab" aria-selected="false" tabindex="-1" type="button">Tab 3</button><span data-focus-scope-end="true" hidden=""></span></div><div id="tab-1" class="mx-tabs__panel mx-vertical-flow mx-section--l" aria-labelledby="tab-1-button" role="tabpanel" tabindex="0"><p>This is tab 1</p></div><div id="tab-2" class="mx-tabs__panel mx-vertical-flow mx-section--l" aria-labelledby="tab-2-button" role="tabpanel" tabindex="0" inert=""><p>This is tab 2</p></div><div id="tab-3" class="mx-tabs__panel mx-vertical-flow mx-section--l" inert="" aria-labelledby="tab-3-button" role="tabpanel" tabindex="0"><p>This is tab 3</p></div></div>"`;
+
+exports[`Screen Reader Announcements 1`] = `"<div class="mx-tabs"><div class="mobile-only"><button id="tabs-storybook-target" type="button" class="mx-button mx-icon mx-icon--chevron-down mx-icon--end mx-popover__trigger" popovertarget="tabs-storybook" style="anchor-name: --drop-menu-tabs-storybook;">Tab 1</button><div id="tabs-storybook" class="mx-popover mx-drop-menu" popover="" aria-labelledby="tabs-storybook-target" aria-describedby="tabs-storybook-description" role="tablist" style="position-anchor: --drop-menu-tabs-storybook;"><div id="tabs-storybook-description" class="sr-only" aria-hidden="true">Results will update when you make a selection. Press escape to close.</div><span data-focus-scope-start="true" hidden=""></span><button type="button" data-id="tab-1" aria-checked="true" role="tab" aria-controls="tab-1" aria-selected="true">Tab 1</button><button type="button" data-id="tab-2" aria-checked="false" role="tab" aria-controls="tab-2" aria-selected="false">Tab 2</button><button type="button" data-id="tab-3" aria-checked="false" role="tab" aria-controls="tab-3" aria-selected="false">Tab 3</button><span data-focus-scope-end="true" hidden=""></span></div></div><div class="mx-tabs__list desktop-only" role="tablist"><span data-focus-scope-start="true" hidden=""></span><button id="tab-1-button" aria-controls="tab-1" role="tab" aria-selected="true" tabindex="0" type="button">Tab 1</button><button id="tab-2-button" aria-controls="tab-2" role="tab" aria-selected="false" tabindex="-1" type="button">Tab 2</button><button id="tab-3-button" aria-controls="tab-3" role="tab" aria-selected="false" tabindex="-1" type="button">Tab 3</button><span data-focus-scope-end="true" hidden=""></span></div><div id="tab-1" class="mx-tabs__panel mx-vertical-flow mx-section--l" aria-labelledby="tab-1-button" role="tabpanel" tabindex="0"><p>This is tab 1</p></div><div id="tab-2" class="mx-tabs__panel mx-vertical-flow mx-section--l" inert="" aria-labelledby="tab-2-button" role="tabpanel" tabindex="0"><p>This is tab 2</p></div><div id="tab-3" class="mx-tabs__panel mx-vertical-flow mx-section--l" inert="" aria-labelledby="tab-3-button" role="tabpanel" tabindex="0"><p>This is tab 3</p></div></div>"`;

package/src/Component/Tabs/tabs.css

@@ -50,6 +50,8 @@
       &[aria-selected="true"] {
         background-color: var(--tab-active-background, var(--colour-background-alt));
         color: var(--tab-active-foreground, var(--colour-foreground));
+        font-weight: var(--font-weight-bold);
+        text-decoration-line: underline;
       }
     }
   }