Fixing accessibility issue of dropdown (#7175)

* Fixing accessibility issue of dropdown * fixing formatting
primefaces · Sep 13, 2024 · d46470f · d46470f
1 parent c410efb
commit d46470f
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js
@@ -390,13 +390,20 @@ export const Dropdown = React.memo(
         const changeFocusedOptionIndex = (event, index) => {
             if (focusedOptionIndex !== index) {
                 setFocusedOptionIndex(index);
+                focusOnItem(index);
 
                 if (props.selectOnFocus) {
                     onOptionSelect(event, visibleOptions[index], false);
                 }
             }
         };
 
+        const focusOnItem = (index) => {
+            const focusedItem = DomHandler.findSingle(overlayRef.current, `li[id="dropdownItem_${index}"]`);
+
+            focusedItem && focusedItem.focus();
+        };
+
         const onArrowDownKey = (event) => {
             if (!overlayVisibleState) {
                 show();
@@ -1167,7 +1174,8 @@ export const Dropdown = React.memo(
                 onContextMenu: props.onContextMenu,
                 onFocus: onFocus,
                 'data-p-disabled': props.disabled,
-                'data-p-focus': focusedState
+                'data-p-focus': focusedState,
+                'aria-activedescendant': focusedState ? `dropdownItem_${focusedOptionIndex}` : undefined
             },
             otherProps,
             ptm('root')
@@ -1238,6 +1246,7 @@ export const Dropdown = React.memo(
                         onFilterInputChange={onFilterInputChange}
                         onFilterInputKeyDown={onFilterInputKeyDown}
                         onOptionClick={onOptionClick}
+                        onInputKeyDown={onInputKeyDown}
                         ptm={ptm}
                         resetFilter={resetFilter}
                         changeFocusedOptionIndex={changeFocusedOptionIndex}

diff --git a/components/lib/dropdown/DropdownItem.js b/components/lib/dropdown/DropdownItem.js
@@ -7,7 +7,7 @@ import { BlankIcon } from '../icons/blank';
 
 export const DropdownItem = React.memo((props) => {
     const mergeProps = useMergeProps();
-    const { ptm, cx, selected, disabled, option, label, index, focusedOptionIndex, checkmark, highlightOnSelect } = props;
+    const { ptm, cx, selected, disabled, option, label, index, focusedOptionIndex, ariaSetSize, checkmark, highlightOnSelect, onInputKeyDown } = props;
 
     const getPTOptions = (key) => {
         return ptm(key, {
@@ -31,12 +31,17 @@ export const DropdownItem = React.memo((props) => {
     const content = props.template ? ObjectUtils.getJSXElement(props.template, props.option) : props.label;
     const itemProps = mergeProps(
         {
+            id: `dropdownItem_${index}`,
             role: 'option',
             key: props.label,
             className: classNames(option.className, cx('item', { selected, disabled, label, index, focusedOptionIndex, highlightOnSelect })),
             style: props.style,
+            tabIndex: 0,
             onClick: (e) => onClick(e, index),
+            onKeyDown: (e) => onInputKeyDown(e),
             onMouseMove: (e) => props?.onMouseMove(e, index),
+            'aria-setsize': ariaSetSize,
+            'aria-posinset': index + 1,
             'aria-label': label,
             'aria-selected': selected,
             'data-p-highlight': selected,

diff --git a/components/lib/dropdown/DropdownPanel.js b/components/lib/dropdown/DropdownPanel.js
@@ -17,6 +17,7 @@ export const DropdownPanel = React.memo(
 
         const filterInputRef = React.useRef(null);
         const isEmptyFilter = !(props.visibleOptions && props.visibleOptions.length) && props.hasFilter;
+        const ariaSetSize = props.visibleOptions ? props.visibleOptions.length : 0;
         const filterOptions = {
             filter: (e) => onFilterInputChange(e),
             reset: () => props.resetFilter()
@@ -129,6 +130,8 @@ export const DropdownPanel = React.memo(
                     index={index}
                     focusedOptionIndex={props.focusedOptionIndex}
                     option={option}
+                    ariaSetSize={ariaSetSize}
+                    onInputKeyDown={props.onInputKeyDown}
                     style={style}
                     template={props.itemTemplate}
                     selected={props.isSelected(option)}