Merge pull request #3285 from primefaces/issue-3284

improve progressBar implementation for accessibility
primefaces · Nov 17, 2022 · d4b9d13 · d4b9d13
2 parents 61bdff4 + 4e9e378
commit d4b9d13
Showing 1 changed file with 24 additions and 2 deletions.
diff --git 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);