Merge pull request #605 from it-at-m/603-progress-bar-for-screenreader-users

✨ progress bar for screenreader users

Author: FabianWilms

src/components/Stepper/MucStepper.vue

@@ -3,16 +3,22 @@
     <div class="container">
       <div class="m-component__grid">
         <div class="m-component__column">
-          <ol class="m-form-steps">
+          <ol
+            class="m-form-steps"
+            role="list"
+            aria-label="Formularfortschritt"
+          >
             <template
-              v-for="item in stepItems"
+              v-for="(item, index) in stepItems"
               :key="item.id"
             >
               <muc-stepper-item
                 :item="item"
                 :is-active="isActive(item.id)"
                 :is-done="isDone(item.id)"
                 :disabled="disabled(item.id)"
+                :position="index + 1"
+                :total="stepItems.length"
                 @click="handleChange"
               />
             </template>

src/components/Stepper/MucStepperItem.vue

@@ -11,16 +11,49 @@
       class="m-form-step__icon"
       :class="{ disabled: disabled }"
       :tabindex="getTabindex"
+      :aria-labelledby="ariaLabelledby"
       :aria-label="getAriaLabel"
+      :aria-setsize="total"
+      :aria-posinset="position"
+      :aria-current="isActive ? 'step' : false"
     >
       <muc-icon :icon="getIcon" />
     </div>
     <div
       class="m-form-step__title"
       :class="{ disabled: disabled }"
     >
-      <span aria-disabled="true"> {{ item.label }}</span>
+      <span
+        :id="labelId"
+        aria-disabled="true"
+      >
+        {{ item.label }}</span
+      >
+
+      <span
+        class="visually-hidden"
+        :id="prefixId"
+      >
+        Schritt {{ position }} von {{ total }}:
+      </span>
+
+      <span
+        v-if="isDone"
+        class="visually-hidden"
+        :id="statusId"
+      >
+        – erledigt
+      </span>
     </div>
+    <span
+      v-if="isActive"
+      class="visually-hidden"
+      role="status"
+      aria-live="polite"
+      aria-atomic="true"
+      :aria-labelledby="ariaLabelledby"
+    >
+    </span>
   </li>
 </template>
 
@@ -30,7 +63,7 @@ import { computed } from "vue";
 import { MucIcon } from "../Icon";
 import { StepperItem } from "./MucStepperTypes";
 
-const { item, isActive, isDone, disabled } = defineProps<{
+const { item, isActive, isDone, disabled, position, total } = defineProps<{
   /**
    * Individual item to display inside the MucStepper component
    */
@@ -50,6 +83,16 @@ const { item, isActive, isDone, disabled } = defineProps<{
    * Disabled stepper
    */
   disabled: boolean;
+
+  /**
+   * position of the item in the step sequence
+   */
+  position: number;
+
+  /**
+   * total number of steps
+   */
+  total: number;
 }>();
 
 const emit = defineEmits<{
@@ -81,6 +124,22 @@ const getAriaLabel = computed(() =>
     : "Zurück zu Schritt: " + item.label
 );
 
+/**
+ * Stable element IDs used to compose the accessible name via aria-labelledby
+ */
+const labelId = computed(() => `m-step-label-${item.id}`);
+const prefixId = computed(() => `m-step-prefix-${item.id}`);
+const statusId = computed(() => `m-step-status-${item.id}`);
+
+/**
+ * Compose the accessible name in order: prefix -> visible label -> optional status
+ */
+const ariaLabelledby = computed(() => {
+  const ids = [prefixId.value, labelId.value];
+  if (isDone) ids.push(statusId.value);
+  return ids.join(" ");
+});
+
 const handleClick = () => {
   if (isDone && !disabled) {
     emit("click", item.id);