mirror of
https://github.com/material-components/material-web.git
synced 2024-08-17 09:30:27 +03:00
BREAKING CHANGE: `querySelector` for `[role]` and `[aria-*]` attributes may no longer work. See `@material/web/migrations/v2/README.md` and `@material/web/migrations/v2/query-selector-aria.ts`. Browser/SR test results (go/mwc-double-aria-test-results) - ✅ VoiceOver on Chrome - ✅ VoiceOver on iOS Safari - ✅ TalkBack on Chrome - ✅ ChromeVox on Chrome - ✅ NVDA on Chrome - ✅ NVDA on Firefox - ✅ JAWS on Chrome - ✅ JAWS on Firefox (Optional) - ❓ VoiceOver on Safari - ❓ VoiceOver on Firefox PiperOrigin-RevId: 648859827
88 lines
2.3 KiB
TypeScript
88 lines
2.3 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright 2024 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
import '@material/web/checkbox/checkbox.js';
|
|
import {html} from 'lit';
|
|
|
|
import {Environment} from '../../testing/environment.js';
|
|
import {ariaSelector} from './query-selector-aria.js';
|
|
|
|
describe('query-selector-aria', () => {
|
|
const env = new Environment();
|
|
|
|
it('is needed when querying by aria attribute selectors fails', () => {
|
|
// Arrange
|
|
const root = env.render(
|
|
html`<md-checkbox aria-label="Agree"></md-checkbox>`,
|
|
);
|
|
|
|
// Act
|
|
const checkbox = root.querySelector('[aria-label="Agree"]');
|
|
|
|
// Assert
|
|
expect(checkbox)
|
|
.withContext('aria attribute query expected to fail without patches')
|
|
.toBeNull();
|
|
});
|
|
|
|
describe('ariaSelector()', () => {
|
|
it('returns the element with an aria attribute query', () => {
|
|
// Arrange
|
|
const root = env.render(
|
|
html`<md-checkbox aria-label="Agree"></md-checkbox>`,
|
|
);
|
|
|
|
// Act
|
|
const element = root.querySelector(ariaSelector('[aria-label="Agree"]'));
|
|
|
|
// Assert
|
|
expect(element).withContext('queried element').not.toBeNull();
|
|
});
|
|
|
|
it('returns the element with a role attribute query', () => {
|
|
// Arrange
|
|
const root = env.render(html`<md-checkbox role="radio"></md-checkbox>`);
|
|
|
|
// Act
|
|
const element = root.querySelector(ariaSelector('[role="radio"]'));
|
|
|
|
// Assert
|
|
expect(element).withContext('queried element').not.toBeNull();
|
|
});
|
|
|
|
it('returns the element when combined with other selectors', () => {
|
|
// Arrange
|
|
const root = env.render(html`
|
|
<md-checkbox
|
|
class="checkbox"
|
|
aria-label="Agree"
|
|
aria-haspopup="true"></md-checkbox>
|
|
`);
|
|
|
|
// Act
|
|
const element = root.querySelector(
|
|
ariaSelector('.checkbox[aria-label="Agree"][aria-haspopup="true"]'),
|
|
);
|
|
|
|
// Assert
|
|
expect(element).withContext('queried element').not.toBeNull();
|
|
});
|
|
|
|
it('returns expected elements when not using aria attribute selectors', () => {
|
|
// Arrange
|
|
const root = env.render(html`
|
|
<md-checkbox class="checkbox"></md-checkbox>
|
|
`);
|
|
|
|
// Act
|
|
const element = root.querySelector(ariaSelector('.checkbox'));
|
|
|
|
// Assert
|
|
expect(element).withContext('queried element').not.toBeNull();
|
|
});
|
|
});
|
|
});
|