Skip to content

Commit 36b65d4

Browse files
Axel-DaMageAxel-DaMage
committed
fix(MenuToggle): address review feedback on aria-haspopup prop
- Remove 'dialog' from aria-haspopup type definition - Update JSDoc comment as suggested - Fix lint errors by placing aria-haspopup on its own line - Set aria-haspopup={false} on static MenuToggle examples - Update snapshots
1 parent 122aebb commit 36b65d4

41 files changed

Lines changed: 150 additions & 62 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,7 @@ exports[`With popover opened 1`] = `
137137
</span>
138138
<button
139139
aria-expanded="false"
140+
aria-haspopup="menu"
140141
class="pf-v6-c-menu-toggle"
141142
data-ouia-component-id="OUIA-Generated-MenuToggle-:r10:"
142143
data-ouia-component-type="PF6/MenuToggle"

‎packages/react-core/src/components/Form/examples/FormState.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,8 @@ export const FormState = () => {
6262
selected={getValue('select-id')}
6363
isOpen={isSelectOpen}
6464
toggle={(toggleRef) => (
65-
<MenuToggle aria-haspopup="listbox"
65+
<MenuToggle
66+
aria-haspopup="listbox"
6667
ref={toggleRef}
6768
onClick={(isOpen) => setIsSelectOpen(isOpen)}
6869
isExpanded={isSelectOpen}

‎packages/react-core/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,8 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
8181
<Select
8282
aria-label="Select Language"
8383
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
84-
<MenuToggle aria-haspopup="listbox"
84+
<MenuToggle
85+
aria-haspopup="listbox"
8586
ref={toggleRef}
8687
onClick={() => setIsHeaderUtilsOpen(!isHeaderUtilsOpen)}
8788
isExpanded={isHeaderUtilsOpen}

‎packages/react-core/src/components/MenuToggle/MenuToggle.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,8 @@ export interface MenuToggleProps
7373
badge?: BadgeProps | React.ReactNode;
7474
/** Adds styling which affects the size of the menu toggle */
7575
size?: 'default' | 'sm';
76-
/** Default value of aria-haspopup */
77-
'aria-haspopup'?: 'menu' | 'listbox' | 'dialog' | boolean;
76+
/** Indicates what type of popup will be triggered by the menu toggle. A value of true is the same as a value of "menu". */
77+
'aria-haspopup'?: 'menu' | 'listbox' | boolean;
7878
/** @hide Forwarded ref */
7979
innerRef?: React.Ref<MenuToggleElement>;
8080
/** Value to overwrite the randomly generated data-ouia-component-id. It will always target the toggle button. */

‎packages/react-core/src/components/MenuToggle/examples/MenuToggleAvatarText.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,13 @@ import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.sv
44

55
export const MenuToggleAvatarText: React.FunctionComponent = () => (
66
<Fragment>
7-
<MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />}>Ned Username</MenuToggle>{' '}
8-
<MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isExpanded>
7+
<MenuToggle aria-haspopup={false} icon={<Avatar src={imgAvatar} alt="avatar" />}>
98
Ned Username
109
</MenuToggle>{' '}
11-
<MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isDisabled>
10+
<MenuToggle aria-haspopup={false} icon={<Avatar src={imgAvatar} alt="avatar" />} isExpanded>
11+
Ned Username
12+
</MenuToggle>{' '}
13+
<MenuToggle aria-haspopup={false} icon={<Avatar src={imgAvatar} alt="avatar" />} isDisabled>
1214
Ned Username
1315
</MenuToggle>
1416
</Fragment>

‎packages/react-core/src/components/MenuToggle/examples/MenuToggleBadge.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,13 @@ import { MenuToggle, Badge } from '@patternfly/react-core';
33

44
export const MenuToggleBadge: React.FunctionComponent = () => (
55
<Fragment>
6-
<MenuToggle badge={<Badge>4 selected</Badge>}>Count</MenuToggle>
7-
<MenuToggle variant="plainText" badge={<Badge screenReaderText="additional items">4</Badge>} />
6+
<MenuToggle aria-haspopup={false} badge={<Badge>4 selected</Badge>}>
7+
Count
8+
</MenuToggle>
9+
<MenuToggle
10+
aria-haspopup={false}
11+
variant="plainText"
12+
badge={<Badge screenReaderText="additional items">4</Badge>}
13+
/>
814
</Fragment>
915
);

‎packages/react-core/src/components/MenuToggle/examples/MenuToggleCollapsed.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
import { MenuToggle } from '@patternfly/react-core';
22

3-
export const MenuToggleCollapsed: React.FunctionComponent = () => <MenuToggle>Collapsed</MenuToggle>;
3+
export const MenuToggleCollapsed: React.FunctionComponent = () => (
4+
<MenuToggle aria-haspopup={false}>Collapsed</MenuToggle>
5+
);

‎packages/react-core/src/components/MenuToggle/examples/MenuToggleCustomIcon.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ import RhUiAddIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-icon';
44

55
export const MenuToggleCustomIcon: React.FC = () => (
66
<Fragment>
7-
<MenuToggle icon={<RhUiAddIcon />} variant="primary">
7+
<MenuToggle aria-haspopup={false} icon={<RhUiAddIcon />} variant="primary">
88
Icon
99
</MenuToggle>{' '}
10-
<MenuToggle icon={<RhUiAddIcon />} variant="secondary">
10+
<MenuToggle aria-haspopup={false} icon={<RhUiAddIcon />} variant="secondary">
1111
Icon
1212
</MenuToggle>{' '}
13-
<MenuToggle icon={<RhUiAddIcon />} variant="secondary" isDisabled>
13+
<MenuToggle aria-haspopup={false} icon={<RhUiAddIcon />} variant="secondary" isDisabled>
1414
Icon
1515
</MenuToggle>
1616
</Fragment>

‎packages/react-core/src/components/MenuToggle/examples/MenuToggleDisabled.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
import { MenuToggle } from '@patternfly/react-core';
22

3-
export const MenuToggleDisabled: React.FunctionComponent = () => <MenuToggle isDisabled>Disabled</MenuToggle>;
3+
export const MenuToggleDisabled: React.FunctionComponent = () => (
4+
<MenuToggle aria-haspopup={false} isDisabled>
5+
Disabled
6+
</MenuToggle>
7+
);

‎packages/react-core/src/components/MenuToggle/examples/MenuToggleExpanded.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
import { MenuToggle } from '@patternfly/react-core';
22

3-
export const MenuToggleExpanded: React.FunctionComponent = () => <MenuToggle isExpanded>Expanded</MenuToggle>;
3+
export const MenuToggleExpanded: React.FunctionComponent = () => (
4+
<MenuToggle aria-haspopup={false} isExpanded>
5+
Expanded
6+
</MenuToggle>
7+
);

0 commit comments

Comments
 (0)