Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export const FormState = () => {
selected={getValue('select-id')}
isOpen={isSelectOpen}
toggle={(toggleRef) => (
<MenuToggle
<MenuToggle aria-haspopup="listbox"
ref={toggleRef}
onClick={(isOpen) => setIsSelectOpen(isOpen)}
isExpanded={isSelectOpen}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
<Select
aria-label="Select Language"
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
<MenuToggle aria-haspopup="listbox"
ref={toggleRef}
onClick={() => setIsHeaderUtilsOpen(!isHeaderUtilsOpen)}
isExpanded={isHeaderUtilsOpen}
Expand Down
9 changes: 8 additions & 1 deletion packages/react-core/src/components/MenuToggle/MenuToggle.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +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;
/** @hide Forwarded ref */
innerRef?: React.Ref<MenuToggleElement>;
/** Value to overwrite the randomly generated data-ouia-component-id. It will always target the toggle button. */
Expand All @@ -95,7 +97,8 @@ class MenuToggleBase extends Component<MenuToggleProps> {
isDocked: false,
isTextExpanded: false,
size: 'default',
ouiaSafe: true
ouiaSafe: true,
'aria-haspopup': 'menu'
};

render() {
Expand All @@ -121,6 +124,7 @@ class MenuToggleBase extends Component<MenuToggleProps> {
innerRef,
onClick,
'aria-label': ariaLabel,
'aria-haspopup': ariaHasPopup,
ouiaId,
ouiaSafe,
size,
Expand Down Expand Up @@ -171,6 +175,7 @@ class MenuToggleBase extends Component<MenuToggleProps> {
type="button"
className={css(styles.menuToggleButton)}
aria-expanded={isExpanded}
aria-haspopup={ariaHasPopup}
onClick={onClick}
aria-label={ariaLabel || 'Menu toggle'}
tabIndex={-1}
Expand Down Expand Up @@ -231,6 +236,7 @@ class MenuToggleBase extends Component<MenuToggleProps> {
className={css(styles.menuToggleButton, children && styles.modifiers.text)}
type="button"
aria-expanded={isExpanded}
aria-haspopup={ariaHasPopup}
aria-label={ariaLabel}
disabled={isDisabled}
onClick={onClick}
Expand All @@ -249,6 +255,7 @@ class MenuToggleBase extends Component<MenuToggleProps> {
className={css(commonStyles, isCircle && isPlain && styles.modifiers.circle)}
type="button"
aria-label={ariaLabel}
aria-haspopup={ariaHasPopup}
aria-expanded={isExpanded}
ref={innerRef as React.Ref<HTMLButtonElement>}
disabled={isDisabled}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ exports[`Old Snapshot tests - remove when refactoring passes additional classes
<DocumentFragment>
<button
aria-expanded="false"
aria-haspopup="menu"
class="pf-v6-c-menu-toggle test-class"
data-ouia-component-id="OUIA-Generated-MenuToggle-:r3:"
data-ouia-component-type="PF6/MenuToggle"
Expand Down Expand Up @@ -44,6 +45,7 @@ exports[`Old Snapshot tests - remove when refactoring renders successfully 1`] =
<DocumentFragment>
<button
aria-expanded="false"
aria-haspopup="menu"
class="pf-v6-c-menu-toggle"
data-ouia-component-id="OUIA-Generated-MenuToggle-:r1:"
data-ouia-component-type="PF6/MenuToggle"
Expand Down Expand Up @@ -84,6 +86,7 @@ exports[`Old Snapshot tests - remove when refactoring shows badge 1`] = `
<DocumentFragment>
<button
aria-expanded="false"
aria-haspopup="menu"
class="pf-v6-c-menu-toggle"
data-ouia-component-id="OUIA-Generated-MenuToggle-:rh:"
data-ouia-component-type="PF6/MenuToggle"
Expand Down Expand Up @@ -133,6 +136,7 @@ exports[`Old Snapshot tests - remove when refactoring shows icon 1`] = `
<DocumentFragment>
<button
aria-expanded="false"
aria-haspopup="menu"
class="pf-v6-c-menu-toggle"
data-ouia-component-id="OUIA-Generated-MenuToggle-:rf:"
data-ouia-component-type="PF6/MenuToggle"
Expand Down Expand Up @@ -190,6 +194,7 @@ exports[`Old Snapshot tests - remove when refactoring shows isDisabled 1`] = `
<DocumentFragment>
<button
aria-expanded="false"
aria-haspopup="menu"
class="pf-v6-c-menu-toggle pf-m-disabled"
data-ouia-component-id="OUIA-Generated-MenuToggle-:r7:"
data-ouia-component-type="PF6/MenuToggle"
Expand Down Expand Up @@ -231,6 +236,7 @@ exports[`Old Snapshot tests - remove when refactoring shows isExpanded 1`] = `
<DocumentFragment>
<button
aria-expanded="true"
aria-haspopup="menu"
class="pf-v6-c-menu-toggle pf-m-expanded"
data-ouia-component-id="OUIA-Generated-MenuToggle-:r5:"
data-ouia-component-type="PF6/MenuToggle"
Expand Down Expand Up @@ -271,6 +277,7 @@ exports[`Old Snapshot tests - remove when refactoring shows isPlain 1`] = `
<DocumentFragment>
<button
aria-expanded="false"
aria-haspopup="menu"
class="pf-v6-c-menu-toggle pf-m-plain"
data-ouia-component-id="OUIA-Generated-MenuToggle-plain-:rb:"
data-ouia-component-type="PF6/MenuToggle"
Expand Down Expand Up @@ -302,6 +309,7 @@ exports[`Old Snapshot tests - remove when refactoring shows isPrimary 1`] = `
<DocumentFragment>
<button
aria-expanded="false"
aria-haspopup="menu"
class="pf-v6-c-menu-toggle pf-m-primary"
data-ouia-component-id="OUIA-Generated-MenuToggle-primary-:r9:"
data-ouia-component-type="PF6/MenuToggle"
Expand Down Expand Up @@ -342,6 +350,7 @@ exports[`Old Snapshot tests - remove when refactoring shows plain text 1`] = `
<DocumentFragment>
<button
aria-expanded="false"
aria-haspopup="menu"
class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:rd:"
data-ouia-component-type="PF6/MenuToggle"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const SelectBasic: React.FunctionComponent = () => {
};

const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
<MenuToggle aria-haspopup="listbox"
ref={toggleRef}
onClick={onToggleClick}
isExpanded={isOpen}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const SelectCheckbox: React.FunctionComponent = () => {
};

const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
<MenuToggle aria-haspopup="listbox"
ref={toggleRef}
onClick={onToggleClick}
isExpanded={isOpen}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const SelectFooter: React.FunctionComponent = () => {
};

const toggle = (toggleRef) => (
<MenuToggle
<MenuToggle aria-haspopup="listbox"
ref={toggleRef}
onClick={onToggleClick}
isExpanded={isOpen}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export const SelectGrouped: React.FunctionComponent = () => {
};

const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
<MenuToggle aria-haspopup="listbox"
ref={toggleRef}
onClick={onToggleClick}
isExpanded={isOpen}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
};

const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
<MenuToggle aria-haspopup="listbox"
variant="typeahead"
aria-label="Multi typeahead menu toggle"
onClick={onToggleClick}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@ export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
};

const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
<MenuToggle aria-haspopup="listbox"
variant="typeahead"
aria-label="Multi typeahead checkbox menu toggle"
onClick={onToggleClick}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,7 @@ export const SelectMultiTypeaheadCreatable: React.FunctionComponent = () => {
const getChildren = (value: string) => initialSelectOptions.find((option) => option.value === value)?.children;

const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
<MenuToggle aria-haspopup="listbox"
variant="typeahead"
aria-label="Multi typeahead creatable menu toggle"
onClick={onToggleClick}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const SelectOptionVariations: React.FunctionComponent = () => {
};

const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
<MenuToggle aria-haspopup="listbox"
ref={toggleRef}
onClick={onToggleClick}
isExpanded={isOpen}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,7 @@ export const SelectTypeahead: React.FunctionComponent = () => {
};

const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
<MenuToggle aria-haspopup="listbox"
ref={toggleRef}
variant="typeahead"
aria-label="Typeahead menu toggle"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ export const SelectTypeaheadCreatable: React.FunctionComponent = () => {
};

const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
<MenuToggle aria-haspopup="listbox"
ref={toggleRef}
variant="typeahead"
aria-label="Typeahead creatable menu toggle"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export const SelectValidated: React.FunctionComponent = () => {
};

const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
<MenuToggle aria-haspopup="listbox"
ref={toggleRef}
onClick={onToggleClick}
isExpanded={isOpen}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ export const SelectViewMore: React.FunctionComponent = () => {
};

const toggle = (
<MenuToggle
<MenuToggle aria-haspopup="listbox"
ref={toggleRef}
onClick={onToggleClick}
isExpanded={isOpen}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () =>
<ToolbarItem>
<Select
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
<MenuToggle aria-haspopup="listbox"
ref={toggleRef}
onClick={() => onStatusToggle()}
isExpanded={statusIsExpanded}
Expand Down Expand Up @@ -92,7 +92,7 @@ export const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () =>
<ToolbarItem>
<Select
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
<MenuToggle aria-haspopup="listbox"
ref={toggleRef}
onClick={() => onRiskToggle()}
isExpanded={riskIsExpanded}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () =>
<ToolbarItem>
<Select
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
<MenuToggle aria-haspopup="listbox"
ref={toggleRef}
onClick={() => onStatusToggle()}
isExpanded={statusIsExpanded}
Expand Down Expand Up @@ -97,7 +97,7 @@ export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () =>
<ToolbarItem>
<Select
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
<MenuToggle aria-haspopup="listbox"
ref={toggleRef}
onClick={() => onRiskToggle()}
isExpanded={riskIsExpanded}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ export const ToolbarCustomLabelGroupContent: React.FunctionComponent = () => {
aria-label="Status"
role="menu"
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
<MenuToggle aria-haspopup="listbox"
ref={toggleRef}
onClick={() => setStatusIsExpanded(!statusIsExpanded)}
isExpanded={statusIsExpanded}
Expand Down Expand Up @@ -141,7 +141,7 @@ export const ToolbarCustomLabelGroupContent: React.FunctionComponent = () => {
aria-label="Risk"
role="menu"
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
<MenuToggle aria-haspopup="listbox"
ref={toggleRef}
onClick={() => setRiskIsExpanded(!riskIsExpanded)}
isExpanded={riskIsExpanded}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export const ToolbarGroups: React.FunctionComponent = () => {
<ToolbarItem>
<Select
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
<MenuToggle aria-haspopup="listbox"
ref={toggleRef}
onClick={() => onToggle('first')}
isExpanded={firstIsExpanded}
Expand Down Expand Up @@ -91,7 +91,7 @@ export const ToolbarGroups: React.FunctionComponent = () => {
<ToolbarItem>
<Select
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
<MenuToggle aria-haspopup="listbox"
ref={toggleRef}
onClick={() => onToggle('second')}
isExpanded={secondIsExpanded}
Expand Down Expand Up @@ -121,7 +121,7 @@ export const ToolbarGroups: React.FunctionComponent = () => {
<ToolbarItem>
<Select
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
<MenuToggle aria-haspopup="listbox"
ref={toggleRef}
onClick={() => onToggle('third')}
isExpanded={thirdIsExpanded}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
<ToolbarItem>
<Select
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
<MenuToggle aria-haspopup="listbox"
ref={toggleRef}
onClick={() => onResourceToggle()}
isExpanded={resourceIsExpanded}
Expand Down Expand Up @@ -169,7 +169,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
<ToolbarItem>
<Select
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
<MenuToggle aria-haspopup="listbox"
ref={toggleRef}
onClick={() => onStatusToggle()}
isExpanded={statusIsExpanded}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
aria-label="Status"
role="menu"
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
<MenuToggle aria-haspopup="listbox"
ref={toggleRef}
onClick={onStatusToggle}
isExpanded={isStatusExpanded}
Expand Down Expand Up @@ -177,7 +177,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
aria-label="Risk"
role="menu"
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
<MenuToggle aria-haspopup="listbox"
ref={toggleRef}
onClick={onRiskToggle}
isExpanded={isRiskExpanded}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ export const TooltipOptions: React.FunctionComponent = () => {
position (will flip if enableFlip is true). The 'auto' position requires enableFlip to be set to true.
<Select
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
<MenuToggle aria-haspopup="listbox"
ref={toggleRef}
onClick={() => setPositionSelectOpen(!positionSelectOpen)}
isExpanded={positionSelectOpen}
Expand Down Expand Up @@ -191,7 +191,7 @@ export const TooltipOptions: React.FunctionComponent = () => {
isOpen={flipSelectOpen}
selected={flipBehavior}
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
<MenuToggle aria-haspopup="listbox"
ref={toggleRef}
onClick={() => setFlipSelectOpen(!flipSelectOpen)}
isExpanded={flipSelectOpen}
Expand Down