fix(Progress): pass down attrs to <progress> to improve accessibili…

…ty (#1881)
nuxt · Jun 24, 2024 · abd13f1 · abd13f1
1 parent 0a47a2b
commit abd13f1
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/src/runtime/components/elements/Progress.vue b/src/runtime/components/elements/Progress.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="ui.wrapper" v-bind="attrs">
+  <div :class="ui.wrapper" role="progressbar">
     <slot v-if="indicator || $slots.indicator" name="indicator" v-bind="{ percent }">
       <div v-if="!isSteps" :class="indicatorContainerClass" :style="{ width: `${percent}%` }">
         <div :class="indicatorClass">
@@ -8,7 +8,12 @@
       </div>
     </slot>
 
-    <progress :class="progressClass" v-bind="{ value, max: realMax }">
+    <progress
+      :aria-valuemax="realMax"
+      :aria-valuenow="value"
+      :class="progressClass"
+      v-bind="{ value, max: realMax, ...attrs }"
+    >
       {{ percent !== undefined ? `${Math.round(percent)}%` : undefined }}
     </progress>