Skip to content
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.

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

[material-ui][Select] Improve a11y by adding combobox role and aria-controls attribute #38785

Merged
merged 9 commits into from
Sep 27, 2023
Original file line number Diff line number Diff line change
@@ -101,8 +101,8 @@ describe('<TablePagination />', () => {
);

// will be `getByRole('combobox')` in aria 1.2
const [combobox] = getAllByRole('button');
expect(combobox).toHaveAccessibleName('lines per page: 10');
const [combobox] = getAllByRole('combobox');
DiegoAndai marked this conversation as resolved.
Show resolved Hide resolved
expect(combobox).toHaveAccessibleName('lines per page:');
});

it('accepts React nodes', () => {
@@ -128,14 +128,14 @@ describe('<TablePagination />', () => {
);

// will be `getByRole('combobox')` in aria 1.2
const [combobox] = getAllByRole('button');
expect(combobox).toHaveAccessibleName('lines per page: 10');
const [combobox] = getAllByRole('combobox');
expect(combobox).toHaveAccessibleName('lines per page:');
DiegoAndai marked this conversation as resolved.
Show resolved Hide resolved
});
});

describe('prop: page', () => {
it('should disable the back button on the first page', () => {
const { getAllByRole } = render(
const { getByRole } = render(
<table>
<TableFooter>
<TableRow>
@@ -151,13 +151,14 @@ describe('<TablePagination />', () => {
</table>,
);

const [, backButton, nextButton] = getAllByRole('button');
const backButton = getByRole('button', { name: 'Go to previous page' });
const nextButton = getByRole('button', { name: 'Go to next page' });
expect(backButton).to.have.property('disabled', true);
expect(nextButton).to.have.property('disabled', false);
});

it('should disable the next button on the last page', () => {
const { getAllByRole } = render(
const { getByRole } = render(
<table>
<TableFooter>
<TableRow>
@@ -173,7 +174,8 @@ describe('<TablePagination />', () => {
</table>,
);

const [, backButton, nextButton] = getAllByRole('button');
const backButton = getByRole('button', { name: 'Go to previous page' });
const nextButton = getByRole('button', { name: 'Go to next page' });
expect(backButton).to.have.property('disabled', false);
expect(nextButton).to.have.property('disabled', true);
});
@@ -398,8 +400,8 @@ describe('<TablePagination />', () => {
);

// will be `getByRole('combobox')` in aria 1.2
const [combobox] = getAllByRole('button');
expect(combobox).toHaveAccessibleName('Rows per page: 10');
const [combobox] = getAllByRole('combobox');
expect(combobox).toHaveAccessibleName('Rows per page:');
});
});

Loading