diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js index 1410a90588..067ce70928 100644 --- a/components/lib/multiselect/MultiSelect.js +++ b/components/lib/multiselect/MultiSelect.js @@ -1028,7 +1028,8 @@ export const MultiSelect = React.memo( const hiddenInputWrapperProps = mergeProps( { - className: 'p-hidden-accessible' + className: 'p-hidden-accessible', + 'data-p-hidden-accessible': true }, ptm('hiddenInputWrapper') ); @@ -1051,34 +1052,6 @@ export const MultiSelect = React.memo( ptm('input') ); - const firstHiddenElementProps = mergeProps( - { - ref: firstHiddenFocusableElementOnOverlay, - role: 'presentation', - 'aria-hidden': true, - className: 'p-hidden-accessible p-hidden-focusable', - tabIndex: '0', - onFocus: onFirstHiddenFocus, - 'data-p-hidden-accessible': true, - 'data-p-hidden-focusable': true - }, - ptm('hiddenFirstFocusableEl') - ); - - const lastHiddenElementProps = mergeProps( - { - ref: lastHiddenFocusableElementOnOverlay, - role: 'presentation', - 'aria-hidden': true, - className: 'p-hidden-accessible p-hidden-focusable', - tabIndex: '0', - onFocus: onLastHiddenFocus, - 'data-p-hidden-accessible': true, - 'data-p-hidden-focusable': true - }, - ptm('hiddenLastFocusableEl') - ); - return ( <>
@@ -1092,7 +1065,7 @@ export const MultiSelect = React.memo( {triggerIcon} )} - + -
{hasTooltip && } diff --git a/components/lib/multiselect/MultiSelectPanel.js b/components/lib/multiselect/MultiSelectPanel.js index 588362a156..9dd06a4e2e 100644 --- a/components/lib/multiselect/MultiSelectPanel.js +++ b/components/lib/multiselect/MultiSelectPanel.js @@ -310,12 +310,42 @@ export const MultiSelectPanel = React.memo( getPTOptions('transition') ); + const firstHiddenElementProps = mergeProps( + { + ref: props.firstHiddenFocusableElementOnOverlay, + role: 'presentation', + 'aria-hidden': 'true', + className: 'p-hidden-accessible p-hidden-focusable', + tabIndex: '0', + onFocus: props.onFirstHiddenFocus, + 'data-p-hidden-accessible': true, + 'data-p-hidden-focusable': true + }, + ptm('hiddenFirstFocusableEl') + ); + + const lastHiddenElementProps = mergeProps( + { + ref: props.lastHiddenFocusableElementOnOverlay, + role: 'presentation', + 'aria-hidden': 'true', + className: 'p-hidden-accessible p-hidden-focusable', + tabIndex: '0', + onFocus: props.onLastHiddenFocus, + 'data-p-hidden-accessible': true, + 'data-p-hidden-focusable': true + }, + ptm('hiddenLastFocusableEl') + ); + return (
+ {header} {content} {footer} +
); diff --git a/components/lib/panelmenu/panelmenu.d.ts b/components/lib/panelmenu/panelmenu.d.ts index 5e7948735f..0a3c173c66 100644 --- a/components/lib/panelmenu/panelmenu.d.ts +++ b/components/lib/panelmenu/panelmenu.d.ts @@ -142,6 +142,14 @@ export interface PanelMenuContext { active: boolean; } +/** + * Custom expanded keys metadata. + * @see {@link PanelMenuProps.expandedKeys} + */ +export interface PanelMenuExpandedKeys { + [key: string]: any; +} + interface PanelMenuHeaderItemClickEvent { originalEvent: React.MouseEvent; item: MenuItem; @@ -156,6 +164,11 @@ export interface PanelMenuProps extends Omit { const isDisabled = props.disabled || isOptionDisabled(option); const optionLabel = getOptionLabel(option); - const tabIndex = index === focusedIndex ? '0' : '-1'; + const tabIndex = props.disabled || index !== focusedIndex ? '-1' : '0'; const selected = isSelected(option); const key = optionLabel + '_' + index; diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.js b/components/lib/tristatecheckbox/TriStateCheckbox.js index cc8ab532ff..b4abbdb6d4 100644 --- a/components/lib/tristatecheckbox/TriStateCheckbox.js +++ b/components/lib/tristatecheckbox/TriStateCheckbox.js @@ -117,7 +117,7 @@ export const TriStateCheckbox = React.memo( const checkboxProps = mergeProps( { className: cx('checkbox', { focusedState }), - tabIndex: props.tabIndex, + tabIndex: props.disabled ? '-1' : props.tabIndex, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown,