From 58c1a1ecc62c4b144576179f26cc1a3bd63c8187 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Wed, 14 Sep 2022 17:46:39 -0400
Subject: [PATCH] Fix #839/#1852/#3319: ARIA support to input elements (#3323)

---
 components/lib/autocomplete/AutoComplete.js   | 11 ++---
 components/lib/cascadeselect/CascadeSelect.js |  6 ++-
 components/lib/checkbox/Checkbox.js           |  8 ++--
 components/lib/chips/Chips.js                 |  3 +-
 components/lib/dropdown/Dropdown.js           |  9 ++--
 components/lib/inputnumber/InputNumber.js     |  5 +-
 components/lib/inputswitch/InputSwitch.js     |  8 ++--
 components/lib/listbox/ListBox.js             |  9 ++--
 components/lib/mention/Mention.js             | 48 +++++++------------
 components/lib/multiselect/MultiSelect.js     |  5 +-
 .../multistatecheckbox/MultiStateCheckbox.js  | 20 ++------
 components/lib/radiobutton/RadioButton.js     |  8 ++--
 components/lib/slider/Slider.js               |  8 ++--
 components/lib/tree/Tree.js                   |  5 +-
 components/lib/treeselect/TreeSelect.js       |  4 +-
 .../lib/tristatecheckbox/TriStateCheckbox.js  | 19 ++------
 components/lib/utils/DomHandler.js            |  9 ++++
 components/lib/utils/ObjectUtils.js           |  8 ++--
 18 files changed, 78 insertions(+), 115 deletions(-)

