From 4e9e378cfd5270ed566eea289039f53ed121d9f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bahad=C4=B1r=20Sofuo=C4=9Flu?= <bahadirsofuoglu@gmail.com>
Date: Thu, 17 Nov 2022 13:45:57 +0300
Subject: [PATCH] improve progressBar implementation for accessibility

---
 src/views/progressbar/ProgressBarDoc.vue | 26 ++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/views/progressbar/ProgressBarDoc.vue b/src/views/progressbar/ProgressBarDoc.vue
index aeb7110001..d81c54ed03 100755
--- a/src/views/progressbar/ProgressBarDoc.vue
+++ b/src/views/progressbar/ProgressBarDoc.vue
@@ -112,6 +112,28 @@ data() {
             </table>
         </div>
 
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            ProgressBar components uses <i>progressbar</i> role along with <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Value to describe the component can be defined using <i>aria-labelledby</i> and
+            <i>aria-label</i> props.
+        </p>
+
+        <pre v-code><code><template v-pre>
+&lt;span aria-labelledby="label_status"&gt;
+&lt;/span&gt;
+
+&lt;ProgressBar aria-labelledby="label_status"&gt;
+&lt;/ProgressBar&gt;
+
+&lt;ProgressBar aria-label="Status"&gt;
+&lt;/ProgressBar&gt;
+</template>
+</code></pre>
+
+        <h6>Keyboard Support</h6>
+        <p>Not applicable.</p>
+
         <h5>Dependencies</h5>
         <p>None.</p>
     </AppDoc>
@@ -200,7 +222,7 @@ export default {
         onBeforeUnmount(() => {
             endProgress();
         })
-        
+
         const value1 = ref(0);
         const value2 = ref(50);
         const interval = ref(null);
@@ -248,7 +270,7 @@ export default {
                 onBeforeUnmount(() => {
                     endProgress();
                 })
-                
+
                 const value1 = ref(0);
                 const value2 = ref(50);
                 const interval = ref(null);