Merge pull request #6052 from qburst/master

Fix #6046, Password: (accessiblility) cannot access toggle button using keyboard
primefaces · Mar 18, 2024 · ea7448d · ea7448d
2 parents 4f85545 + f30d401
commit ea7448d
Showing 1 changed file with 20 additions and 7 deletions.
diff --git a/components/lib/password/Password.js b/components/lib/password/Password.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import PrimeReact, { PrimeReactContext, localeOption } from '../api/Api';
+import PrimeReact, { PrimeReactContext, localeOption, ariaLabel } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useGlobalOnEscapeKey, useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
@@ -291,27 +291,40 @@ export const Password = React.memo(
             ZIndexUtils.clear(overlayRef.current);
         });
 
+        const onToggleMaskKeyDown = (event) => {
+            if (event.key === 'Enter' || event.code === 'Space') {
+                toggleMask();
+                event.preventDefault();
+            }
+        };
+
         const createIcon = () => {
             let icon;
 
             const hideIconProps = mergeProps(
                 {
                     key: 'hideIcon',
-                    role: 'button',
-                    tabIndex: props.tabIndex,
+                    role: 'switch',
+                    tabIndex: props.tabIndex || '0',
                     className: cx('hideIcon'),
-                    onClick: toggleMask
+                    onClick: toggleMask,
+                    onKeyDown: onToggleMaskKeyDown,
+                    'aria-label': ariaLabel('passwordHide') || 'Hide Password',
+                    'aria-checked': 'false'
                 },
                 ptm('hideIcon')
             );
 
             const showIconProps = mergeProps(
                 {
                     key: 'showIcon',
-                    role: 'button',
-                    tabIndex: props.tabIndex,
+                    role: 'switch',
+                    tabIndex: props.tabIndex || '0',
                     className: cx('showIcon'),
-                    onClick: toggleMask
+                    onClick: toggleMask,
+                    onKeyDown: onToggleMaskKeyDown,
+                    'aria-label': ariaLabel('passwordShow') || 'Show Password',
+                    'aria-checked': 'true'
                 },
                 ptm('showIcon')
             );