664 lines
21 KiB
JavaScript
664 lines
21 KiB
JavaScript
|
import * as React from 'react';
|
||
|
|
import { expect } from 'chai';
|
||
|
|
import { spy } from 'sinon';
|
||
|
|
import {
|
||
|
|
act,
|
||
|
|
createRenderer,
|
||
|
|
fireEvent,
|
||
|
|
screen,
|
||
|
|
programmaticFocusTriggersFocusVisible,
|
||
|
|
isJsdom,
|
||
|
|
} from '@mui/internal-test-utils';
|
||
|
|
import MenuList from '@mui/material/MenuList';
|
||
|
|
import MenuItem from '@mui/material/MenuItem';
|
||
|
|
import Divider from '@mui/material/Divider';
|
||
|
|
|
||
|
|
describe('<MenuList> integration', () => {
|
||
|
|
const { clock, render } = createRenderer();
|
||
|
|
|
||
|
|
it('the MenuItems have the `menuitem` role', () => {
|
||
|
|
render(
|
||
|
|
<MenuList>
|
||
|
|
<MenuItem>Menu Item 1</MenuItem>
|
||
|
|
<MenuItem>Menu Item 2</MenuItem>
|
||
|
|
<MenuItem>Menu Item 3</MenuItem>
|
||
|
|
</MenuList>,
|
||
|
|
);
|
||
|
|
|
||
|
|
expect(screen.getAllByRole('menuitem')).to.have.length(3);
|
||
|
|
});
|
||
|
|
|
||
|
|
describe('keyboard controls and tabIndex manipulation', () => {
|
||
|
|
it('the specified item should be in tab order while the rest is focusable', () => {
|
||
|
|
render(
|
||
|
|
<MenuList>
|
||
|
|
<MenuItem tabIndex={0}>Menu Item 1</MenuItem>
|
||
|
|
<MenuItem>Menu Item 2</MenuItem>
|
||
|
|
<MenuItem>Menu Item 3</MenuItem>
|
||
|
|
</MenuList>,
|
||
|
|
);
|
||
|
|
|
||
|
|
const menuitems = screen.getAllByRole('menuitem');
|
||
|
|
|
||
|
|
expect(menuitems[0]).to.have.property('tabIndex', 0);
|
||
|
|
expect(menuitems[1]).to.have.property('tabIndex', -1);
|
||
|
|
expect(menuitems[2]).to.have.property('tabIndex', -1);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('focuses the specified item on mount', () => {
|
||
|
|
render(
|
||
|
|
<MenuList autoFocusItem>
|
||
|
|
<MenuItem>Menu Item 1</MenuItem>
|
||
|
|
<MenuItem>Menu Item 2</MenuItem>
|
||
|
|
<MenuItem>Menu Item 3</MenuItem>
|
||
|
|
</MenuList>,
|
||
|
|
);
|
||
|
|
|
||
|
|
expect(screen.getAllByRole('menuitem')[0]).toHaveFocus();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should select the last item when pressing up if the first item is focused', () => {
|
||
|
|
render(
|
||
|
|
<MenuList autoFocusItem>
|
||
|
|
<MenuItem selected>Menu Item 1</MenuItem>
|
||
|
|
<MenuItem>Menu Item 2</MenuItem>
|
||
|
|
<MenuItem>Menu Item 3</MenuItem>
|
||
|
|
</MenuList>,
|
||
|
|
);
|
||
|
|
|
||
|
|
const menuitems = screen.getAllByRole('menuitem');
|
||
|
|
fireEvent.keyDown(menuitems[0], { key: 'ArrowUp' });
|
||
|
|
|
||
|
|
expect(menuitems[2]).toHaveFocus();
|
||
|
|
expect(menuitems[0]).to.have.property('tabIndex', 0);
|
||
|
|
expect(menuitems[1]).to.have.property('tabIndex', -1);
|
||
|
|
expect(menuitems[2]).to.have.property('tabIndex', -1);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should select the second item when pressing down if the first item is selected', () => {
|
||
|
|
render(
|
||
|
|
<MenuList autoFocusItem>
|
||
|
|
<MenuItem selected>Menu Item 1</MenuItem>
|
||
|
|
<MenuItem>Menu Item 2</MenuItem>
|
||
|
|
<MenuItem>Menu Item 3</MenuItem>
|
||
|
|
</MenuList>,
|
||
|
|
);
|
||
|
|
|
||
|
|
const menuitems = screen.getAllByRole('menuitem');
|
||
|
|
fireEvent.keyDown(menuitems[0], { key: 'ArrowDown' });
|
||
|
|
|
||
|
|
expect(menuitems[1]).toHaveFocus();
|
||
|
|
expect(menuitems[0]).to.have.property('tabIndex', 0);
|
||
|
|
expect(menuitems[1]).to.have.property('tabIndex', -1);
|
||
|
|
expect(menuitems[2]).to.have.property('tabIndex', -1);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should still be focused and focusable when going back and forth', () => {
|
||
|
|
render(
|
||
|
|
<MenuList autoFocusItem>
|
||
|
|
<MenuItem selected>Menu Item 1</MenuItem>
|
||
|
|
<MenuItem>Menu Item 2</MenuItem>
|
||
|
|
<MenuItem>Menu Item 3</MenuItem>
|
||
|
|
</MenuList>,
|
||
|
|
);
|
||
|
|
|
||
|
|
const menuitems = screen.getAllByRole('menuitem');
|
||
|
|
fireEvent.keyDown(menuitems[0], { key: 'ArrowDown' });
|
||
|
|
fireEvent.keyDown(menuitems[1], { key: 'ArrowUp' });
|
||
|
|
|
||
|
|
expect(menuitems[0]).toHaveFocus();
|
||
|
|
expect(menuitems[0]).to.have.property('tabIndex', 0);
|
||
|
|
expect(menuitems[1]).to.have.property('tabIndex', -1);
|
||
|
|
expect(menuitems[2]).to.have.property('tabIndex', -1);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should leave tabIndex on the first item after blur', () => {
|
||
|
|
const handleBlur = spy();
|
||
|
|
|
||
|
|
render(
|
||
|
|
<MenuList autoFocusItem onBlur={handleBlur}>
|
||
|
|
<MenuItem selected>Menu Item 1</MenuItem>
|
||
|
|
<MenuItem>Menu Item 2</MenuItem>
|
||
|
|
<MenuItem>Menu Item 3</MenuItem>
|
||
|
|
</MenuList>,
|
||
|
|
);
|
||
|
|
|
||
|
|
expect(document.activeElement).not.to.equal(null);
|
||
|
|
|
||
|
|
act(() => {
|
||
|
|
document.activeElement.blur();
|
||
|
|
});
|
||
|
|
|
||
|
|
const menuitems = screen.getAllByRole('menuitem');
|
||
|
|
expect(handleBlur.callCount).to.equal(1);
|
||
|
|
expect(menuitems[0]).to.have.property('tabIndex', 0);
|
||
|
|
expect(menuitems[1]).to.have.property('tabIndex', -1);
|
||
|
|
expect(menuitems[2]).to.have.property('tabIndex', -1);
|
||
|
|
expect(menuitems[0]).not.toHaveFocus();
|
||
|
|
expect(menuitems[1]).not.toHaveFocus();
|
||
|
|
expect(menuitems[2]).not.toHaveFocus();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('can imperatively focus the first item', () => {
|
||
|
|
render(
|
||
|
|
<MenuList autoFocusItem>
|
||
|
|
<MenuItem selected>Menu Item 1</MenuItem>
|
||
|
|
<MenuItem>Menu Item 2</MenuItem>
|
||
|
|
<MenuItem>Menu Item 3</MenuItem>
|
||
|
|
</MenuList>,
|
||
|
|
);
|
||
|
|
|
||
|
|
const menuitems = screen.getAllByRole('menuitem');
|
||
|
|
|
||
|
|
act(() => {
|
||
|
|
menuitems[0].focus();
|
||
|
|
});
|
||
|
|
|
||
|
|
expect(menuitems[0]).toHaveFocus();
|
||
|
|
expect(menuitems[0]).to.have.property('tabIndex', 0);
|
||
|
|
expect(menuitems[1]).to.have.property('tabIndex', -1);
|
||
|
|
expect(menuitems[2]).to.have.property('tabIndex', -1);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('down arrow can go to all items while not changing tabIndex', () => {
|
||
|
|
render(
|
||
|
|
<MenuList autoFocusItem>
|
||
|
|
<MenuItem selected>Menu Item 1</MenuItem>
|
||
|
|
<MenuItem>Menu Item 2</MenuItem>
|
||
|
|
<MenuItem>Menu Item 3</MenuItem>
|
||
|
|
</MenuList>,
|
||
|
|
);
|
||
|
|
|
||
|
|
const menuitems = screen.getAllByRole('menuitem');
|
||
|
|
|
||
|
|
fireEvent.keyDown(menuitems[0], { key: 'ArrowDown' });
|
||
|
|
|
||
|
|
expect(menuitems[1]).toHaveFocus();
|
||
|
|
expect(menuitems[0]).to.have.property('tabIndex', 0);
|
||
|
|
expect(menuitems[1]).to.have.property('tabIndex', -1);
|
||
|
|
expect(menuitems[2]).to.have.property('tabIndex', -1);
|
||
|
|
|
||
|
|
fireEvent.keyDown(menuitems[1], { key: 'ArrowDown' });
|
||
|
|
|
||
|
|
expect(menuitems[2]).toHaveFocus();
|
||
|
|
expect(menuitems[0]).to.have.property('tabIndex', 0);
|
||
|
|
expect(menuitems[1]).to.have.property('tabIndex', -1);
|
||
|
|
expect(menuitems[2]).to.have.property('tabIndex', -1);
|
||
|
|
});
|
||
|
|
|
||
|
|
describe('when a modifier key is pressed', () => {
|
||
|
|
it('should not move the focus', () => {
|
||
|
|
render(
|
||
|
|
<MenuList autoFocusItem>
|
||
|
|
<MenuItem selected>Menu Item 1</MenuItem>
|
||
|
|
<MenuItem>Menu Item 2</MenuItem>
|
||
|
|
<MenuItem>Menu Item 3</MenuItem>
|
||
|
|
</MenuList>,
|
||
|
|
);
|
||
|
|
|
||
|
|
const menuitems = screen.getAllByRole('menuitem');
|
||
|
|
fireEvent.keyDown(menuitems[0], { key: 'ArrowDown', ctrlKey: true });
|
||
|
|
expect(menuitems[0]).toHaveFocus();
|
||
|
|
expect(menuitems[1]).not.toHaveFocus();
|
||
|
|
|
||
|
|
fireEvent.keyDown(menuitems[0], { key: 'ArrowDown', altKey: true });
|
||
|
|
expect(menuitems[0]).toHaveFocus();
|
||
|
|
expect(menuitems[1]).not.toHaveFocus();
|
||
|
|
|
||
|
|
fireEvent.keyDown(menuitems[0], { key: 'ArrowDown', metaKey: true });
|
||
|
|
expect(menuitems[0]).toHaveFocus();
|
||
|
|
expect(menuitems[1]).not.toHaveFocus();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should call the onKeyDown and not prevent default on the event', () => {
|
||
|
|
const onKeyDown = spy();
|
||
|
|
|
||
|
|
render(
|
||
|
|
<MenuList autoFocusItem onKeyDown={onKeyDown}>
|
||
|
|
<MenuItem selected>Menu Item 1</MenuItem>
|
||
|
|
<MenuItem>Menu Item 2</MenuItem>
|
||
|
|
<MenuItem>Menu Item 3</MenuItem>
|
||
|
|
</MenuList>,
|
||
|
|
);
|
||
|
|
|
||
|
|
const menuitems = screen.getAllByRole('menuitem');
|
||
|
|
fireEvent.keyDown(menuitems[0], { key: 'ArrowDown', ctrlKey: true });
|
||
|
|
|
||
|
|
expect(onKeyDown.callCount).to.equal(1);
|
||
|
|
expect(onKeyDown.firstCall.args[0]).to.have.property('ctrlKey', true);
|
||
|
|
expect(onKeyDown.firstCall.args[0]).to.have.property('defaultPrevented', false);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
describe('keyboard controls and tabIndex manipulation - preselected item', () => {
|
||
|
|
it('should auto focus the second item', () => {
|
||
|
|
render(
|
||
|
|
<MenuList>
|
||
|
|
<MenuItem>Menu Item 1</MenuItem>
|
||
|
|
<MenuItem autoFocus selected tabIndex={0}>
|
||
|
|
Menu Item 2
|
||
|
|
</MenuItem>
|
||
|
|
<MenuItem>Menu Item 3</MenuItem>
|
||
|
|
</MenuList>,
|
||
|
|
);
|
||
|
|
|
||
|
|
const menuitems = screen.getAllByRole('menuitem');
|
||
|
|
|
||
|
|
expect(menuitems[1]).toHaveFocus();
|
||
|
|
expect(menuitems[0]).to.have.property('tabIndex', -1);
|
||
|
|
expect(menuitems[1]).to.have.property('tabIndex', 0);
|
||
|
|
expect(menuitems[2]).to.have.property('tabIndex', -1);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should focus next item on ArrowDown', () => {
|
||
|
|
render(
|
||
|
|
<MenuList>
|
||
|
|
<MenuItem>Menu Item 1</MenuItem>
|
||
|
|
<MenuItem autoFocus selected tabIndex={0}>
|
||
|
|
Menu Item 2
|
||
|
|
</MenuItem>
|
||
|
|
<MenuItem>Menu Item 3</MenuItem>
|
||
|
|
</MenuList>,
|
||
|
|
);
|
||
|
|
|
||
|
|
const menuitems = screen.getAllByRole('menuitem');
|
||
|
|
|
||
|
|
fireEvent.keyDown(menuitems[1], { key: 'ArrowDown' });
|
||
|
|
|
||
|
|
expect(menuitems[2]).toHaveFocus();
|
||
|
|
expect(menuitems[0]).to.have.property('tabIndex', -1);
|
||
|
|
expect(menuitems[1]).to.have.property('tabIndex', 0);
|
||
|
|
expect(menuitems[2]).to.have.property('tabIndex', -1);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
describe('keyboard controls and tabIndex manipulation - preselected item, no item autoFocus', () => {
|
||
|
|
it('should focus the first item if no item is focused when pressing ArrowDown', () => {
|
||
|
|
render(
|
||
|
|
<MenuList autoFocus>
|
||
|
|
<MenuItem>Menu Item 1</MenuItem>
|
||
|
|
<MenuItem selected>Menu Item 2</MenuItem>
|
||
|
|
<MenuItem>Menu Item 3</MenuItem>
|
||
|
|
</MenuList>,
|
||
|
|
);
|
||
|
|
const menuitems = screen.getAllByRole('menuitem');
|
||
|
|
|
||
|
|
fireEvent.keyDown(screen.getByRole('menu'), { key: 'ArrowDown' });
|
||
|
|
|
||
|
|
expect(menuitems[0]).toHaveFocus();
|
||
|
|
expect(menuitems[0]).to.have.property('tabIndex', -1);
|
||
|
|
expect(menuitems[1]).to.have.property('tabIndex', 0);
|
||
|
|
expect(menuitems[2]).to.have.property('tabIndex', -1);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should focus the third item if no item is focused when pressing ArrowUp', () => {
|
||
|
|
render(
|
||
|
|
<MenuList autoFocus>
|
||
|
|
<MenuItem>Menu Item 1</MenuItem>
|
||
|
|
<MenuItem selected tabIndex={0}>
|
||
|
|
Menu Item 2
|
||
|
|
</MenuItem>
|
||
|
|
<MenuItem>Menu Item 3</MenuItem>
|
||
|
|
</MenuList>,
|
||
|
|
);
|
||
|
|
const menuitems = screen.getAllByRole('menuitem');
|
||
|
|
|
||
|
|
fireEvent.keyDown(screen.getByRole('menu'), { key: 'ArrowUp' });
|
||
|
|
|
||
|
|
expect(menuitems[2]).toHaveFocus();
|
||
|
|
expect(menuitems[0]).to.have.property('tabIndex', -1);
|
||
|
|
expect(menuitems[1]).to.have.property('tabIndex', 0);
|
||
|
|
expect(menuitems[2]).to.have.property('tabIndex', -1);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
it('initial focus is controlled by setting the selected prop when `autoFocusItem` is enabled', () => {
|
||
|
|
render(
|
||
|
|
<MenuList autoFocusItem>
|
||
|
|
<MenuItem>Menu Item 1</MenuItem>
|
||
|
|
<MenuItem>Menu Item 2</MenuItem>
|
||
|
|
<MenuItem selected>Menu Item 3</MenuItem>
|
||
|
|
<MenuItem>Menu Item 4</MenuItem>
|
||
|
|
</MenuList>,
|
||
|
|
);
|
||
|
|
|
||
|
|
const menuitems = screen.getAllByRole('menuitem');
|
||
|
|
|
||
|
|
expect(menuitems[2]).toHaveFocus();
|
||
|
|
expect(menuitems[0]).to.have.property('tabIndex', -1);
|
||
|
|
expect(menuitems[1]).to.have.property('tabIndex', -1);
|
||
|
|
expect(menuitems[2]).to.have.property('tabIndex', 0);
|
||
|
|
expect(menuitems[3]).to.have.property('tabIndex', -1);
|
||
|
|
});
|
||
|
|
|
||
|
|
describe('MenuList with disableListWrap', () => {
|
||
|
|
it('should not wrap focus with ArrowUp from first', () => {
|
||
|
|
render(
|
||
|
|
<MenuList autoFocusItem disableListWrap>
|
||
|
|
<MenuItem selected>Menu Item 1</MenuItem>
|
||
|
|
<MenuItem>Menu Item 2</MenuItem>
|
||
|
|
</MenuList>,
|
||
|
|
);
|
||
|
|
|
||
|
|
const menuitems = screen.getAllByRole('menuitem');
|
||
|
|
|
||
|
|
fireEvent.keyDown(menuitems[0], { key: 'ArrowUp' });
|
||
|
|
|
||
|
|
expect(menuitems[0]).toHaveFocus();
|
||
|
|
expect(menuitems[0]).to.have.property('tabIndex', 0);
|
||
|
|
expect(menuitems[1]).to.have.property('tabIndex', -1);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should not wrap focus with ArrowDown from last', () => {
|
||
|
|
render(
|
||
|
|
<MenuList autoFocusItem disableListWrap>
|
||
|
|
<MenuItem>Menu Item 1</MenuItem>
|
||
|
|
<MenuItem selected>Menu Item 2</MenuItem>
|
||
|
|
</MenuList>,
|
||
|
|
);
|
||
|
|
|
||
|
|
const menuitems = screen.getAllByRole('menuitem');
|
||
|
|
|
||
|
|
fireEvent.keyDown(menuitems[1], { key: 'ArrowDown' });
|
||
|
|
|
||
|
|
expect(menuitems[1]).toHaveFocus();
|
||
|
|
expect(menuitems[0]).to.have.property('tabIndex', -1);
|
||
|
|
expect(menuitems[1]).to.have.property('tabIndex', 0);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should skip divider and disabled menu item', () => {
|
||
|
|
render(
|
||
|
|
<MenuList autoFocus>
|
||
|
|
<MenuItem>Menu Item 1</MenuItem>
|
||
|
|
<Divider component="li" />
|
||
|
|
<MenuItem>Menu Item 2</MenuItem>
|
||
|
|
<MenuItem disabled>Menu Item 3</MenuItem>
|
||
|
|
<MenuItem>Menu Item 4</MenuItem>
|
||
|
|
</MenuList>,
|
||
|
|
);
|
||
|
|
const menuitems = screen.getAllByRole('menuitem');
|
||
|
|
|
||
|
|
fireEvent.keyDown(screen.getByRole('menu'), { key: 'ArrowDown' });
|
||
|
|
expect(menuitems[0]).toHaveFocus();
|
||
|
|
fireEvent.keyDown(menuitems[0], { key: 'ArrowDown' });
|
||
|
|
expect(menuitems[1]).toHaveFocus();
|
||
|
|
fireEvent.keyDown(menuitems[1], { key: 'ArrowDown' });
|
||
|
|
expect(menuitems[3]).toHaveFocus();
|
||
|
|
fireEvent.keyDown(menuitems[3], { key: 'ArrowDown' });
|
||
|
|
expect(menuitems[0]).toHaveFocus();
|
||
|
|
|
||
|
|
// and ArrowUp again
|
||
|
|
fireEvent.keyDown(menuitems[0], { key: 'ArrowUp' });
|
||
|
|
expect(menuitems[3]).toHaveFocus();
|
||
|
|
fireEvent.keyDown(menuitems[3], { key: 'ArrowUp' });
|
||
|
|
expect(menuitems[1]).toHaveFocus();
|
||
|
|
fireEvent.keyDown(menuitems[1], { key: 'ArrowUp' });
|
||
|
|
expect(menuitems[0]).toHaveFocus();
|
||
|
|
fireEvent.keyDown(menuitems[0], { key: 'ArrowUp' });
|
||
|
|
expect(menuitems[3]).toHaveFocus();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should stay on a single item if it is the only focusable one', () => {
|
||
|
|
render(
|
||
|
|
<MenuList autoFocus>
|
||
|
|
<MenuItem disabled>Menu Item 1</MenuItem>
|
||
|
|
<MenuItem>Menu Item 2</MenuItem>
|
||
|
|
<MenuItem disabled>Menu Item 3</MenuItem>
|
||
|
|
<MenuItem disabled>Menu Item 4</MenuItem>
|
||
|
|
</MenuList>,
|
||
|
|
);
|
||
|
|
const menuitems = screen.getAllByRole('menuitem');
|
||
|
|
|
||
|
|
fireEvent.keyDown(screen.getByRole('menu'), { key: 'ArrowDown' });
|
||
|
|
expect(menuitems[1]).toHaveFocus();
|
||
|
|
fireEvent.keyDown(menuitems[1], { key: 'ArrowDown' });
|
||
|
|
expect(menuitems[1]).toHaveFocus();
|
||
|
|
fireEvent.keyDown(menuitems[1], { key: 'ArrowDown' });
|
||
|
|
expect(menuitems[1]).toHaveFocus();
|
||
|
|
fireEvent.keyDown(menuitems[1], { key: 'ArrowUp' });
|
||
|
|
expect(menuitems[1]).toHaveFocus();
|
||
|
|
fireEvent.keyDown(menuitems[1], { key: 'ArrowUp' });
|
||
|
|
expect(menuitems[1]).toHaveFocus();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should keep focus on the menu if all items are disabled', () => {
|
||
|
|
render(
|
||
|
|
<MenuList autoFocus>
|
||
|
|
<MenuItem disabled>Menu Item 1</MenuItem>
|
||
|
|
<MenuItem disabled>Menu Item 2</MenuItem>
|
||
|
|
<MenuItem disabled>Menu Item 3</MenuItem>
|
||
|
|
<MenuItem disabled>Menu Item 4</MenuItem>
|
||
|
|
</MenuList>,
|
||
|
|
);
|
||
|
|
|
||
|
|
const menu = screen.getByRole('menu');
|
||
|
|
|
||
|
|
fireEvent.keyDown(menu, { key: 'Home' });
|
||
|
|
expect(menu).toHaveFocus();
|
||
|
|
fireEvent.keyDown(menu, { key: 'ArrowDown' });
|
||
|
|
expect(menu).toHaveFocus();
|
||
|
|
fireEvent.keyDown(menu, { key: 'ArrowDown' });
|
||
|
|
expect(menu).toHaveFocus();
|
||
|
|
fireEvent.keyDown(menu, { key: 'End' });
|
||
|
|
expect(menu).toHaveFocus();
|
||
|
|
fireEvent.keyDown(menu, { key: 'ArrowUp' });
|
||
|
|
expect(menu).toHaveFocus();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should allow focus on disabled items when disabledItemsFocusable=true', () => {
|
||
|
|
render(
|
||
|
|
<MenuList autoFocus disabledItemsFocusable>
|
||
|
|
<MenuItem disabled>Menu Item 1</MenuItem>
|
||
|
|
<MenuItem disabled>Menu Item 2</MenuItem>
|
||
|
|
<MenuItem disabled>Menu Item 3</MenuItem>
|
||
|
|
<MenuItem disabled>Menu Item 4</MenuItem>
|
||
|
|
</MenuList>,
|
||
|
|
);
|
||
|
|
|
||
|
|
const menuitems = screen.getAllByRole('menuitem');
|
||
|
|
|
||
|
|
fireEvent.keyDown(screen.getByRole('menu'), { key: 'Home' });
|
||
|
|
expect(menuitems[0]).toHaveFocus();
|
||
|
|
fireEvent.keyDown(menuitems[0], { key: 'ArrowDown' });
|
||
|
|
expect(menuitems[1]).toHaveFocus();
|
||
|
|
fireEvent.keyDown(menuitems[1], { key: 'ArrowDown' });
|
||
|
|
expect(menuitems[2]).toHaveFocus();
|
||
|
|
fireEvent.keyDown(menuitems[2], { key: 'End' });
|
||
|
|
expect(menuitems[3]).toHaveFocus();
|
||
|
|
fireEvent.keyDown(menuitems[3], { key: 'ArrowUp' });
|
||
|
|
expect(menuitems[2]).toHaveFocus();
|
||
|
|
});
|
||
|
|
|
||
|
|
describe('MenuList text-based keyboard controls', () => {
|
||
|
|
let innerTextSupported;
|
||
|
|
|
||
|
|
beforeAll(() => {
|
||
|
|
const element = document.createElement('div');
|
||
|
|
element.appendChild(document.createTextNode('Hello, Dave!'));
|
||
|
|
innerTextSupported = element.innerText !== undefined;
|
||
|
|
});
|
||
|
|
|
||
|
|
it('selects the first item starting with the character', () => {
|
||
|
|
render(
|
||
|
|
<MenuList>
|
||
|
|
<MenuItem>Arizona</MenuItem>
|
||
|
|
<MenuItem>Berizona</MenuItem>
|
||
|
|
</MenuList>,
|
||
|
|
);
|
||
|
|
|
||
|
|
const menu = screen.getByRole('menu');
|
||
|
|
act(() => {
|
||
|
|
menu.focus();
|
||
|
|
});
|
||
|
|
|
||
|
|
fireEvent.keyDown(menu, { key: 'a' });
|
||
|
|
|
||
|
|
expect(screen.getByText('Arizona')).toHaveFocus();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should cycle through items when repeating initial character', () => {
|
||
|
|
render(
|
||
|
|
<MenuList>
|
||
|
|
<MenuItem>Arizona</MenuItem>
|
||
|
|
<MenuItem>aardvark</MenuItem>
|
||
|
|
<MenuItem>Colorado</MenuItem>
|
||
|
|
<MenuItem>Argentina</MenuItem>
|
||
|
|
</MenuList>,
|
||
|
|
);
|
||
|
|
|
||
|
|
const menuitems = screen.getAllByRole('menuitem');
|
||
|
|
act(() => {
|
||
|
|
menuitems[0].focus();
|
||
|
|
});
|
||
|
|
|
||
|
|
fireEvent.keyDown(screen.getByText('Arizona'), { key: 'a' });
|
||
|
|
expect(screen.getByText('aardvark')).toHaveFocus();
|
||
|
|
|
||
|
|
fireEvent.keyDown(screen.getByText('aardvark'), { key: 'a' });
|
||
|
|
expect(screen.getByText('Argentina')).toHaveFocus();
|
||
|
|
|
||
|
|
fireEvent.keyDown(screen.getByText('Argentina'), { key: 'r' });
|
||
|
|
expect(screen.getByText('aardvark')).toHaveFocus();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('selects the next item starting with the typed character', () => {
|
||
|
|
render(
|
||
|
|
<MenuList>
|
||
|
|
<MenuItem>Arizona</MenuItem>
|
||
|
|
<MenuItem>Arcansas</MenuItem>
|
||
|
|
</MenuList>,
|
||
|
|
);
|
||
|
|
|
||
|
|
act(() => {
|
||
|
|
screen.getByText('Arizona').focus();
|
||
|
|
});
|
||
|
|
|
||
|
|
fireEvent.keyDown(screen.getByText('Arizona'), { key: 'a' });
|
||
|
|
|
||
|
|
expect(screen.getByText('Arcansas')).toHaveFocus();
|
||
|
|
});
|
||
|
|
|
||
|
|
// JSDOM doesn't support :focus-visible
|
||
|
|
it.skipIf(isJsdom())('should not get focusVisible class on click', async function test() {
|
||
|
|
const { user } = render(
|
||
|
|
<MenuList>
|
||
|
|
<MenuItem focusVisibleClassName="focus-visible">Arizona</MenuItem>
|
||
|
|
</MenuList>,
|
||
|
|
);
|
||
|
|
|
||
|
|
const menuitem = screen.getByText('Arizona');
|
||
|
|
|
||
|
|
await user.click(menuitem);
|
||
|
|
|
||
|
|
expect(menuitem).toHaveFocus();
|
||
|
|
if (programmaticFocusTriggersFocusVisible()) {
|
||
|
|
expect(menuitem).to.have.class('focus-visible');
|
||
|
|
} else {
|
||
|
|
expect(menuitem).not.to.have.class('focus-visible');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should not move focus when no match', () => {
|
||
|
|
render(
|
||
|
|
<MenuList>
|
||
|
|
<MenuItem autoFocus>Arizona</MenuItem>
|
||
|
|
<MenuItem>Berizona</MenuItem>
|
||
|
|
</MenuList>,
|
||
|
|
);
|
||
|
|
|
||
|
|
fireEvent.keyDown(screen.getByText('Arizona'), { key: 'c' });
|
||
|
|
|
||
|
|
expect(screen.getByText('Arizona')).toHaveFocus();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should not move focus when keys match current focus', () => {
|
||
|
|
render(
|
||
|
|
<MenuList>
|
||
|
|
<MenuItem autoFocus>Arizona</MenuItem>
|
||
|
|
<MenuItem>Berizona</MenuItem>
|
||
|
|
</MenuList>,
|
||
|
|
);
|
||
|
|
|
||
|
|
fireEvent.keyDown(screen.getByText('Arizona'), { key: 'A' });
|
||
|
|
|
||
|
|
expect(screen.getByText('Arizona')).toHaveFocus();
|
||
|
|
|
||
|
|
fireEvent.keyDown(screen.getByText('Arizona'), { key: 'r' });
|
||
|
|
|
||
|
|
expect(screen.getByText('Arizona')).toHaveFocus();
|
||
|
|
});
|
||
|
|
|
||
|
|
it("should not move focus if focus starts on descendant and the key doesn't match", () => {
|
||
|
|
render(
|
||
|
|
<MenuList>
|
||
|
|
<MenuItem>Arizona</MenuItem>
|
||
|
|
<MenuItem>
|
||
|
|
<button type="button">Focusable Descendant</button>
|
||
|
|
</MenuItem>
|
||
|
|
</MenuList>,
|
||
|
|
);
|
||
|
|
|
||
|
|
const button = screen.getByText('Focusable Descendant');
|
||
|
|
act(() => {
|
||
|
|
button.focus();
|
||
|
|
});
|
||
|
|
|
||
|
|
fireEvent.keyDown(button, { key: 'z' });
|
||
|
|
|
||
|
|
expect(button).toHaveFocus();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('matches rapidly typed text', () => {
|
||
|
|
render(
|
||
|
|
<MenuList autoFocus>
|
||
|
|
<MenuItem>War</MenuItem>
|
||
|
|
<MenuItem>Worm</MenuItem>
|
||
|
|
<MenuItem>Ordinary</MenuItem>
|
||
|
|
</MenuList>,
|
||
|
|
);
|
||
|
|
|
||
|
|
fireEvent.keyDown(screen.getByRole('menu'), { key: 'W' });
|
||
|
|
fireEvent.keyDown(screen.getByText('War'), { key: 'o' });
|
||
|
|
|
||
|
|
expect(screen.getByText('Worm')).toHaveFocus();
|
||
|
|
});
|
||
|
|
|
||
|
|
describe('time', () => {
|
||
|
|
clock.withFakeTimers();
|
||
|
|
|
||
|
|
it('should reset the character buffer after 500ms', () => {
|
||
|
|
render(
|
||
|
|
<MenuList autoFocus>
|
||
|
|
<MenuItem>Worm</MenuItem>
|
||
|
|
<MenuItem>Ordinary</MenuItem>
|
||
|
|
</MenuList>,
|
||
|
|
);
|
||
|
|
|
||
|
|
fireEvent.keyDown(screen.getByRole('menu'), { key: 'W' });
|
||
|
|
clock.tick(501);
|
||
|
|
fireEvent.keyDown(screen.getByText('Worm'), { key: 'o' });
|
||
|
|
expect(screen.getByText('Ordinary')).toHaveFocus();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Will only be executed in browser tests, since jsdom doesn't support innerText
|
||
|
|
it.skipIf(!innerTextSupported)('should match ignoring hidden text', function testHiddenText() {
|
||
|
|
render(
|
||
|
|
<MenuList autoFocus>
|
||
|
|
<MenuItem>
|
||
|
|
W<span style={{ display: 'none' }}>Should not block type focus</span>orm
|
||
|
|
</MenuItem>
|
||
|
|
<MenuItem>Ordinary</MenuItem>
|
||
|
|
</MenuList>,
|
||
|
|
);
|
||
|
|
|
||
|
|
fireEvent.keyDown(screen.getByRole('menu'), { key: 'W' });
|
||
|
|
fireEvent.keyDown(screen.getByText('Worm'), { key: 'o' });
|
||
|
|
|
||
|
|
expect(screen.getByText('Worm')).toHaveFocus();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|