fix: primefaces #6234, TreeSelect: (accessiblility) cannot access and…

… clear the selected input using using keyboard
primefaces · Mar 26, 2024 · d6ce2f4 · d6ce2f4
1 parent 709d5c4
commit d6ce2f4
Showing 1 changed file with 11 additions and 1 deletion.
diff --git a/components/lib/treeselect/TreeSelect.js b/components/lib/treeselect/TreeSelect.js
@@ -146,6 +146,13 @@ export const TreeSelect = React.memo(
             }
         };
 
+        const onClearIconKeyDown = (event) => {
+            if (event.key === 'Enter' || event.code === 'Space') {
+                clear(event);
+                event.preventDefault();
+            }
+        };
+
         const onNodeSelect = (node) => {
             props.onNodeSelect && props.onNodeSelect(node);
             isSingleSelectionMode && hide();
@@ -621,7 +628,10 @@ export const TreeSelect = React.memo(
                 const clearIconProps = mergeProps(
                     {
                         className: cx('clearIcon'),
-                        onPointerUp: clear
+                        onPointerUp: clear,
+                        tabIndex: props.tabIndex || '0',
+                        onKeyDown: onClearIconKeyDown,
+                        'aria-label': 'Clear Selection'
                     },
                     ptm('clearIcon')
                 );