Skip to content

Commit

Permalink
fix(react-menu): remove unwanted aria attributes on context menu (mic…
Browse files Browse the repository at this point in the history 
…rosoft#25615)

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

* chore: updates trigger selector for cypress tests
  • Loading branch information
@bsunderhus @NotWoods
bsunderhus authored and NotWoods committed Nov 18, 2022
1 parent 1f2acb8 commit ff17659
Show file tree
Hide file tree
Showing 7 changed files with 57 additions and 47 deletions.
7 changes: 7 additions & 0 deletions change/@fluentui-react-menu-18f45b88-3199-463a-8745-635943d6bccb.json
View file
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
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
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
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
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

0 comments on commit ff17659

Please sign in to comment.