Fix #839/#1852/#3319: ARIA support to input elements (#3323)

primefaces · Sep 14, 2022 · 58c1a1e · 58c1a1e
1 parent 9e971ae
commit 58c1a1e
Show file tree

Hide file tree

Showing 18 changed files with 78 additions and 115 deletions.
diff --git a/components/lib/autocomplete/AutoComplete.js b/components/lib/autocomplete/AutoComplete.js
@@ -492,8 +492,6 @@ export const AutoComplete = React.memo(
                     aria-controls={ariaControls}
                     aria-haspopup="listbox"
                     aria-expanded={overlayVisibleState}
-                    aria-labelledby={props['aria-labelledby']}
-                    aria-label={props['aria-label']}
                     className={className}
                     style={props.inputStyle}
                     autoComplete="off"
@@ -513,6 +511,7 @@ export const AutoComplete = React.memo(
                     onContextMenu={props.onContextMenu}
                     onClick={props.onClick}
                     onDoubleClick={props.onDblClick}
+                    {...ariaProps}
                     {...dataProps}
                 />
             );
@@ -550,8 +549,6 @@ export const AutoComplete = React.memo(
                         aria-controls={ariaControls}
                         aria-haspopup="listbox"
                         aria-expanded={overlayVisibleState}
-                        aria-labelledby={props['aria-labelledby']}
-                        aria-label={props['aria-label']}
                         autoComplete="off"
                         tabIndex={props.tabIndex}
                         onChange={onInputChange}
@@ -565,6 +562,7 @@ export const AutoComplete = React.memo(
                         onKeyPress={props.onKeyPress}
                         onFocus={onMultiInputFocus}
                         onBlur={onMultiInputBlur}
+                        {...ariaProps}
                         {...dataProps}
                     />
                 </li>
@@ -611,7 +609,8 @@ export const AutoComplete = React.memo(
         const listId = idState + '_list';
         const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
         const otherProps = ObjectUtils.findDiffKeys(props, AutoComplete.defaultProps);
-        const dataProps = ObjectUtils.reduceKeys(otherProps, 'data');
+        const dataProps = ObjectUtils.reduceKeys(otherProps, DomHandler.DATA_PROPS);
+        const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
         const className = classNames(
             'p-autocomplete p-component p-inputwrapper',
             {
@@ -660,8 +659,6 @@ AutoComplete.displayName = 'AutoComplete';
 AutoComplete.defaultProps = {
     __TYPE: 'AutoComplete',
     id: null,
-    'aria-label': null,
-    'aria-labelledby': null,
     appendTo: null,
     autoFocus: false,
     autoHighlight: false,

diff --git a/components/lib/cascadeselect/CascadeSelect.js b/components/lib/cascadeselect/CascadeSelect.js
@@ -229,7 +229,7 @@ export const CascadeSelect = React.memo(
                         onKeyDown={onInputKeyDown}
                         tabIndex={props.tabIndex}
                         aria-haspopup="listbox"
-                        aria-labelledby={props.ariaLabelledBy}
+                        {...ariaProps}
                     />
                 </div>
             );
@@ -299,7 +299,6 @@ export const CascadeSelect = React.memo(
         };
 
         const createElement = () => {
-            const otherProps = ObjectUtils.findDiffKeys(props, CascadeSelect.defaultProps);
             const className = classNames(
                 'p-cascadeselect p-component p-inputwrapper',
                 {
@@ -326,6 +325,9 @@ export const CascadeSelect = React.memo(
             );
         };
 
+        const otherProps = ObjectUtils.findDiffKeys(props, CascadeSelect.defaultProps);
+        const dataProps = ObjectUtils.reduceKeys(otherProps, DomHandler.DATA_PROPS);
+        const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
         const element = createElement();
 
         return element;

diff --git a/components/lib/checkbox/Checkbox.js b/components/lib/checkbox/Checkbox.js
@@ -75,7 +75,8 @@ export const Checkbox = React.memo(
         const checked = isChecked();
         const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
         const otherProps = ObjectUtils.findDiffKeys(props, Checkbox.defaultProps);
-        const dataProps = ObjectUtils.reduceKeys(otherProps, 'data');
+        const dataProps = ObjectUtils.reduceKeys(otherProps, DomHandler.DATA_PROPS);
+        const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
         const className = classNames(
             'p-checkbox p-component',
             {
@@ -103,14 +104,13 @@ export const Checkbox = React.memo(
                             name={props.name}
                             tabIndex={props.tabIndex}
                             defaultChecked={checked}
-                            aria-labelledby={props['aria-labelledby']}
-                            aria-label={props['aria-label']}
                             onFocus={onFocus}
                             onBlur={onBlur}
                             onKeyDown={onKeyDown}
                             disabled={props.disabled}
                             readOnly={props.readOnly}
                             required={props.required}
+                            {...ariaProps}
                             {...dataProps}
                         />
                     </div>
@@ -142,8 +142,6 @@ Checkbox.defaultProps = {
     icon: 'pi pi-check',
     tooltip: null,
     tooltipOptions: null,
-    'aria-label': null,
-    'aria-labelledby': null,
     onChange: null,
     onMouseDown: null,
     onContextMenu: null

diff --git a/components/lib/chips/Chips.js b/components/lib/chips/Chips.js
@@ -228,8 +228,8 @@ export const Chips = React.memo(
                         onPaste={onPaste}
                         onFocus={onFocus}
                         onBlur={onBlur}
-                        aria-labelledby={props.ariaLabelledBy}
                         readOnly={props.readOnly}
+                        {...ariaProps}
                     />
                 </li>
             );
@@ -257,6 +257,7 @@ export const Chips = React.memo(
 
         const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
         const otherProps = ObjectUtils.findDiffKeys(props, Chips.defaultProps);
+        const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
         const className = classNames(
             'p-chips p-component p-inputwrapper',
             {

diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js
@@ -661,8 +661,7 @@ export const Dropdown = React.memo(
                         onKeyDown={onInputKeyDown}
                         disabled={props.disabled}
                         tabIndex={props.tabIndex}
-                        aria-label={props.ariaLabel}
-                        aria-labelledby={props.ariaLabelledBy}
+                        {...ariaProps}
                     />
                 </div>
             );
@@ -686,9 +685,8 @@ export const Dropdown = React.memo(
                         onInput={onEditableInputChange}
                         onFocus={onEditableInputFocus}
                         onBlur={onInputBlur}
-                        aria-label={props.ariaLabel}
-                        aria-labelledby={props.ariaLabelledBy}
                         aria-haspopup="listbox"
+                        {...ariaProps}
                     />
                 );
             } else {
@@ -730,7 +728,8 @@ export const Dropdown = React.memo(
 
         const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
         const otherProps = ObjectUtils.findDiffKeys(props, Dropdown.defaultProps);
-        const dataProps = ObjectUtils.reduceKeys(otherProps, 'data');
+        const dataProps = ObjectUtils.reduceKeys(otherProps, DomHandler.DATA_PROPS);
+        const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
         const className = classNames(
             'p-dropdown p-component p-inputwrapper',
             {

diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js
@@ -1017,7 +1017,7 @@ export const InputNumber = React.memo(
                     aria-valuemin={props.min}
                     aria-valuemax={props.max}
                     aria-valuenow={props.value}
-                    aria-labelledby={props.ariaLabelledBy}
+                    {...ariaProps}
                     {...dataProps}
                 />
             );
@@ -1106,7 +1106,8 @@ export const InputNumber = React.memo(
 
         const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
         const otherProps = ObjectUtils.findDiffKeys(props, InputNumber.defaultProps);
-        const dataProps = ObjectUtils.reduceKeys(otherProps, 'data');
+        const dataProps = ObjectUtils.reduceKeys(otherProps, DomHandler.DATA_PROPS);
+        const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
         const className = classNames(
             'p-inputnumber p-component p-inputwrapper',
             {

diff --git a/components/lib/inputswitch/InputSwitch.js b/components/lib/inputswitch/InputSwitch.js
@@ -60,7 +60,8 @@ export const InputSwitch = React.memo(
 
         const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
         const otherProps = ObjectUtils.findDiffKeys(props, InputSwitch.defaultProps);
-        const dataProps = ObjectUtils.reduceKeys(otherProps, 'data');
+        const dataProps = ObjectUtils.reduceKeys(otherProps, DomHandler.DATA_PROPS);
+        const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
         const className = classNames(
             'p-inputswitch p-component',
             {
@@ -88,8 +89,7 @@ export const InputSwitch = React.memo(
                             role="switch"
                             tabIndex={props.tabIndex}
                             aria-checked={checked}
-                            aria-labelledby={props['aria-labelledby']}
-                            aria-label={props['aria-label']}
+                            {...ariaProps}
                             {...dataProps}
                         />
                     </div>
@@ -104,8 +104,6 @@ export const InputSwitch = React.memo(
 InputSwitch.displayName = 'InputSwitch';
 InputSwitch.defaultProps = {
     __TYPE: 'InputSwitch',
-    'aria-label': null,
-    'aria-labelledby': null,
     checked: false,
     className: null,
     disabled: false,

diff --git a/components/lib/listbox/ListBox.js b/components/lib/listbox/ListBox.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { FilterService } from '../api/Api';
 import { useMountEffect } from '../hooks/Hooks';
 import { Tooltip } from '../tooltip/Tooltip';
-import { classNames, ObjectUtils } from '../utils/Utils';
+import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
 import { VirtualScroller } from '../virtualscroller/VirtualScroller';
 import { ListBoxHeader } from './ListBoxHeader';
 import { ListBoxItem } from './ListBoxItem';
@@ -358,7 +358,7 @@ export const ListBox = React.memo(
                             const className = classNames('p-listbox-list', option.className);
 
                             return (
-                                <ul ref={option.contentRef} className={className} role="listbox" aria-multiselectable={props.multiple} aria-labelledby={props['aria-labelledby']} aria-label={props['aria-label']}>
+                                <ul ref={option.contentRef} className={className} role="listbox" aria-multiselectable={props.multiple} {...ariaProps}>
                                     {option.children}
                                 </ul>
                             );
@@ -371,7 +371,7 @@ export const ListBox = React.memo(
                 const items = createItems();
 
                 return (
-                    <ul className="p-listbox-list" role="listbox" aria-multiselectable={props.multiple} aria-labelledby={props['aria-labelledby']} aria-label={props['aria-label']}>
+                    <ul className="p-listbox-list" role="listbox" aria-multiselectable={props.multiple} {...ariaProps}>
                         {items}
                     </ul>
                 );
@@ -382,6 +382,7 @@ export const ListBox = React.memo(
 
         const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
         const otherProps = ObjectUtils.findDiffKeys(props, ListBox.defaultProps);
+        const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
         const className = classNames(
             'p-listbox p-component',
             {
@@ -440,8 +441,6 @@ ListBox.defaultProps = {
     tabIndex: 0,
     tooltip: null,
     tooltipOptions: null,
-    'aria-label': null,
-    'aria-labelledby': null,
     onChange: null,
     onFilterValueChange: null
 };
diff --git a/components/lib/mention/Mention.js b/components/lib/mention/Mention.js
@@ -424,21 +424,7 @@ export const Mention = React.memo(
 
         return (
             <div ref={elementRef} id={props.id} className={className} style={props.style}>
-                <InputTextarea
-                    ref={inputRef}
-                    id={props.inputId}
-                    aria-labelledby={props['aria-labelledby']}
-                    aria-label={props['aria-label']}
-                    className={inputClassName}
-                    style={props.inputStyle}
-                    {...inputProps}
-                    onFocus={onFocus}
-                    onBlur={onBlur}
-                    onKeyDown={onKeyDown}
-                    onInput={onInput}
-                    onKeyUp={onKeyUp}
-                    onChange={onChange}
-                />
+                <InputTextarea ref={inputRef} id={props.inputId} className={inputClassName} style={props.inputStyle} {...inputProps} onFocus={onFocus} onBlur={onBlur} onKeyDown={onKeyDown} onInput={onInput} onKeyUp={onKeyUp} onChange={onChange} />
                 {panel}
             </div>
         );
@@ -448,33 +434,31 @@ export const Mention = React.memo(
 Mention.displayName = 'Mention';
 Mention.defaultProps = {
     __TYPE: 'Mention',
+    autoHighlight: true,
+    className: null,
+    delay: 0,
+    field: null,
+    footerTemplate: null,
+    headerTemplate: null,
     id: null,
+    inputClassName: null,
     inputId: null,
     inputRef: null,
-    style: null,
-    className: null,
-    trigger: '@',
-    suggestions: null,
-    field: null,
     inputStyle: null,
-    inputClassName: null,
+    itemTemplate: null,
     panelClassName: null,
     panelStyle: null,
     scrollHeight: '200px',
-    autoHighlight: true,
-    delay: 0,
-    headerTemplate: null,
-    footerTemplate: null,
-    itemTemplate: null,
-    'aria-label': null,
-    'aria-labelledby': null,
+    style: null,
+    suggestions: null,
     transitionOptions: null,
+    trigger: '@',
+    onBlur: null,
     onChange: null,
+    onFocus: null,
+    onHide: null,
     onInput: null,
     onSearch: null,
     onSelect: null,
-    onFocus: null,
-    onBlur: null,
-    onShow: null,
-    onHide: null
+    onShow: null
 };
diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
@@ -567,7 +567,8 @@ export const MultiSelect = React.memo(
 
         const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
         const otherProps = ObjectUtils.findDiffKeys(props, MultiSelect.defaultProps);
-        const dataProps = ObjectUtils.reduceKeys(otherProps, 'data');
+        const dataProps = ObjectUtils.reduceKeys(otherProps, DomHandler.DATA_PROPS);
+        const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
         const className = classNames(
             'p-multiselect p-component p-inputwrapper',
             {
@@ -597,10 +598,10 @@ export const MultiSelect = React.memo(
                             onBlur={onBlur}
                             onKeyDown={onKeyDown}
                             role="listbox"
-                            aria-labelledby={props.ariaLabelledBy}
                             aria-expanded={overlayVisibleState}
                             disabled={props.disabled}
                             tabIndex={props.tabIndex}
+                            {...ariaProps}
                             {...dataProps}
                         />
                     </div>

diff --git a/components/lib/multistatecheckbox/MultiStateCheckbox.js b/components/lib/multistatecheckbox/MultiStateCheckbox.js
@@ -1,8 +1,8 @@
 import * as React from 'react';
+import { ariaLabel } from '../api/Api';
 import { useMountEffect } from '../hooks/Hooks';
 import { Tooltip } from '../tooltip/Tooltip';
-import { ariaLabel } from '../api/Api';
-import { classNames, ObjectUtils } from '../utils/Utils';
+import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
 
 export const MultiStateCheckbox = React.memo(
     React.forwardRef((props, ref) => {
@@ -114,6 +114,7 @@ export const MultiStateCheckbox = React.memo(
 
         const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
         const otherProps = ObjectUtils.findDiffKeys(props, MultiStateCheckbox.defaultProps);
+        const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
         const className = classNames('p-multistatecheckbox p-checkbox p-component', props.className);
         const boxClassName = classNames(
             'p-checkbox-box',
@@ -131,18 +132,7 @@ export const MultiStateCheckbox = React.memo(
         return (
             <>
                 <div ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps} onClick={onClick}>
-                    <div
-                        className={boxClassName}
-                        style={selectedOption && selectedOption.style}
-                        tabIndex={props.tabIndex}
-                        onFocus={onFocus}
-                        onBlur={onBlur}
-                        onKeyDown={onKeyDown}
-                        role="checkbox"
-                        aria-checked={ariaChecked}
-                        aria-labelledby={props['aria-labelledby']}
-                        aria-label={props['aria-label']}
-                    >
+                    <div className={boxClassName} style={selectedOption && selectedOption.style} tabIndex={props.tabIndex} onFocus={onFocus} onBlur={onBlur} onKeyDown={onKeyDown} role="checkbox" aria-checked={ariaChecked} {...ariaProps}>
                         {icon}
                     </div>
                     {focusedState && (
@@ -173,8 +163,6 @@ MultiStateCheckbox.defaultProps = {
     readOnly: false,
     empty: true,
     tabIndex: '0',
-    'aria-label': null,
-    'aria-labelledby': null,
     tooltip: null,
     tooltipOptions: null,
     onChange: null