diff --git a/components/lib/autocomplete/AutoComplete.js b/components/lib/autocomplete/AutoComplete.js
index c316170b0d..4011f6debe 100644
--- 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
index 60834d0bd5..9a6d3d0d48 100644
--- 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
index ee49f5780c..9fc3e73794 100644
--- 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
index a37245d539..edb6b0b6b0 100644
--- 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
index 43d639d4dc..52d41229f8 100644
--- 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
index 85bda359b9..8a4e3f8217 100644
--- 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
index 264b169fcf..6525d6d73e 100644
--- 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
index ddef92a2df..6b5d057bf5 100644
--- 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
index 5253fc5c58..fc63a9958e 100644
--- 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
index c525516cba..2bb6136297 100644
--- 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
index bd9b23b263..4d4a84a2bd 100644
--- 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
diff --git a/components/lib/radiobutton/RadioButton.js b/components/lib/radiobutton/RadioButton.js
index fac8dc1704..248862f8f5 100644
--- a/components/lib/radiobutton/RadioButton.js
+++ b/components/lib/radiobutton/RadioButton.js
@@ -77,7 +77,8 @@ export const RadioButton = React.memo(
 
         const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
         const otherProps = ObjectUtils.findDiffKeys(props, RadioButton.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-radiobutton p-component',
             {
@@ -103,14 +104,13 @@ export const RadioButton = React.memo(
                             type="radio"
                             name={props.name}
                             defaultChecked={props.checked}
-                            aria-labelledby={props['aria-labelledby']}
-                            aria-label={props['aria-label']}
                             onFocus={onFocus}
                             onBlur={onBlur}
                             onKeyDown={onKeyDown}
                             disabled={props.disabled}
                             required={props.required}
                             tabIndex={props.tabIndex}
+                            {...ariaProps}
                             {...dataProps}
                         />
                     </div>
@@ -140,7 +140,5 @@ RadioButton.defaultProps = {
     tabIndex: null,
     tooltip: null,
     tooltipOptions: null,
-    'aria-label': null,
-    'aria-labelledby': null,
     onChange: null
 };
diff --git a/components/lib/slider/Slider.js b/components/lib/slider/Slider.js
index a5390abecf..0b43f02a44 100644
--- a/components/lib/slider/Slider.js
+++ b/components/lib/slider/Slider.js
@@ -198,9 +198,8 @@ export const Slider = React.memo(
                     aria-valuemin={props.min}
                     aria-valuemax={props.max}
                     aria-valuenow={leftValue || bottomValue}
-                    aria-labelledby={props['aria-labelledby']}
-                    aria-label={props['aria-label']}
                     aria-orientation={props.orientation}
+                    {...ariaProps}
                 ></span>
             );
         };
@@ -245,6 +244,7 @@ export const Slider = React.memo(
         }));
 
         const otherProps = ObjectUtils.findDiffKeys(props, Slider.defaultProps);
+        const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
         const className = classNames('p-slider p-component', props.className, {
             'p-disabled': props.disabled,
             'p-slider-horizontal': horizontal,
@@ -275,7 +275,5 @@ Slider.defaultProps = {
     disabled: false,
     tabIndex: 0,
     onChange: null,
-    onSlideEnd: null,
-    'aria-label': null,
-    'aria-labelledby': null
+    onSlideEnd: null
 };
diff --git a/components/lib/tree/Tree.js b/components/lib/tree/Tree.js
index e90f609de9..170818bb0c 100644
--- a/components/lib/tree/Tree.js
+++ b/components/lib/tree/Tree.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { classNames, ObjectUtils } from '../utils/Utils';
+import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
 import { UITreeNode } from './UITreeNode';
 
 export const Tree = React.memo(
@@ -349,7 +349,7 @@ export const Tree = React.memo(
                 const contentClass = classNames('p-tree-container', props.contentClassName);
 
                 return (
-                    <ul className={contentClass} role="tree" aria-label={props.ariaLabel} aria-labelledby={props.ariaLabelledBy} style={props.contentStyle}>
+                    <ul className={contentClass} role="tree" style={props.contentStyle} {...ariaProps}>
                         {rootNodes}
                     </ul>
                 );
@@ -446,6 +446,7 @@ export const Tree = React.memo(
         };
 
         const otherProps = ObjectUtils.findDiffKeys(props, Tree.defaultProps);
+        const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
         const className = classNames('p-tree p-component', props.className, {
             'p-tree-selectable': props.selectionMode,
             'p-tree-loading': props.loading,
diff --git a/components/lib/treeselect/TreeSelect.js b/components/lib/treeselect/TreeSelect.js
index 526e4f74ad..d3ef8b3fbf 100644
--- a/components/lib/treeselect/TreeSelect.js
+++ b/components/lib/treeselect/TreeSelect.js
@@ -348,8 +348,7 @@ export const TreeSelect = React.memo(
                         onKeyDown={onInputKeyDown}
                         disabled={props.disabled}
                         tabIndex={props.tabIndex}
-                        aria-label={props.ariaLabel}
-                        aria-labelledby={props.ariaLabelledBy}
+                        {...ariaProps}
                     />
                 </div>
             );
@@ -507,6 +506,7 @@ export const TreeSelect = React.memo(
         const selectedNodes = getSelectedNodes();
 
         const otherProps = ObjectUtils.findDiffKeys(props, TreeSelect.defaultProps);
+        const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
         const className = classNames(
             'p-treeselect p-component p-inputwrapper',
             {
diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.js b/components/lib/tristatecheckbox/TriStateCheckbox.js
index 221b7b84a1..dba4220eb5 100644
--- a/components/lib/tristatecheckbox/TriStateCheckbox.js
+++ b/components/lib/tristatecheckbox/TriStateCheckbox.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { Tooltip } from '../tooltip/Tooltip';
 import { ariaLabel } from '../api/Api';
-import { classNames, ObjectUtils } from '../utils/Utils';
+import { Tooltip } from '../tooltip/Tooltip';
+import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
 
 export const TriStateCheckbox = React.memo(
     React.forwardRef((props, ref) => {
@@ -58,6 +58,7 @@ export const TriStateCheckbox = React.memo(
 
         const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
         const otherProps = ObjectUtils.findDiffKeys(props, TriStateCheckbox.defaultProps);
+        const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
         const className = classNames('p-tristatecheckbox p-checkbox p-component', props.className);
         const boxClassName = classNames('p-checkbox-box', {
             'p-highlight': (props.value || !props.value) && props.value !== null,
@@ -74,17 +75,7 @@ export const TriStateCheckbox = React.memo(
         return (
             <>
                 <div ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps} onClick={onClick}>
-                    <div
-                        className={boxClassName}
-                        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} tabIndex={props.tabIndex} onFocus={onFocus} onBlur={onBlur} onKeyDown={onKeyDown} role="checkbox" aria-checked={ariaChecked} {...ariaProps}>
                         <span className={iconClassName}></span>
                     </div>
                     {focusedState && (
@@ -109,8 +100,6 @@ TriStateCheckbox.defaultProps = {
     disabled: false,
     readOnly: false,
     tabIndex: '0',
-    'aria-label': null,
-    'aria-labelledby': null,
     tooltip: null,
     tooltipOptions: null,
     onChange: null
diff --git a/components/lib/utils/DomHandler.js b/components/lib/utils/DomHandler.js
index 9157215599..5c27fdba91 100644
--- a/components/lib/utils/DomHandler.js
+++ b/components/lib/utils/DomHandler.js
@@ -1,4 +1,13 @@
 export default class DomHandler {
+    /**
+     * All data- properties like data-test-id
+     */
+    static DATA_PROPS = ['data-'];
+    /**
+     * All ARIA properties like aria-label and focus-target for https://www.npmjs.com/package/@q42/floating-focus-a11y
+     */
+    static ARIA_PROPS = ['aria', 'focus-target'];
+
     static innerWidth(el) {
         if (el) {
             let width = el.offsetWidth;
diff --git a/components/lib/utils/ObjectUtils.js b/components/lib/utils/ObjectUtils.js
index 423c2ca0a6..9d15745235 100644
--- a/components/lib/utils/ObjectUtils.js
+++ b/components/lib/utils/ObjectUtils.js
@@ -103,18 +103,18 @@ export default class ObjectUtils {
      * Removes keys from a JSON object that start with a string such as "data" to get all "data-id" type properties.
      *
      * @param {any} obj the JSON object to reduce
-     * @param {string} startsWith the string to check if the property starts with this key
+     * @param {string} startsWiths the string(s) to check if the property starts with this key
      * @returns the JSON object containing only the key/values that match the startsWith string
      */
-    static reduceKeys(obj, startsWith) {
+    static reduceKeys(obj, ...startsWiths) {
         const result = {};
 
-        if (!obj || !startsWith) {
+        if (!obj || !startsWiths || !startsWiths.length) {
             return result;
         }
 
         Object.keys(obj)
-            .filter((key) => key.startsWith(startsWith))
+            .filter((key) => startsWiths.some((sw) => key.startsWith(sw)))
             .forEach(function (key) {
                 result[key] = obj[key];
                 delete obj[key];