arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-27 02:10:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(Progress): pass down attrs to <progress> to improve accessibility (#1881)

Browse Source
This commit is contained in:
Neil Richter
2024-06-24 10:57:01 +02:00
committed by GitHub
parent 0a47a2b5f2
commit abd13f1f8f
1 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/runtime/components/elements/Progress.vue
View File

@@ -1,5 +1,5 @@
<template> <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 }"> <slot v-if="indicator || $slots.indicator" name="indicator" v-bind="{ percent }">
<div v-if="!isSteps" :class="indicatorContainerClass" :style="{ width: `${percent}%` }"> <div v-if="!isSteps" :class="indicatorContainerClass" :style="{ width: `${percent}%` }">
<div :class="indicatorClass"> <div :class="indicatorClass">
@@ -8,7 +8,12 @@
</div> </div>
</slot> </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 }} {{ percent !== undefined ? `${Math.round(percent)}%` : undefined }}
</progress> </progress>