Skip to content

[Select][base] Add attributes to conform with ARIA 1.2 #35182

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
merged 4 commits into from
Nov 18, 2022
Merged

[Select][base] Add attributes to conform with ARIA 1.2 #35182

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dd85d08
[Select][base] Add missing ARIA attributes
michaldudak Nov 17, 2022
d0d7755
Update Joy's Select tests
michaldudak Nov 17, 2022
fd26116
Update integration tests
michaldudak Nov 17, 2022
42160ca
Multiselect tests
michaldudak Nov 17, 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
50 changes: 25 additions & 25 deletions packages/mui-base/src/MultiSelectUnstyled/MultiSelectUnstyled.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,13 +53,13 @@ describe('MultiSelectUnstyled', () => {
it(`opens the dropdown when the "${key}" key is down on the button`, () => {
// can't use the default native `button` as it doesn't treat enter or space press as a click
const { getByRole } = render(<MultiSelectUnstyled slots={{ root: 'div' }} />);
const button = getByRole('button');
const select = getByRole('combobox');
act(() => {
button.focus();
select.focus();
});
fireEvent.keyDown(button, { key });
fireEvent.keyDown(select, { key });

expect(button).to.have.attribute('aria-expanded', 'true');
expect(select).to.have.attribute('aria-expanded', 'true');
expect(getByRole('listbox')).not.to.equal(null);
expect(document.activeElement).to.equal(getByRole('listbox'));
});
Expand All @@ -68,13 +68,13 @@ describe('MultiSelectUnstyled', () => {
it(`opens the dropdown when the " " key is let go on the button`, () => {
// can't use the default native `button` as it doesn't treat enter or space press as a click
const { getByRole } = render(<MultiSelectUnstyled slots={{ root: 'div' }} />);
const button = getByRole('button');
const select = getByRole('combobox');
act(() => {
button.focus();
select.focus();
});
fireEvent.keyUp(button, { key: ' ' });
fireEvent.keyUp(select, { key: ' ' });

expect(button).to.have.attribute('aria-expanded', 'true');
expect(select).to.have.attribute('aria-expanded', 'true');
expect(getByRole('listbox')).not.to.equal(null);
expect(document.activeElement).to.equal(getByRole('listbox'));
});
Expand All @@ -89,9 +89,9 @@ describe('MultiSelectUnstyled', () => {
</MultiSelectUnstyled>,
);

const button = getByRole('button');
const select = getByRole('combobox');
act(() => {
button.click();
select.click();
});

const listbox = getByRole('listbox');
Expand All @@ -100,7 +100,7 @@ describe('MultiSelectUnstyled', () => {
userEvent.keyPress(listbox, { key: 'ArrowDown' }); // highlights '2'
userEvent.keyPress(listbox, { key });

expect(button).to.have.text('2');
expect(select).to.have.text('2');
}),
);
});
Expand All @@ -113,18 +113,18 @@ describe('MultiSelectUnstyled', () => {
</MultiSelectUnstyled>,
);

const button = getByRole('button');
const select = getByRole('combobox');

act(() => {
button.click();
select.click();
});

const listbox = getByRole('listbox');
userEvent.keyPress(listbox, { key: 'ArrowDown' }); // highlights '2'
userEvent.keyPress(listbox, { key: 'Escape' });

expect(button).to.have.attribute('aria-expanded', 'false');
expect(button).to.have.text('1');
expect(select).to.have.attribute('aria-expanded', 'false');
expect(select).to.have.text('1');
expect(queryByRole('listbox')).to.equal(null);
});
});
Expand Down Expand Up @@ -243,9 +243,9 @@ describe('MultiSelectUnstyled', () => {
</MultiSelectUnstyled>,
);

const button = getByRole('button');
const select = getByRole('combobox');
act(() => {
button.click();
select.click();
});

const optionTwo = getByText('Two');
Expand Down Expand Up @@ -299,7 +299,7 @@ describe('MultiSelectUnstyled', () => {
</MultiSelectUnstyled>,
);

expect(getByRole('button')).to.have.text('One (1), Two (2)');
expect(getByRole('combobox')).to.have.text('One (1), Two (2)');
});

it('renders the selected values as comma-separated list of labels if renderValue is not provided', () => {
Expand All @@ -310,7 +310,7 @@ describe('MultiSelectUnstyled', () => {
</MultiSelectUnstyled>,
);

expect(getByRole('button')).to.have.text('One, Two');
expect(getByRole('combobox')).to.have.text('One, Two');
});
});

Expand Down Expand Up @@ -365,10 +365,10 @@ describe('MultiSelectUnstyled', () => {
</div>,
);

const button = getByRole('button');
const select = getByRole('combobox');

act(() => {
button.click();
select.click();
});

const listbox = getByRole('listbox');
Expand All @@ -379,8 +379,8 @@ describe('MultiSelectUnstyled', () => {
focusTarget.focus();
});

expect(button).to.have.attribute('aria-expanded', 'false');
expect(button).to.have.text('1');
expect(select).to.have.attribute('aria-expanded', 'false');
expect(select).to.have.text('1');
});

it('focuses the listbox after it is opened', () => {
Expand All @@ -390,9 +390,9 @@ describe('MultiSelectUnstyled', () => {
</MultiSelectUnstyled>,
);

const button = getByRole('button');
const select = getByRole('combobox');
act(() => {
button.click();
select.click();
});

expect(document.activeElement).to.equal(getByRole('listbox'));
Expand Down
Loading