diff --git a/packages-internal/test-utils/src/initMatchers.ts b/packages-internal/test-utils/src/initMatchers.ts index 7152482da1ebfa..c7beae7871e1c2 100644 --- a/packages-internal/test-utils/src/initMatchers.ts +++ b/packages-internal/test-utils/src/initMatchers.ts @@ -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' }) @@ -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 so that failed assertion message only prints - // or below. use cases for aria-hidden on 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'); diff --git a/packages/mui-base/src/unstable_useModal/ModalManager.test.ts b/packages/mui-base/src/unstable_useModal/ModalManager.test.ts index a53aa83068124b..021c32a36c2d47 100644 --- a/packages/mui-base/src/unstable_useModal/ModalManager.test.ts +++ b/packages/mui-base/src/unstable_useModal/ModalManager.test.ts @@ -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(() => { @@ -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', () => { @@ -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); } }); @@ -394,13 +394,13 @@ 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', () => { @@ -408,9 +408,9 @@ 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[0]).toBeInaccessible(); }); it('should keep previous aria-hidden siblings hidden', () => { @@ -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(); }); }); }); diff --git a/packages/mui-joy/src/Modal/Modal.test.tsx b/packages/mui-joy/src/Modal/Modal.test.tsx index 3b85c31d58feee..422cdde727952c 100644 --- a/packages/mui-joy/src/Modal/Modal.test.tsx +++ b/packages/mui-joy/src/Modal/Modal.test.tsx @@ -275,10 +275,10 @@ describe('', () => { , ); const modalNode = modalRef.current; - expect(modalNode).toBeAriaHidden(); + expect(modalNode).toBeInaccessible(); setProps({ open: true }); - expect(modalNode).not.toBeAriaHidden(); + expect(modalNode).not.toBeInaccessible(); }); }); diff --git a/packages/mui-material/src/FormLabel/FormLabel.test.js b/packages/mui-material/src/FormLabel/FormLabel.test.js index 4595e95aa0327d..bc4e0a7a553747 100644 --- a/packages/mui-material/src/FormLabel/FormLabel.test.js +++ b/packages/mui-material/src/FormLabel/FormLabel.test.js @@ -28,7 +28,7 @@ describe('', () => { 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', () => { @@ -45,7 +45,7 @@ describe('', () => { 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); }); }); diff --git a/packages/mui-material/src/Modal/Modal.test.js b/packages/mui-material/src/Modal/Modal.test.js index 872a5e18460c73..ad45d45e919082 100644 --- a/packages/mui-material/src/Modal/Modal.test.js +++ b/packages/mui-material/src/Modal/Modal.test.js @@ -396,10 +396,10 @@ describe('', () => { , ); 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 diff --git a/packages/mui-material/src/Modal/ModalManager.test.ts b/packages/mui-material/src/Modal/ModalManager.test.ts index a53aa83068124b..021c32a36c2d47 100644 --- a/packages/mui-material/src/Modal/ModalManager.test.ts +++ b/packages/mui-material/src/Modal/ModalManager.test.ts @@ -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(() => { @@ -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', () => { @@ -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); } }); @@ -394,13 +394,13 @@ 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', () => { @@ -408,9 +408,9 @@ 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[0]).toBeInaccessible(); }); it('should keep previous aria-hidden siblings hidden', () => { @@ -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(); }); }); });