From 122aebb485483b5f0f401ca7f1210a4708b476e6 Mon Sep 17 00:00:00 2001 From: NULL Date: Thu, 9 Jul 2026 13:43:52 -0400 Subject: [PATCH 1/3] feat(MenuToggle): add aria-haspopup prop Adds the aria-haspopup prop to MenuToggle with a default value of 'menu'. Updates all Select implementations across examples and demos to explicitly pass aria-haspopup="listbox" to properly reflect their semantic role, addressing issue #11792 (PF-1704). --- .../src/components/Form/examples/FormState.tsx | 2 +- .../LoginPage/examples/LoginPageLanguageSelect.tsx | 2 +- .../react-core/src/components/MenuToggle/MenuToggle.tsx | 9 ++++++++- .../__tests__/__snapshots__/MenuToggle.test.tsx.snap | 9 +++++++++ .../src/components/Select/examples/SelectBasic.tsx | 2 +- .../src/components/Select/examples/SelectCheckbox.tsx | 2 +- .../src/components/Select/examples/SelectFooter.tsx | 2 +- .../src/components/Select/examples/SelectGrouped.tsx | 2 +- .../components/Select/examples/SelectMultiTypeahead.tsx | 2 +- .../Select/examples/SelectMultiTypeaheadCheckbox.tsx | 2 +- .../Select/examples/SelectMultiTypeaheadCreatable.tsx | 2 +- .../Select/examples/SelectOptionVariations.tsx | 2 +- .../src/components/Select/examples/SelectTypeahead.tsx | 2 +- .../Select/examples/SelectTypeaheadCreatable.tsx | 2 +- .../src/components/Select/examples/SelectValidated.tsx | 2 +- .../src/components/Select/examples/SelectViewMore.tsx | 2 +- .../examples/ToolbarComponentManagedToggleGroups.tsx | 4 ++-- .../examples/ToolbarConsumerManagedToggleGroups.tsx | 4 ++-- .../Toolbar/examples/ToolbarCustomLabelGroupContent.tsx | 4 ++-- .../src/components/Toolbar/examples/ToolbarGroups.tsx | 6 +++--- .../src/components/Toolbar/examples/ToolbarStacked.tsx | 4 ++-- .../components/Toolbar/examples/ToolbarWithFilters.tsx | 4 ++-- .../src/components/Tooltip/examples/TooltipOptions.tsx | 4 ++-- 23 files changed, 46 insertions(+), 30 deletions(-) diff --git a/packages/react-core/src/components/Form/examples/FormState.tsx b/packages/react-core/src/components/Form/examples/FormState.tsx index 2431e47990d..1b5ab4be089 100644 --- a/packages/react-core/src/components/Form/examples/FormState.tsx +++ b/packages/react-core/src/components/Form/examples/FormState.tsx @@ -62,7 +62,7 @@ export const FormState = () => { selected={getValue('select-id')} isOpen={isSelectOpen} toggle={(toggleRef) => ( - setIsSelectOpen(isOpen)} isExpanded={isSelectOpen} diff --git a/packages/react-core/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx b/packages/react-core/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx index 12abe7a9448..b32dc7b343b 100644 --- a/packages/react-core/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx +++ b/packages/react-core/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx @@ -81,7 +81,7 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => { ) => ( - onStatusToggle()} isExpanded={statusIsExpanded} @@ -92,7 +92,7 @@ export const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () => ) => ( - onStatusToggle()} isExpanded={statusIsExpanded} @@ -97,7 +97,7 @@ export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () => ) => ( - onToggle('first')} isExpanded={firstIsExpanded} @@ -91,7 +91,7 @@ export const ToolbarGroups: React.FunctionComponent = () => { ) => ( - onToggle('third')} isExpanded={thirdIsExpanded} diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx index 1d917f43baf..6a770a039fe 100644 --- a/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx @@ -135,7 +135,7 @@ export const ToolbarStacked: React.FunctionComponent = () => { ) => ( - onStatusToggle()} isExpanded={statusIsExpanded} diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx index 1bf48886d70..b98acdf2001 100644 --- a/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx @@ -146,7 +146,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => { aria-label="Status" role="menu" toggle={(toggleRef: React.Ref) => ( - { aria-label="Risk" role="menu" toggle={(toggleRef: React.Ref) => ( - { position (will flip if enableFlip is true). The 'auto' position requires enableFlip to be set to true. ) => ( - setIsHeaderUtilsOpen(!isHeaderUtilsOpen)} isExpanded={isHeaderUtilsOpen} diff --git a/packages/react-core/src/components/MenuToggle/MenuToggle.tsx b/packages/react-core/src/components/MenuToggle/MenuToggle.tsx index 34543a6e840..aa5f8d6ba12 100644 --- a/packages/react-core/src/components/MenuToggle/MenuToggle.tsx +++ b/packages/react-core/src/components/MenuToggle/MenuToggle.tsx @@ -73,8 +73,8 @@ export interface MenuToggleProps badge?: BadgeProps | React.ReactNode; /** Adds styling which affects the size of the menu toggle */ size?: 'default' | 'sm'; - /** Default value of aria-haspopup */ - 'aria-haspopup'?: 'menu' | 'listbox' | 'dialog' | boolean; + /** Indicates what type of popup will be triggered by the menu toggle. A value of true is the same as a value of "menu". */ + 'aria-haspopup'?: 'menu' | 'listbox' | boolean; /** @hide Forwarded ref */ innerRef?: React.Ref; /** Value to overwrite the randomly generated data-ouia-component-id. It will always target the toggle button. */ diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleAvatarText.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleAvatarText.tsx index 42be54a9d37..9d724600967 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggleAvatarText.tsx +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleAvatarText.tsx @@ -4,11 +4,13 @@ import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.sv export const MenuToggleAvatarText: React.FunctionComponent = () => ( - }>Ned Username{' '} - } isExpanded> + }> Ned Username {' '} - } isDisabled> + } isExpanded> + Ned Username + {' '} + } isDisabled> Ned Username diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleBadge.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleBadge.tsx index 146acf1e4d8..5ee93051caa 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggleBadge.tsx +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleBadge.tsx @@ -3,7 +3,13 @@ import { MenuToggle, Badge } from '@patternfly/react-core'; export const MenuToggleBadge: React.FunctionComponent = () => ( - 4 selected}>Count - 4} /> + 4 selected}> + Count + + 4} + /> ); diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleCollapsed.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleCollapsed.tsx index de713ef28c1..eb956f79294 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggleCollapsed.tsx +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleCollapsed.tsx @@ -1,3 +1,5 @@ import { MenuToggle } from '@patternfly/react-core'; -export const MenuToggleCollapsed: React.FunctionComponent = () => Collapsed; +export const MenuToggleCollapsed: React.FunctionComponent = () => ( + Collapsed +); diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleCustomIcon.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleCustomIcon.tsx index 34a1511e7d0..8e5b8a94723 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggleCustomIcon.tsx +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleCustomIcon.tsx @@ -4,13 +4,13 @@ import RhUiAddIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-icon'; export const MenuToggleCustomIcon: React.FC = () => ( - } variant="primary"> + } variant="primary"> Icon {' '} - } variant="secondary"> + } variant="secondary"> Icon {' '} - } variant="secondary" isDisabled> + } variant="secondary" isDisabled> Icon diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleDisabled.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleDisabled.tsx index ea6e5d4cfa6..1c960982542 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggleDisabled.tsx +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleDisabled.tsx @@ -1,3 +1,7 @@ import { MenuToggle } from '@patternfly/react-core'; -export const MenuToggleDisabled: React.FunctionComponent = () => Disabled; +export const MenuToggleDisabled: React.FunctionComponent = () => ( + + Disabled + +); diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleExpanded.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleExpanded.tsx index 67663d3c33a..f1b5db9a671 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggleExpanded.tsx +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleExpanded.tsx @@ -1,3 +1,7 @@ import { MenuToggle } from '@patternfly/react-core'; -export const MenuToggleExpanded: React.FunctionComponent = () => Expanded; +export const MenuToggleExpanded: React.FunctionComponent = () => ( + + Expanded + +); diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleFullHeight.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleFullHeight.tsx index cb8c1d076c1..7491903a0de 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggleFullHeight.tsx +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleFullHeight.tsx @@ -2,7 +2,7 @@ import { MenuToggle } from '@patternfly/react-core'; export const MenuToggleFullHeight: React.FunctionComponent = () => (
- + Full height
diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleFullWidth.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleFullWidth.tsx index 2f6e25976ea..5f0d47ee94a 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggleFullWidth.tsx +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleFullWidth.tsx @@ -1,7 +1,7 @@ import { MenuToggle } from '@patternfly/react-core'; export const MenuToggleFullWidth: React.FunctionComponent = () => ( - + Full width ); diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleInForm.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleInForm.tsx index ad8065565e4..8134bd2c3ca 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggleInForm.tsx +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleInForm.tsx @@ -1,7 +1,7 @@ import { MenuToggle } from '@patternfly/react-core'; export const MenuToggleInForm = (): JSX.Element => ( - + In form ); diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuTogglePlaceholder.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuTogglePlaceholder.tsx index 025974d48c1..2309c5d833f 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuTogglePlaceholder.tsx +++ b/packages/react-core/src/components/MenuToggle/examples/MenuTogglePlaceholder.tsx @@ -1,5 +1,7 @@ import { MenuToggle } from '@patternfly/react-core'; export const MenuTogglePlaceholder: React.FunctionComponent = () => ( - Placeholder text + + Placeholder text + ); diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuTogglePlainCircle.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuTogglePlainCircle.tsx index 14cb70847b7..149026e0bb9 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuTogglePlainCircle.tsx +++ b/packages/react-core/src/components/MenuToggle/examples/MenuTogglePlainCircle.tsx @@ -4,7 +4,13 @@ import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons export const MenuTogglePlainCircle: React.FunctionComponent = () => ( - } variant="plain" aria-label="plain circle kebab" />{' '} + } + variant="plain" + aria-label="plain circle kebab" + />{' '} } diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuTogglePlainIcon.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuTogglePlainIcon.tsx index 97c243744d9..27bc88a4d0d 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuTogglePlainIcon.tsx +++ b/packages/react-core/src/components/MenuToggle/examples/MenuTogglePlainIcon.tsx @@ -4,8 +4,25 @@ import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons export const MenuTogglePlainIcon: React.FunctionComponent = () => ( - } variant="plain" aria-label="plain kebab" />{' '} - } variant="plain" isExpanded aria-label="plain expanded kebab" />{' '} - } variant="plain" isDisabled aria-label="disabled plain kebab" /> + } + variant="plain" + aria-label="plain kebab" + />{' '} + } + variant="plain" + isExpanded + aria-label="plain expanded kebab" + />{' '} + } + variant="plain" + isDisabled + aria-label="disabled plain kebab" + /> ); diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuTogglePlainTextLabel.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuTogglePlainTextLabel.tsx index 61075b810c9..4a1915731c7 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuTogglePlainTextLabel.tsx +++ b/packages/react-core/src/components/MenuToggle/examples/MenuTogglePlainTextLabel.tsx @@ -3,13 +3,13 @@ import { MenuToggle } from '@patternfly/react-core'; export const MenuTogglePlainTextLabel: React.FunctionComponent = () => ( - + Disabled {' '} - + Custom text {' '} - + Custom text (expanded) diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleSettings.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleSettings.tsx index 4b078c6cdd0..5af18e1e2f6 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggleSettings.tsx +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleSettings.tsx @@ -3,6 +3,9 @@ import { MenuToggle } from '@patternfly/react-core'; export const MenuToggleSettings: React.FunctionComponent = () => ( - Settings + + Settings + {' '} + ); diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleSmall.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleSmall.tsx index 9a43cb3a3c5..2fefd174cef 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggleSmall.tsx +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleSmall.tsx @@ -1,3 +1,7 @@ import { MenuToggle } from '@patternfly/react-core'; -export const MenuToggleSmall: React.FunctionComponent = () => Small toggle; +export const MenuToggleSmall: React.FunctionComponent = () => ( + + Small toggle + +); diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleStatus.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleStatus.tsx index f86e5b3e300..1ecb12d402e 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggleStatus.tsx +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleStatus.tsx @@ -3,16 +3,22 @@ import { MenuToggle, HelperText, HelperTextItem } from '@patternfly/react-core'; export const MenuToggleStatus: React.FunctionComponent = () => ( - Success + + Success +

- Warning + + Warning + Warning text that explains the issue.

- Danger + + Danger + Danger text that explains the issue. diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx index 7c384689810..37466217084 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx @@ -16,7 +16,7 @@ export const MenuToggleTypeahead: React.FunctionComponent = () => { }; return ( - + ( - Collapsed{' '} - + + Collapsed + {' '} + Expanded {' '} - + Disabled diff --git a/packages/react-core/src/components/Select/examples/SelectBasic.tsx b/packages/react-core/src/components/Select/examples/SelectBasic.tsx index c034cabac79..47e4f61ae2b 100644 --- a/packages/react-core/src/components/Select/examples/SelectBasic.tsx +++ b/packages/react-core/src/components/Select/examples/SelectBasic.tsx @@ -19,7 +19,8 @@ export const SelectBasic: React.FunctionComponent = () => { }; const toggle = (toggleRef: React.Ref) => ( - { }; const toggle = (toggleRef: React.Ref) => ( - { }; const toggle = (toggleRef) => ( - { }; const toggle = (toggleRef: React.Ref) => ( - { }; const toggle = (toggleRef: React.Ref) => ( - { }; const toggle = (toggleRef: React.Ref) => ( - { const getChildren = (value: string) => initialSelectOptions.find((option) => option.value === value)?.children; const toggle = (toggleRef: React.Ref) => ( - { }; const toggle = (toggleRef: React.Ref) => ( - { }; const toggle = (toggleRef: React.Ref) => ( - { }; const toggle = (toggleRef: React.Ref) => ( - { }; const toggle = (toggleRef: React.Ref) => ( - { }; const toggle = ( - ) => ( - onRiskToggle()} isExpanded={riskIsExpanded} diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx index 6e102994a67..6060bfdb477 100644 --- a/packages/react-core/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx @@ -67,7 +67,8 @@ export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () => ) => ( - onRiskToggle()} isExpanded={riskIsExpanded} diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarCustomLabelGroupContent.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarCustomLabelGroupContent.tsx index 275b68d5e05..3c879ef73c2 100644 --- a/packages/react-core/src/components/Toolbar/examples/ToolbarCustomLabelGroupContent.tsx +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarCustomLabelGroupContent.tsx @@ -109,7 +109,8 @@ export const ToolbarCustomLabelGroupContent: React.FunctionComponent = () => { aria-label="Status" role="menu" toggle={(toggleRef: React.Ref) => ( - setStatusIsExpanded(!statusIsExpanded)} isExpanded={statusIsExpanded} @@ -141,7 +142,8 @@ export const ToolbarCustomLabelGroupContent: React.FunctionComponent = () => { aria-label="Risk" role="menu" toggle={(toggleRef: React.Ref) => ( - setRiskIsExpanded(!riskIsExpanded)} isExpanded={riskIsExpanded} diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarGroups.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarGroups.tsx index 00d5f3487c4..5e3ec6a0950 100644 --- a/packages/react-core/src/components/Toolbar/examples/ToolbarGroups.tsx +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarGroups.tsx @@ -61,7 +61,8 @@ export const ToolbarGroups: React.FunctionComponent = () => { ) => ( - onToggle('second')} isExpanded={secondIsExpanded} @@ -121,7 +123,8 @@ export const ToolbarGroups: React.FunctionComponent = () => { ) => ( - onResourceToggle()} isExpanded={resourceIsExpanded} @@ -169,7 +170,8 @@ export const ToolbarStacked: React.FunctionComponent = () => { ) => ( - setPositionSelectOpen(!positionSelectOpen)} isExpanded={positionSelectOpen} @@ -191,7 +192,8 @@ export const TooltipOptions: React.FunctionComponent = () => { isOpen={flipSelectOpen} selected={flipBehavior} toggle={(toggleRef: React.Ref) => ( - setFlipSelectOpen(!flipSelectOpen)} isExpanded={flipSelectOpen} From 939ea13763837327b75248dc27a9e207c42f62bd Mon Sep 17 00:00:00 2001 From: NULL Date: Wed, 15 Jul 2026 13:29:02 -0400 Subject: [PATCH 3/3] fix(MenuToggle): update react-templates and react-table snapshots --- .../__snapshots__/Table.test.tsx.snap | 19 +++++++++++++++++++ .../SimpleDropdown.test.tsx.snap | 2 ++ .../CheckboxSelectSnapshots.test.tsx.snap | 2 ++ .../MultiTypeaheadSelect.test.tsx.snap | 1 + .../__snapshots__/SimpleSelect.test.tsx.snap | 2 ++ .../TypeaheadSelect.test.tsx.snap | 1 + 6 files changed, 27 insertions(+) diff --git a/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap b/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap index 31de3d5c48f..796d02fa856 100644 --- a/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap +++ b/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap @@ -160,6 +160,7 @@ exports[`Table Actions table 1`] = ` >