Skip to content

Commit

Permalink
[core] Replace toBeAriaHidden matcher with toBeInaccessible in te…
Browse files Browse the repository at this point in the history 
…sts (#43870)
  • Loading branch information
@ZeeshanTamboli
ZeeshanTamboli authored Sep 27, 2024
1 parent 34b7684 commit d72cbe7
Show file tree
Hide file tree
Showing 6 changed files with 48 additions and 88 deletions.
40 changes: 0 additions & 40 deletions packages-internal/test-utils/src/initMatchers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,6 @@ const isKarma = Boolean(process.env.KARMA);
declare global {
namespace Chai {
interface Assertion {
/**
* Checks if the element in question is considered `aria-hidden`.
* Does not replace accessibility check as that requires display/visibility/layout
* @deprecated Use `inaccessible` + `visible` instead
*/
toBeAriaHidden(): void;
/**
* Checks `expectedStyle` is a subset of the elements inline style i.e. `element.style`.
* @example expect(element).toHaveInlineStyle({ width: '200px' })
Expand Down Expand Up @@ -215,40 +209,6 @@ chai.use((chaiAPI, utils) => {
);
});

chai.Assertion.addMethod('toBeAriaHidden', function elementIsAccessible() {
const element = utils.flag(this, 'object');

// used for debugging failed assertions, will either point to the top most node
// or the node that had aria-hidden="true"
let previousNode = element;
let currentNode = element;
let ariaHidden = false;
// "An element is considered hidden if it, or any of its ancestors are not
// rendered or have their aria-hidden attribute value set to true."
// -- https://www.w3.org/TR/wai-aria-1.1/#aria-hidden
while (
currentNode !== null &&
// stopping at <html /> so that failed assertion message only prints
// <body /> or below. use cases for aria-hidden on <html /> are unknown
currentNode !== document.documentElement &&
ariaHidden === false
) {
ariaHidden = currentNode.getAttribute('aria-hidden') === 'true';
previousNode = currentNode;
currentNode = currentNode.parentElement;
}

this.assert(
ariaHidden === true,
`expected \n${elementToString(element)} to be aria-hidden`,
`expected \n${elementToString(element)} to not be aria-hidden, but \n${elementToString(
previousNode,
)} had aria-hidden="true" instead`,
// Not interested in a diff but the typings require the 4th parameter.
undefined,
);
});

chai.Assertion.addMethod('toBeInaccessible', function elementIsAccessible() {
const element = utils.flag(this, 'object');

Expand Down
42 changes: 21 additions & 21 deletions packages/mui-base/src/unstable_useModal/ModalManager.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -297,17 +297,17 @@ describe('ModalManager', () => {
const modal2 = getDummyModal();
modalManager.add(modal1, container3);
modalManager.mount(modal1, {});
expect(container3.children[0]).toBeAriaHidden();
expect(container3.children[0]).toBeInaccessible();

modalManager.add(modal2, container4);
modalManager.mount(modal2, {});
expect(container4.children[0]).toBeAriaHidden();
expect(container4.children[0]).toBeInaccessible();

modalManager.remove(modal2);
expect(container4.children[0]).not.toBeAriaHidden();
expect(container4.children[0]).not.toBeInaccessible();

modalManager.remove(modal1);
expect(container3.children[0]).not.toBeAriaHidden();
expect(container3.children[0]).not.toBeInaccessible();
});

afterEach(() => {
Expand Down Expand Up @@ -338,17 +338,17 @@ describe('ModalManager', () => {
const modal2 = document.createElement('div');
modal2.setAttribute('aria-hidden', 'true');

expect(modal2).toBeAriaHidden();
expect(modal2).toBeInaccessible();
modalManager.add({ ...getDummyModal(), modalRef: modal2 }, container2);
expect(modal2).not.toBeAriaHidden();
expect(modal2).not.toBeInaccessible();
});

it('should add aria-hidden to container siblings', () => {
const secondSibling = document.createElement('input');
container2.appendChild(secondSibling);
modalManager.add(getDummyModal(), container2);
expect(container2.children[0]).toBeAriaHidden();
expect(container2.children[1]).toBeAriaHidden();
expect(container2.children[0]).toBeInaccessible();
expect(container2.children[1]).toBeInaccessible();
});

it('should not add aria-hidden to forbidden container siblings', () => {
Expand Down Expand Up @@ -379,9 +379,9 @@ describe('ModalManager', () => {
expect(container2.children.length).equal(numberOfChildren);

modalManager.add(getDummyModal(), container2);
expect(container2.children[0]).toBeAriaHidden();
expect(container2.children[0]).toBeInaccessible();
for (let i = 1; i < numberOfChildren; i += 1) {
expect(container2.children[i]).not.toBeAriaHidden();
expect(container2.children[i].getAttribute('aria-hidden')).to.equal(null);
}
});

Expand All @@ -394,23 +394,23 @@ describe('ModalManager', () => {

modalManager.add({ ...getDummyModal(), modalRef: modal2 }, container2);
// Simulate the main React DOM true.
expect(container2.children[0]).toBeAriaHidden();
expect(container2.children[1]).not.toBeAriaHidden();
expect(container2.children[0]).toBeInaccessible();
expect(container2.children[1]).not.toBeInaccessible();

modalManager.add({ ...getDummyModal(), modalRef: modal3 }, container2);
expect(container2.children[0]).toBeAriaHidden();
expect(container2.children[1]).toBeAriaHidden();
expect(container2.children[2]).not.toBeAriaHidden();
expect(container2.children[0]).toBeInaccessible();
expect(container2.children[1]).toBeInaccessible();
expect(container2.children[2]).not.toBeInaccessible();
});

it('should remove aria-hidden on siblings', () => {
const modal = { ...getDummyModal(), modalRef: container2.children[0] };

modalManager.add(modal, container2);
modalManager.mount(modal, {});
expect(container2.children[0]).not.toBeAriaHidden();
expect(container2.children[0]).not.toBeInaccessible();
modalManager.remove(modal);
expect(container2.children[0]).toBeAriaHidden();
expect(container2.children[0]).toBeInaccessible();
});

it('should keep previous aria-hidden siblings hidden', () => {
Expand All @@ -425,11 +425,11 @@ describe('ModalManager', () => {

modalManager.add(modal, container2);
modalManager.mount(modal, {});
expect(container2.children[0]).not.toBeAriaHidden();
expect(container2.children[0]).not.toBeInaccessible();
modalManager.remove(modal);
expect(container2.children[0]).toBeAriaHidden();
expect(container2.children[1]).toBeAriaHidden();
expect(container2.children[2]).not.toBeAriaHidden();
expect(container2.children[0]).toBeInaccessible();
expect(container2.children[1]).toBeInaccessible();
expect(container2.children[2]).not.toBeInaccessible();
});
});
});
4 changes: 2 additions & 2 deletions packages/mui-joy/src/Modal/Modal.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -275,10 +275,10 @@ describe('<Modal />', () => {
</Modal>,
);
const modalNode = modalRef.current;
expect(modalNode).toBeAriaHidden();
expect(modalNode).toBeInaccessible();

setProps({ open: true });
expect(modalNode).not.toBeAriaHidden();
expect(modalNode).not.toBeInaccessible();
});
});

Expand Down
4 changes: 2 additions & 2 deletions packages/mui-material/src/FormLabel/FormLabel.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ describe('<FormLabel />', () => {

expect(container.querySelector('label')).to.have.text('name\u2009*');
expect(container.querySelectorAll(`.${classes.asterisk}`)).to.have.lengthOf(1);
expect(container.querySelectorAll(`.${classes.asterisk}`)[0]).toBeAriaHidden();
expect(container.querySelectorAll(`.${classes.asterisk}`)[0]).toBeInaccessible();
});

it('should not show an asterisk by default', () => {
Expand All @@ -45,7 +45,7 @@ describe('<FormLabel />', () => {

expect(container.querySelectorAll(`.${classes.asterisk}`)).to.have.lengthOf(1);
expect(container.querySelector(`.${classes.asterisk}`)).to.have.class(classes.error);
expect(container.querySelectorAll(`.${classes.asterisk}`)[0]).toBeAriaHidden();
expect(container.querySelectorAll(`.${classes.asterisk}`)[0]).toBeInaccessible();
expect(container.firstChild).to.have.class(classes.error);
});
});
Expand Down
4 changes: 2 additions & 2 deletions packages/mui-material/src/Modal/Modal.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -396,10 +396,10 @@ describe('<Modal />', () => {
</Modal>,
);
const modalNode = modalRef.current;
expect(modalNode).toBeAriaHidden();
expect(modalNode).toBeInaccessible();

setProps({ open: true });
expect(modalNode).not.toBeAriaHidden();
expect(modalNode).not.toBeInaccessible();
});

// Test case for https://github.com/mui/material-ui/issues/15180
Expand Down
42 changes: 21 additions & 21 deletions packages/mui-material/src/Modal/ModalManager.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -297,17 +297,17 @@ describe('ModalManager', () => {
const modal2 = getDummyModal();
modalManager.add(modal1, container3);
modalManager.mount(modal1, {});
expect(container3.children[0]).toBeAriaHidden();
expect(container3.children[0]).toBeInaccessible();

modalManager.add(modal2, container4);
modalManager.mount(modal2, {});
expect(container4.children[0]).toBeAriaHidden();
expect(container4.children[0]).toBeInaccessible();

modalManager.remove(modal2);
expect(container4.children[0]).not.toBeAriaHidden();
expect(container4.children[0]).not.toBeInaccessible();

modalManager.remove(modal1);
expect(container3.children[0]).not.toBeAriaHidden();
expect(container3.children[0]).not.toBeInaccessible();
});

afterEach(() => {
Expand Down Expand Up @@ -338,17 +338,17 @@ describe('ModalManager', () => {
const modal2 = document.createElement('div');
modal2.setAttribute('aria-hidden', 'true');

expect(modal2).toBeAriaHidden();
expect(modal2).toBeInaccessible();
modalManager.add({ ...getDummyModal(), modalRef: modal2 }, container2);
expect(modal2).not.toBeAriaHidden();
expect(modal2).not.toBeInaccessible();
});

it('should add aria-hidden to container siblings', () => {
const secondSibling = document.createElement('input');
container2.appendChild(secondSibling);
modalManager.add(getDummyModal(), container2);
expect(container2.children[0]).toBeAriaHidden();
expect(container2.children[1]).toBeAriaHidden();
expect(container2.children[0]).toBeInaccessible();
expect(container2.children[1]).toBeInaccessible();
});

it('should not add aria-hidden to forbidden container siblings', () => {
Expand Down Expand Up @@ -379,9 +379,9 @@ describe('ModalManager', () => {
expect(container2.children.length).equal(numberOfChildren);

modalManager.add(getDummyModal(), container2);
expect(container2.children[0]).toBeAriaHidden();
expect(container2.children[0]).toBeInaccessible();
for (let i = 1; i < numberOfChildren; i += 1) {
expect(container2.children[i]).not.toBeAriaHidden();
expect(container2.children[i].getAttribute('aria-hidden')).to.equal(null);
}
});

Expand All @@ -394,23 +394,23 @@ describe('ModalManager', () => {

modalManager.add({ ...getDummyModal(), modalRef: modal2 }, container2);
// Simulate the main React DOM true.
expect(container2.children[0]).toBeAriaHidden();
expect(container2.children[1]).not.toBeAriaHidden();
expect(container2.children[0]).toBeInaccessible();
expect(container2.children[1]).not.toBeInaccessible();

modalManager.add({ ...getDummyModal(), modalRef: modal3 }, container2);
expect(container2.children[0]).toBeAriaHidden();
expect(container2.children[1]).toBeAriaHidden();
expect(container2.children[2]).not.toBeAriaHidden();
expect(container2.children[0]).toBeInaccessible();
expect(container2.children[1]).toBeInaccessible();
expect(container2.children[2]).not.toBeInaccessible();
});

it('should remove aria-hidden on siblings', () => {
const modal = { ...getDummyModal(), modalRef: container2.children[0] };

modalManager.add(modal, container2);
modalManager.mount(modal, {});
expect(container2.children[0]).not.toBeAriaHidden();
expect(container2.children[0]).not.toBeInaccessible();
modalManager.remove(modal);
expect(container2.children[0]).toBeAriaHidden();
expect(container2.children[0]).toBeInaccessible();
});

it('should keep previous aria-hidden siblings hidden', () => {
Expand All @@ -425,11 +425,11 @@ describe('ModalManager', () => {

modalManager.add(modal, container2);
modalManager.mount(modal, {});
expect(container2.children[0]).not.toBeAriaHidden();
expect(container2.children[0]).not.toBeInaccessible();
modalManager.remove(modal);
expect(container2.children[0]).toBeAriaHidden();
expect(container2.children[1]).toBeAriaHidden();
expect(container2.children[2]).not.toBeAriaHidden();
expect(container2.children[0]).toBeInaccessible();
expect(container2.children[1]).toBeInaccessible();
expect(container2.children[2]).not.toBeInaccessible();
});
});
});

0 comments on commit d72cbe7

Please sign in to comment.