Fixed #3275 - Improve Skeleton Implementation for Accessibility

primefaces · Nov 17, 2022 · fc4c695 · fc4c695
1 parent 20a055e
commit fc4c695
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/components/skeleton/Skeleton.vue b/src/components/skeleton/Skeleton.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :style="containerStyle" :class="containerClass"></div>
+    <div :style="containerStyle" :class="containerClass" aria-hidden="true"></div>
 </template>
 
 <script>

diff --git a/src/views/skeleton/SkeletonDoc.vue b/src/views/skeleton/SkeletonDoc.vue
@@ -129,6 +129,16 @@ import Skeleton from 'primevue/skeleton';
             </table>
         </div>
 
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            Skeleton uses <i>aria-hidden</i> as "true" so that it gets ignored by screen readers, any valid attribute is passed to the root element so you may customize it further if required. If multiple skeletons are grouped inside a container, you
+            may use <i>aria-busy</i> on the container element as well to indicate the loading process.
+        </p>
+
+        <h6>Keyboard Support</h6>
+        <p>Component does not include any interactive elements.</p>
+
         <h5>Dependencies</h5>
         <p>None.</p>
     </AppDoc>