Fixed #3276 - Improve Ripple Implementation for Accessibility

primefaces · Nov 17, 2022 · 52d23c0 · 52d23c0
1 parent fc4c695
commit 52d23c0
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/src/components/ripple/Ripple.js b/src/components/ripple/Ripple.js
@@ -15,6 +15,7 @@ function create(el) {
 
     ink.className = 'p-ink';
     ink.setAttribute('role', 'presentation');
+    ink.setAttribute('aria-hidden', 'true');
     el.appendChild(ink);
 
     ink.addEventListener('animationend', onAnimationEnd);

diff --git a/src/views/ripple/RippleDoc.vue b/src/views/ripple/RippleDoc.vue
@@ -77,6 +77,13 @@ directives: {
             </table>
         </div>
 
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>Ripple element has the <i>aria-hidden</i> attribute as true so that it gets ignored by the screen readers.</p>
+
+        <h6>Keyboard Support</h6>
+        <p>Component does not include any interactive elements.</p>
+
         <h5>Dependencies</h5>
         <p>None.</p>
     </AppDoc>