Skip to content

fix(react-menu): remove unwanted aria attributes on context menu #25615

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bsunderhus merged 2 commits into from
Nov 11, 2022
+57 −47
Merged

fix(react-menu): remove unwanted aria attributes on context menu #25615

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8b7e1ea
fix(react-menu): remove unwanted aria attributes on context menu
bsunderhus Nov 10, 2022
dd4f26b
chore: updates trigger selector for cypress tests
bsunderhus Nov 10, 2022
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
7 changes: 7 additions & 0 deletions change/@fluentui-react-menu-18f45b88-3199-463a-8745-635943d6bccb.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "fix: remove unwanted aria attributes on context menu",
"packageName": "@fluentui/react-menu",
"email": "[email protected]",
"dependentChangeType": "patch"
}
2 changes: 1 addition & 1 deletion packages/react-components/react-menu/etc/react-menu.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,7 +300,7 @@ export const MenuTrigger: React_2.FC<MenuTriggerProps>;

// @public
export type MenuTriggerChildProps<Type extends ARIAButtonType = ARIAButtonType, Props = {}> = ARIAButtonResultProps<Type, Props & {
'aria-haspopup': 'menu';
'aria-haspopup'?: 'menu';
'aria-expanded'?: boolean;
id: string;
ref: React_2.Ref<never>;
Expand Down
73 changes: 37 additions & 36 deletions packages/react-components/react-menu/src/components/Menu/Menu.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
menuTriggerSelector,
menuItemSelector,
menuSelector,
menuTriggerId,
} from '../../testing/selectors';

