Fix primefaces#3275: AutoComplete add dropdownAriaLabel with defaults

melloware · Sep 9, 2022 · 88c416d · 88c416d
1 parent fd07f37
commit 88c416d
Show file tree

Hide file tree

Showing 5 changed files with 131 additions and 105 deletions.
diff --git a/api-generator/components/autocomplete.js b/api-generator/components/autocomplete.js
@@ -233,6 +233,12 @@ const AutoCompleteProps = [
         default: 'pi pi-chevron-down',
         description: 'Icon class of the dropdown icon.'
     },
+    {
+        name: 'dropdownAriaLabel',
+        type: 'string',
+        default: 'null',
+        description: 'ARIA label for the dropdown button. Defaults to placeholder then Locale "choose" label.'
+    },
     {
         name: 'virtualScrollerOptions',
         type: 'object',

diff --git a/components/doc/autocomplete/index.js b/components/doc/autocomplete/index.js
@@ -1,9 +1,9 @@
-import React, { memo } from 'react';
 import Link from 'next/link';
-import { TabView, TabPanel } from '../../lib/tabview/TabView';
-import { useLiveEditorTabs } from '../common/liveeditor';
+import React, { memo } from 'react';
+import { TabPanel, TabView } from '../../lib/tabview/TabView';
 import { CodeHighlight } from '../common/codehighlight';
 import { DevelopmentSection } from '../common/developmentsection';
+import { useLiveEditorTabs } from '../common/liveeditor';
 
 const AutoCompleteDoc = memo(() => {
     const sources = {
@@ -141,20 +141,20 @@ export class AutoCompleteDemo extends Component {
         return (
             <div className="card">
                 <h5>Basic</h5>
-                <AutoComplete value={this.state.selectedCountry1} suggestions={this.state.filteredCountries} completeMethod={this.searchCountry} field="name" onChange={(e) => this.setState({ selectedCountry1: e.value })} aria-label="Countries" />
+                <AutoComplete value={this.state.selectedCountry1} suggestions={this.state.filteredCountries} completeMethod={this.searchCountry} field="name" onChange={(e) => this.setState({ selectedCountry1: e.value })} aria-label="Countries" dropdownAriaLabel="Select Country" />
 
                 <h5>Grouped</h5>
                 <AutoComplete value={this.state.selectedCity} suggestions={this.state.filteredCities} completeMethod={this.searchCity} field="label" optionGroupLabel="label" optionGroupChildren="items" optionGroupTemplate={this.groupedItemTemplate} onChange={(e) => this.setState({ selectedCity: e.value })} aria-label="Cities" />
 
                 <h5>Dropdown, Templating and Force Selection</h5>
-                <AutoComplete value={this.state.selectedCountry2} suggestions={this.state.filteredCountries} completeMethod={this.searchCountry} field="name" dropdown forceSelection itemTemplate={this.itemTemplate} onChange={(e) => this.setState({ selectedCountry2: e.value })} aria-label="Countries" />
+                <AutoComplete value={this.state.selectedCountry2} suggestions={this.state.filteredCountries} completeMethod={this.searchCountry} field="name" dropdown forceSelection itemTemplate={this.itemTemplate} onChange={(e) => this.setState({ selectedCountry2: e.value })} aria-label="Countries" dropdownAriaLabel="Select Country" />
 
                 <h5>Virtual Scroll (100000 Items)</h5>
-                <AutoComplete value={this.state.selectedItem} suggestions={this.state.filteredItems} completeMethod={this.searchItems} virtualScrollerOptions={{ itemSize: 38 }} field="label" dropdown onChange={(e) => this.setState({ selectedItem: e.value })} aria-label="Items" />
+                <AutoComplete value={this.state.selectedItem} suggestions={this.state.filteredItems} completeMethod={this.searchItems} virtualScrollerOptions={{ itemSize: 38 }} field="label" dropdown onChange={(e) => this.setState({ selectedItem: e.value })} dropdownAriaLabel="Select Item" />
 
                 <h5>Multiple</h5>
                 <span className="p-fluid">
-                    <AutoComplete value={this.state.selectedCountries} suggestions={this.state.filteredCountries} completeMethod={this.searchCountry} field="name" multiple onChange={(e) => this.setState({ selectedCountries: e.value })} aria-label="Countries" />
+                    <AutoComplete value={this.state.selectedCountries} suggestions={this.state.filteredCountries} completeMethod={this.searchCountry} field="name" multiple onChange={(e) => this.setState({ selectedCountries: e.value })} aria-label="Countries" dropdownAriaLabel="Select Country" />
                 </span>
             </div>
         )
@@ -284,20 +284,20 @@ export const AutoCompleteDemo = () => {
     return (
         <div className="card">
             <h5>Basic</h5>
-            <AutoComplete value={selectedCountry1} suggestions={filteredCountries} completeMethod={searchCountry} field="name" onChange={(e) => setSelectedCountry1(e.value)} aria-label="Countries" />
+            <AutoComplete value={selectedCountry1} suggestions={filteredCountries} completeMethod={searchCountry} field="name" onChange={(e) => setSelectedCountry1(e.value)} aria-label="Countries" dropdownAriaLabel="Select Country" />
 
             <h5>Grouped</h5>
             <AutoComplete value={selectedCity} suggestions={filteredCities} completeMethod={searchCity} field="label" optionGroupLabel="label" optionGroupChildren="items" optionGroupTemplate={groupedItemTemplate} onChange={(e) => setSelectedCity(e.value)} aria-label="Cities"/>
 
             <h5>Dropdown, Templating and Force Selection</h5>
-            <AutoComplete value={selectedCountry2} suggestions={filteredCountries} completeMethod={searchCountry} field="name" dropdown forceSelection itemTemplate={itemTemplate} onChange={(e) => setSelectedCountry2(e.value)} aria-label="Countries" />
+            <AutoComplete value={selectedCountry2} suggestions={filteredCountries} completeMethod={searchCountry} field="name" dropdown forceSelection itemTemplate={itemTemplate} onChange={(e) => setSelectedCountry2(e.value)} aria-label="Countries" dropdownAriaLabel="Select Country" />
 
             <h5>Virtual Scroll (100000 Items)</h5>
-            <AutoComplete value={selectedItem} suggestions={filteredItems} completeMethod={searchItems} virtualScrollerOptions={{ itemSize: 38 }} field="label" dropdown onChange={(e) => setSelectedItem(e.value)} aria-label="Items" />
+            <AutoComplete value={selectedItem} suggestions={filteredItems} completeMethod={searchItems} virtualScrollerOptions={{ itemSize: 38 }} field="label" dropdown onChange={(e) => setSelectedItem(e.value)} dropdownAriaLabel="Select Item" />
 
             <h5>Multiple</h5>
             <span className="p-fluid">
-                <AutoComplete value={selectedCountries} suggestions={filteredCountries} completeMethod={searchCountry} field="name" multiple onChange={(e) => setSelectedCountries(e.value)} aria-label="Countries" />
+                <AutoComplete value={selectedCountries} suggestions={filteredCountries} completeMethod={searchCountry} field="name" multiple onChange={(e) => setSelectedCountries(e.value)} aria-label="Countries" dropdownAriaLabel="Select Country" />
             </span>
         </div>
     )
@@ -426,20 +426,20 @@ export const AutoCompleteDemo = () => {
     return (
         <div className="card">
             <h5>Basic</h5>
-            <AutoComplete value={selectedCountry1} suggestions={filteredCountries} completeMethod={searchCountry} field="name" onChange={(e) => setSelectedCountry1(e.value)} aria-label="Countries" />
+            <AutoComplete value={selectedCountry1} suggestions={filteredCountries} completeMethod={searchCountry} field="name" onChange={(e) => setSelectedCountry1(e.value)} aria-label="Countries" dropdownAriaLabel="Select Country" />
 
             <h5>Grouped</h5>
             <AutoComplete value={selectedCity} suggestions={filteredCities} completeMethod={searchCity} field="label" optionGroupLabel="label" optionGroupChildren="items" optionGroupTemplate={groupedItemTemplate} onChange={(e) => setSelectedCity(e.value)} aria-label="Cities"/>
 
             <h5>Dropdown, Templating and Force Selection</h5>
-            <AutoComplete value={selectedCountry2} suggestions={filteredCountries} completeMethod={searchCountry} field="name" dropdown forceSelection itemTemplate={itemTemplate} onChange={(e) => setSelectedCountry2(e.value)} aria-label="Countries" />
+            <AutoComplete value={selectedCountry2} suggestions={filteredCountries} completeMethod={searchCountry} field="name" dropdown forceSelection itemTemplate={itemTemplate} onChange={(e) => setSelectedCountry2(e.value)} aria-label="Countries" dropdownAriaLabel="Select Country" />
 
             <h5>Virtual Scroll (100000 Items)</h5>
-            <AutoComplete value={selectedItem} suggestions={filteredItems} completeMethod={searchItems} virtualScrollerOptions={{ itemSize: 38 }} field="label" dropdown onChange={(e) => setSelectedItem(e.value)} aria-label="Items" />
+            <AutoComplete value={selectedItem} suggestions={filteredItems} completeMethod={searchItems} virtualScrollerOptions={{ itemSize: 38 }} field="label" dropdown onChange={(e) => setSelectedItem(e.value)} dropdownAriaLabel="Select Item" />
 
             <h5>Multiple</h5>
             <span className="p-fluid">
-                <AutoComplete value={selectedCountries} suggestions={filteredCountries} completeMethod={searchCountry} field="name" multiple onChange={(e) => setSelectedCountries(e.value)} aria-label="Countries" />
+                <AutoComplete value={selectedCountries} suggestions={filteredCountries} completeMethod={searchCountry} field="name" multiple onChange={(e) => setSelectedCountries(e.value)} aria-label="Countries" dropdownAriaLabel="Select Country" />
             </span>
         </div>
     )
@@ -571,20 +571,20 @@ const AutoCompleteDemo = () => {
     return (
         <div className="card">
             <h5>Basic</h5>
-            <AutoComplete value={selectedCountry1} suggestions={filteredCountries} completeMethod={searchCountry} field="name" onChange={(e) => setSelectedCountry1(e.value)} aria-label="Countries" />
+            <AutoComplete value={selectedCountry1} suggestions={filteredCountries} completeMethod={searchCountry} field="name" onChange={(e) => setSelectedCountry1(e.value)} aria-label="Countries" dropdownAriaLabel="Select Country" />
 
             <h5>Grouped</h5>
             <AutoComplete value={selectedCity} suggestions={filteredCities} completeMethod={searchCity} field="label" optionGroupLabel="label" optionGroupChildren="items" optionGroupTemplate={groupedItemTemplate} onChange={(e) => setSelectedCity(e.value)} aria-label="Cities"/>
 
             <h5>Dropdown, Templating and Force Selection</h5>
-            <AutoComplete value={selectedCountry2} suggestions={filteredCountries} completeMethod={searchCountry} field="name" dropdown forceSelection itemTemplate={itemTemplate} onChange={(e) => setSelectedCountry2(e.value)} aria-label="Countries" />
+            <AutoComplete value={selectedCountry2} suggestions={filteredCountries} completeMethod={searchCountry} field="name" dropdown forceSelection itemTemplate={itemTemplate} onChange={(e) => setSelectedCountry2(e.value)} aria-label="Countries" dropdownAriaLabel="Select Country" />
 
             <h5>Virtual Scroll (100000 Items)</h5>
-            <AutoComplete value={selectedItem} suggestions={filteredItems} completeMethod={searchItems} virtualScrollerOptions={{ itemSize: 38 }} field="label" dropdown onChange={(e) => setSelectedItem(e.value)} aria-label="Items" />
+            <AutoComplete value={selectedItem} suggestions={filteredItems} completeMethod={searchItems} virtualScrollerOptions={{ itemSize: 38 }} field="label" dropdown onChange={(e) => setSelectedItem(e.value)} dropdownAriaLabel="Select Item" />
 
             <h5>Multiple</h5>
             <span className="p-fluid">
-                <AutoComplete value={selectedCountries} suggestions={filteredCountries} completeMethod={searchCountry} field="name" multiple onChange={(e) => setSelectedCountries(e.value)} aria-label="Countries" />
+                <AutoComplete value={selectedCountries} suggestions={filteredCountries} completeMethod={searchCountry} field="name" multiple onChange={(e) => setSelectedCountries(e.value)} aria-label="Countries" dropdownAriaLabel="Select Country" />
             </span>
         </div>
     )
@@ -1002,6 +1002,12 @@ itemTemplate(item) {
                                         can be customized, except for "nodeRef" and "in" properties.
                                     </td>
                                 </tr>
+                                <tr>
+                                    <td>dropdownAriaLabel</td>
+                                    <td>string</td>
+                                    <td>Choose</td>
+                                    <td>ARIA label for the dropdown button. Defaults to placeholder then Locale "choose" label.</td>
+                                </tr>
                                 <tr>
                                     <td>dropdownIcon</td>
                                     <td>any</td>

diff --git a/components/lib/autocomplete/AutoComplete.js b/components/lib/autocomplete/AutoComplete.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import PrimeReact from '../api/Api';
+import PrimeReact, { localeOption } from '../api/Api';
 import { Button } from '../button/Button';
 import { useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { InputText } from '../inputtext/InputText';
@@ -570,7 +570,8 @@ export const AutoComplete = React.memo(
 
         const createDropdown = () => {
             if (props.dropdown) {
-                return <Button type="button" icon={props.dropdownIcon} className="p-autocomplete-dropdown" disabled={props.disabled} onClick={onDropdownClick} />;
+                const ariaLabel = props.dropdownAriaLabel || props.placeholder || localeOption('choose');
+                return <Button type="button" icon={props.dropdownIcon} className="p-autocomplete-dropdown" disabled={props.disabled} onClick={onDropdownClick} aria-label={ariaLabel} />;
             }
 
             return null;
@@ -640,62 +641,63 @@ AutoComplete.defaultProps = {
     __TYPE: 'AutoComplete',
     id: null,
     inputRef: null,
-    value: null,
-    name: null,
-    type: 'text',
-    suggestions: null,
-    field: null,
-    optionGroupLabel: null,
-    optionGroupChildren: null,
-    optionGroupTemplate: null,
-    forceSelection: false,
+    'aria-label': null,
+    'aria-labelledby': null,
+    appendTo: null,
+    autoFocus: false,
     autoHighlight: false,
-    virtualScrollerOptions: null,
-    scrollHeight: '200px',
+    className: null,
+    completeMethod: null,
+    delay: 300,
+    disabled: false,
     dropdown: false,
-    dropdownMode: 'blank',
     dropdownAutoFocus: true,
-    multiple: false,
-    minLength: 1,
-    delay: 300,
-    style: null,
-    className: null,
+    dropdownIcon: 'pi pi-chevron-down',
+    dropdownMode: 'blank',
+    dropdownAriaLabel: null,
+    field: null,
+    forceSelection: false,
+    inputClassName: null,
     inputId: null,
     inputStyle: null,
-    inputClassName: null,
+    itemTemplate: null,
+    maxLength: null,
+    minLength: 1,
+    multiple: false,
+    name: null,
+    onBlur: null,
+    onChange: null,
+    onClear: null,
+    onClick: null,
+    onContextMenu: null,
+    onDblClick: null,
+    onDropdownClick: null,
+    onFocus: null,
+    onHide: null,
+    onKeyPress: null,
+    onKeyUp: null,
+    onMouseDown: null,
+    onSelect: null,
+    onShow: null,
+    onUnselect: null,
+    optionGroupChildren: null,
+    optionGroupLabel: null,
+    optionGroupTemplate: null,
     panelClassName: null,
     panelStyle: null,
     placeholder: null,
     readOnly: false,
-    disabled: false,
-    maxLength: null,
+    removeIcon: 'pi pi-times-circle',
+    scrollHeight: '200px',
+    selectedItemTemplate: null,
     size: null,
-    appendTo: null,
+    style: null,
+    suggestions: null,
     tabIndex: null,
-    autoFocus: false,
     tooltip: null,
     tooltipOptions: null,
-    completeMethod: null,
-    itemTemplate: null,
-    selectedItemTemplate: null,
     transitionOptions: null,
-    dropdownIcon: 'pi pi-chevron-down',
-    removeIcon: 'pi pi-times-circle',
-    'aria-label': null,
-    'aria-labelledby': null,
-    onChange: null,
-    onFocus: null,
-    onBlur: null,
-    onSelect: null,
-    onUnselect: null,
-    onDropdownClick: null,
-    onClick: null,
-    onDblClick: null,
-    onMouseDown: null,
-    onKeyUp: null,
-    onKeyPress: null,
-    onContextMenu: null,
-    onClear: null,
-    onShow: null,
-    onHide: null
+    type: 'text',
+    value: null,
+    virtualScrollerOptions: null
 };