Fix #7643: Dropdown add aria label Option List (#7655)

primefaces · Jan 28, 2025 · ec81f40 · ec81f40
1 parent 08db110
commit ec81f40
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 5 deletions.
diff --git a/components/lib/api/Locale.js b/components/lib/api/Locale.js
@@ -86,6 +86,7 @@ let locales = {
             jumpToPageDropdownLabel: 'Jump to Page Dropdown',
             jumpToPageInputLabel: 'Jump to Page Input',
             lastPageLabel: 'Last Page',
+            listLabel: 'Option List',
             listView: 'List View',
             moveAllToSource: 'Move All to Source',
             moveAllToTarget: 'Move All to Target',

diff --git a/components/lib/api/api.d.ts b/components/lib/api/api.d.ts
@@ -1205,6 +1205,10 @@ export interface LocaleOptions {
          * Rotate Left
          */
         rotateLeft?: string;
+        /**
+         * Options List Label
+         */
+        listLabel?: string;
     };
 }
 

diff --git a/components/lib/dropdown/DropdownPanel.js b/components/lib/dropdown/DropdownPanel.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { localeOption, PrimeReactContext } from '../api/Api';
+import { ariaLabel, localeOption, PrimeReactContext } from '../api/Api';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { useMergeProps } from '../hooks/Hooks';
 import { SearchIcon } from '../icons/search';
@@ -158,11 +158,11 @@ export const DropdownPanel = React.memo(
 
         const createFilterClearIcon = () => {
             if (props.showFilterClear && props.filterValue) {
-                const ariaLabel = localeOption('clear');
+                const ariaLabelFilterClear = localeOption('clear');
                 const clearIconProps = mergeProps(
                     {
                         className: cx('filterClearIcon'),
-                        'aria-label': ariaLabel,
+                        'aria-label': ariaLabelFilterClear,
                         onClick: () => props.onFilterClearIconClick(() => DomHandler.focus(filterInputRef.current))
                     },
                     getPTOptions('filterClearIcon')
@@ -261,7 +261,8 @@ export const DropdownPanel = React.memo(
                                     ref: options.contentRef,
                                     style: options.style,
                                     className: classNames(options.className, cx('list', { virtualScrollerProps: props.virtualScrollerOptions })),
-                                    role: 'listbox'
+                                    role: 'listbox',
+                                    'aria-label': ariaLabel('listLabel')
                                 },
                                 getPTOptions('list')
                             );
@@ -286,7 +287,8 @@ export const DropdownPanel = React.memo(
             const listProps = mergeProps(
                 {
                     className: cx('list'),
-                    role: 'listbox'
+                    role: 'listbox',
+                    'aria-label': ariaLabel('listLabel')
                 },
                 getPTOptions('list')
             );

diff --git a/components/lib/hooks/useLocale.js b/components/lib/hooks/useLocale.js
@@ -89,6 +89,7 @@ let locales = {
             jumpToPageDropdownLabel: 'Jump to Page Dropdown',
             jumpToPageInputLabel: 'Jump to Page Input',
             lastPageLabel: 'Last Page',
+            listLabel: 'Option List',
             listView: 'List View',
             moveAllToSource: 'Move All to Source',
             moveAllToTarget: 'Move All to Target',