import {
Expand All @@ -34,7 +35,7 @@ describe('MenuTrigger', () => {
mount(
<Menu>
<MenuTrigger disableButtonEnhancement>
<button>Menu</button>
<button id={menuTriggerId}>Menu</button>
</MenuTrigger>
<MenuPopover>
<MenuList>
Expand All @@ -55,7 +56,7 @@ describe('MenuTrigger', () => {
mount(
<Menu openOnHover hoverDelay={1}>
<MenuTrigger disableButtonEnhancement>
<button>Menu</button>
<button id={menuTriggerId}>Menu</button>
</MenuTrigger>
<MenuPopover>
<MenuList>
Expand All @@ -77,7 +78,7 @@ describe('MenuTrigger', () => {
mount(
<Menu>
<MenuTrigger disableButtonEnhancement>
<button>Menu</button>
<button id={menuTriggerId}>Menu</button>
</MenuTrigger>
<MenuPopover>
<MenuList>
Expand All @@ -101,7 +102,7 @@ describe('MenuTrigger', () => {
mount(
<Menu>
<MenuTrigger disableButtonEnhancement>
<button>Menu</button>
<button id={menuTriggerId}>Menu</button>
</MenuTrigger>
<MenuPopover>
<MenuList>
Expand All @@ -120,7 +121,7 @@ describe('MenuTrigger', () => {
mount(
<Menu>
<MenuTrigger disableButtonEnhancement>
<button>Menu</button>
<button id={menuTriggerId}>Menu</button>
</MenuTrigger>
<MenuPopover>
<MenuList>
Expand All @@ -136,7 +137,7 @@ describe('MenuTrigger', () => {
describe('Custom Trigger', () => {
const CustomMenuTrigger = React.forwardRef<HTMLButtonElement, {}>((props, ref) => {
return (
<button {...props} ref={ref}>
<button id={menuTriggerId} {...props} ref={ref}>
Custom Trigger
</button>
);
Expand Down Expand Up @@ -181,7 +182,7 @@ describe('MenuItem', () => {
mount(
<Menu>
<MenuTrigger disableButtonEnhancement>
<button>Menu</button>
<button id={menuTriggerId}>Menu</button>
</MenuTrigger>
<MenuPopover>
<MenuList>
Expand All @@ -203,7 +204,7 @@ describe('MenuItem', () => {
mount(
<Menu>
<MenuTrigger disableButtonEnhancement>
<button>Menu</button>
<button id={menuTriggerId}>Menu</button>
</MenuTrigger>
<MenuPopover>
<MenuList>
Expand All @@ -225,7 +226,7 @@ describe('MenuItem', () => {
mount(
<Menu>
<MenuTrigger disableButtonEnhancement>
<button>Menu</button>
<button id={menuTriggerId}>Menu</button>
</MenuTrigger>
<MenuPopover>
<MenuList>
Expand All @@ -248,7 +249,7 @@ describe('MenuItemCheckbox', () => {
mount(
<Menu>
<MenuTrigger disableButtonEnhancement>
<button>Menu</button>
<button id={menuTriggerId}>Menu</button>
</MenuTrigger>
<MenuPopover>
<MenuList>
Expand All @@ -272,7 +273,7 @@ describe('MenuItemCheckbox', () => {
mount(
<Menu>
<MenuTrigger disableButtonEnhancement>
<button>Menu</button>
<button id={menuTriggerId}>Menu</button>
</MenuTrigger>
<MenuPopover>
<MenuList>
Expand All @@ -298,7 +299,7 @@ describe('MenuItemRadio', () => {
mount(
<Menu>
<MenuTrigger disableButtonEnhancement>
<button>Menu</button>
<button id={menuTriggerId}>Menu</button>
</MenuTrigger>
<MenuPopover>
<MenuList>
Expand All @@ -323,7 +324,7 @@ describe('MenuItemRadio', () => {
mount(
<Menu>
<MenuTrigger disableButtonEnhancement>
<button>Menu</button>
<button id={menuTriggerId}>Menu</button>
</MenuTrigger>
<MenuPopover>
<MenuList>
Expand Down Expand Up @@ -351,7 +352,7 @@ describe('MenuItemRadio', () => {
mount(
<Menu>
<MenuTrigger disableButtonEnhancement>
<button>Menu</button>
<button id={menuTriggerId}>Menu</button>
</MenuTrigger>
<MenuPopover>
<MenuList>
Expand Down Expand Up @@ -395,7 +396,7 @@ describe('Menu', () => {
mount(
<Menu>
<MenuTrigger disableButtonEnhancement>
<button>Menu</button>
<button id={menuTriggerId}>Menu</button>
</MenuTrigger>
<MenuPopover>
<MenuList>
Expand All @@ -418,7 +419,7 @@ describe('Menu', () => {
mount(
<Menu>
<MenuTrigger disableButtonEnhancement>
<button>Menu</button>
<button id={menuTriggerId}>Menu</button>
</MenuTrigger>
<MenuPopover>
<MenuList>
Expand All @@ -434,7 +435,7 @@ describe('Menu', () => {
mount(
<Menu>
<MenuTrigger disableButtonEnhancement>
<button>Menu</button>
<button id={menuTriggerId}>Menu</button>
</MenuTrigger>
<MenuPopover>
<MenuList>
Expand All @@ -450,7 +451,7 @@ describe('Menu', () => {
mount(
<Menu>
<MenuTrigger disableButtonEnhancement>
<button>Menu</button>
<button id={menuTriggerId}>Menu</button>
</MenuTrigger>
<MenuPopover>
<MenuList>
Expand All @@ -466,7 +467,7 @@ describe('Menu', () => {
mount(
<Menu>
<MenuTrigger disableButtonEnhancement>
<button>Menu</button>
<button id={menuTriggerId}>Menu</button>
</MenuTrigger>
<MenuPopover>
<MenuList>
Expand All @@ -491,7 +492,7 @@ describe('Menu', () => {
mount(
<Menu closeOnScroll>
<MenuTrigger disableButtonEnhancement>
<button>Menu</button>
<button id={menuTriggerId}>Menu</button>
</MenuTrigger>
<MenuPopover>
<MenuList>
Expand All @@ -515,7 +516,7 @@ describe('Menu', () => {
<>
<Menu closeOnScroll>
<MenuTrigger disableButtonEnhancement>
<button>Menu</button>
<button id={menuTriggerId}>Menu</button>
</MenuTrigger>
<MenuPopover>
<MenuList>
Expand All @@ -537,7 +538,7 @@ describe('Menu', () => {
<button>Before</button>
<Menu closeOnScroll>
<MenuTrigger disableButtonEnhancement>
<button>Menu</button>
<button id={menuTriggerId}>Menu</button>
</MenuTrigger>
<MenuPopover>
<MenuList>
Expand All @@ -557,7 +558,7 @@ describe('Menu', () => {
mount(
<Menu>
<MenuTrigger>
<button>Menu</button>
<button id={menuTriggerId}>Menu</button>
</MenuTrigger>
<MenuPopover>
<MenuList>
Expand All @@ -577,7 +578,7 @@ describe('SplitMenuItem', () => {
const example = (
<Menu>
<MenuTrigger disableButtonEnhancement>
<button>Menu</button>
<button id={menuTriggerId}>Menu</button>
</MenuTrigger>
<MenuPopover>
<MenuList>
Expand Down Expand Up @@ -691,7 +692,7 @@ describe(`Nested Menus`, () => {
const UncontrolledExample = () => (
<Menu>
<MenuTrigger disableButtonEnhancement>
<button>Toggle menu</button>
<button id={menuTriggerId}>Toggle menu</button>
</MenuTrigger>

<MenuPopover>
Expand Down Expand Up @@ -785,7 +786,7 @@ describe(`Nested Menus`, () => {
return (
<Menu>
<MenuTrigger disableButtonEnhancement>
<button>Toggle menu</button>
<button id={menuTriggerId}>Toggle menu</button>
</MenuTrigger>

<MenuPopover>
Expand All @@ -811,7 +812,7 @@ describe(`Nested Menus`, () => {
.click()
.get(menuSelector)
.within(() => {
cy.get(menuTriggerSelector).trigger('mousemove');
cy.get(menuItemSelector).eq(4).trigger('mousemove');
})
.get(menuSelector)
.should('have.length', 2)
Expand All @@ -829,7 +830,7 @@ describe(`Nested Menus`, () => {
.click()
.get(menuSelector)
.within(() => {
cy.get(menuTriggerSelector).focus().type(key);
cy.get(menuItemSelector).eq(4).focus().type(key);
})
.get(menuSelector)
.eq(1)
Expand All @@ -846,15 +847,15 @@ describe(`Nested Menus`, () => {
cy.get(menuTriggerSelector).click();

cy.get(menuSelector).within(() => {
cy.get(menuTriggerSelector).trigger('mousemove');
cy.get(menuItemSelector).eq(4).trigger('mousemove');
});
cy.get(menuSelector).should('have.length', 2);

// Mouseout is necessary because internally it will set a flag
cy.get(menuSelector)
.eq(0)
.within(() => {
cy.get(menuTriggerSelector).trigger('mouseout');
cy.get(menuItemSelector).eq(4).trigger('mouseout');
});

// move mouse over first element in nested menu
Expand All @@ -875,7 +876,7 @@ describe(`Nested Menus`, () => {
.click()
.get(menuSelector)
.within(() => {
cy.get(menuTriggerSelector).click().focus().type('{rightarrow}');
cy.get(menuItemSelector).eq(4).click().focus().type('{rightarrow}');
})
.get(menuSelector)
.eq(1)
Expand All @@ -893,7 +894,7 @@ describe(`Nested Menus`, () => {
.click()
.get(menuSelector)
.within(() => {
cy.get(menuTriggerSelector).focus().type('{rightarrow}').focused().type(key);
cy.get(menuItemSelector).eq(4).focus().type('{rightarrow}').focused().type(key);
})
.get(menuSelector)
.should('have.length', 1);
Expand All @@ -906,7 +907,7 @@ describe(`Nested Menus`, () => {
.click()
.get(menuSelector)
.within(() => {
cy.get(menuTriggerSelector).type('{rightarrow}');
cy.get(menuItemSelector).eq(4).type('{rightarrow}');
})
.get(menuSelector)
.eq(1)
Expand All @@ -929,7 +930,7 @@ describe(`Nested Menus`, () => {
.click()
.get(menuSelector)
.within(() => {
cy.get(menuTriggerSelector).type('{rightarrow}');
cy.get(menuItemSelector).eq(4).type('{rightarrow}');
})
.get(menuSelector)
.eq(1)
Expand All @@ -949,7 +950,7 @@ describe(`Nested Menus`, () => {
.click()
.get(menuSelector)
.within(() => {
cy.get(menuTriggerSelector).type('{rightarrow}');
cy.get(menuItemSelector).eq(4).type('{rightarrow}');
})
.get(menuSelector)
.eq(1)
Expand All @@ -964,7 +965,7 @@ describe('Context menu', () => {
const ContextMenuExample = () => (
<Menu openOnContext>
<MenuTrigger disableButtonEnhancement>
<button>trigger</button>
<button id={menuTriggerId}>trigger</button>
</MenuTrigger>
<MenuPopover>
<MenuList>
Expand Down
8 changes: 4 additions & 4 deletions packages/react-components/react-menu/src/components/MenuList/MenuList.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { mount as mountBase } from '@cypress/react';
import { FluentProvider } from '@fluentui/react-provider';
import { teamsLightTheme } from '@fluentui/react-theme';

import { menuTriggerSelector, menuItemSelector, menuSelector } from '../../testing/selectors';
import { menuItemSelector, menuSelector } from '../../testing/selectors';

import { MenuList, MenuItem, Menu, MenuTrigger, MenuPopover } from '@fluentui/react-menu';
const mount = (element: JSX.Element) => {
Expand Down Expand Up @@ -53,19 +53,19 @@ describe('MenuList', () => {

it('should not open a menu trigger with ArrowDown', () => {
mount(<Example />);
cy.get(menuTriggerSelector).focus().type('{downarrow}').get(menuSelector).should('have.length', 1);
cy.get(menuItemSelector).eq(3).focus().type('{downarrow}').get(menuSelector).should('have.length', 1);
});

it('should focus next menuitem from a menu trigger with ArrowDown', () => {
mount(<Example />);
cy.get('body').click().get(menuTriggerSelector).focus().type('{downarrow}');
cy.get('body').click().get(menuItemSelector).eq(3).focus().type('{downarrow}');

cy.focused().get(menuItemSelector).first().should('be.focused');
});

it('should open a menu trigger with ArrowRight', () => {
mount(<Example />);
cy.get(menuTriggerSelector).focus().type('{rightarrow}').get(menuSelector).should('have.length', 2);
cy.get(menuItemSelector).eq(3).focus().type('{rightarrow}').get(menuSelector).should('have.length', 2);
});
});
});
2 changes: 1 addition & 1 deletion packages/react-components/react-menu/src/components/MenuTrigger/MenuTrigger.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export type MenuTriggerProps = TriggerProps<MenuTriggerChildProps> & {
export type MenuTriggerChildProps<Type extends ARIAButtonType = ARIAButtonType, Props = {}> = ARIAButtonResultProps<
Type,
Props & {
'aria-haspopup': 'menu';
'aria-haspopup'?: 'menu';
'aria-expanded'?: boolean;
id: string;
ref: React.Ref<never>;
Expand Down
Loading