fix: primefaces primefaces#6269, Dropdown: (accessiblility) cannot ac…

…cess and clear the selected input using using keyboard
qburst · Mar 31, 2024 · 21f4ea3 · 21f4ea3
1 parent 411f26a
commit 21f4ea3
Showing 1 changed file with 12 additions and 2 deletions.
diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import PrimeReact, { FilterService, PrimeReactContext } from '../api/Api';
+import PrimeReact, { FilterService, PrimeReactContext, localeOption } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { ChevronDownIcon } from '../icons/chevrondown';
@@ -1099,12 +1099,22 @@ export const Dropdown = React.memo(
             return <span {...inputProps}>{content}</span>;
         };
 
+        const onClearIconKeyDown = (event) => {
+            if (event.key === 'Enter' || event.code === 'Space') {
+                clear(event);
+                event.preventDefault();
+            }
+        };
+
         const createClearIcon = () => {
             if (props.value != null && props.showClear && !props.disabled) {
                 const clearIconProps = mergeProps(
                     {
                         className: cx('clearIcon'),
-                        onPointerUp: clear
+                        onPointerUp: clear,
+                        tabIndex: props.tabIndex || '0',
+                        onKeyDown: onClearIconKeyDown,
+                        'aria-label': localeOption('clear')
                     },
                     ptm('clearIcon')
                 );