Fix primefaces#3263: Datatable aria label fixes

melloware · Sep 8, 2022 · d8b4052 · d8b4052
1 parent 21282ee
commit d8b4052
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 12 deletions.
diff --git a/components/lib/api/Locale.js b/components/lib/api/Locale.js
@@ -9,6 +9,7 @@ let locales = {
         equals: 'Equals',
         notEquals: 'Not equals',
         noFilter: 'No Filter',
+        filter: 'Filter',
         lt: 'Less than',
         lte: 'Less than or equal to',
         gt: 'Greater than',

diff --git a/components/lib/datatable/ColumnFilter.js b/components/lib/datatable/ColumnFilter.js
@@ -368,6 +368,10 @@ export const ColumnFilter = React.memo((props) => {
         ];
     };
 
+    const filterLabel = () => {
+        return localeOption('filter');
+    };
+
     const noFilterLabel = () => {
         return localeOption('noFilter');
     };
@@ -450,12 +454,9 @@ export const ColumnFilter = React.memo((props) => {
                 'p-column-filter-menu-button-open': overlayVisibleState,
                 'p-column-filter-menu-button-active': hasFilter()
             });
+            const label = filterLabel();
 
-            return (
-                <button ref={iconRef} type="button" className={className} aria-haspopup aria-expanded={overlayVisibleState} onClick={toggleMenu} onKeyDown={onToggleButtonKeyDown}>
-                    <span className="pi pi-filter-icon pi-filter"></span>
-                </button>
-            );
+            return <Button ref={iconRef} type="button" icon="pi pi-filter-icon pi-filter" className={className} aria-haspopup aria-expanded={overlayVisibleState} onClick={toggleMenu} onKeyDown={onToggleButtonKeyDown} aria-label={label} />;
         }
 
         return null;
@@ -466,12 +467,9 @@ export const ColumnFilter = React.memo((props) => {
             const className = classNames('p-column-filter-clear-button p-link', {
                 'p-hidden-space': !hasRowFilter()
             });
+            const clearLabel = clearButtonLabel();
 
-            return (
-                <button className={className} type="button" onClick={clearFilter}>
-                    <span className="pi pi-filter-slash"></span>
-                </button>
-            );
+            return <Button ref={iconRef} type="button" icon="pi pi-filter-slash" className={className} onClick={clearFilter} aria-label={clearLabel} />;
         }
 
         return null;

diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js
@@ -696,7 +696,7 @@ export const Dropdown = React.memo(
             const iconClassName = classNames('p-dropdown-trigger-icon p-clickable', props.dropdownIcon);
 
             return (
-                <div className="p-dropdown-trigger" role="button" aria-haspopup="listbox" aria-expanded={overlayVisibleState}>
+                <div className="p-dropdown-trigger" role="button" aria-haspopup="listbox" aria-expanded={overlayVisibleState} aria-label={props.placeholder || props.ariaLabel}>
                     <span className={iconClassName}></span>
                 </div>
             );

diff --git a/components/lib/paginator/RowsPerPageDropdown.js b/components/lib/paginator/RowsPerPageDropdown.js
@@ -1,11 +1,13 @@
 import * as React from 'react';
+import { localeOption } from '../api/Api';
 import { Dropdown } from '../dropdown/Dropdown';
 import { ObjectUtils } from '../utils/Utils';
 
 export const RowsPerPageDropdown = React.memo((props) => {
     const hasOptions = props.options && props.options.length > 0;
     const options = hasOptions ? props.options.map((opt) => ({ label: String(opt), value: opt })) : [];
-    const element = hasOptions ? <Dropdown value={props.value} options={options} onChange={props.onChange} appendTo={props.appendTo} disabled={props.disabled} /> : null;
+    const ariaLabel = localeOption('choose');
+    const element = hasOptions ? <Dropdown value={props.value} options={options} onChange={props.onChange} appendTo={props.appendTo} disabled={props.disabled} placeholder={ariaLabel} ariaLabel={ariaLabel} /> : null;
 
     if (props.template) {
         const defaultOptions = {