Dialog: update ARIA attributes #587

eBay · Jan 13, 2020 · 1828115 · 1828115
1 parent abbe039
commit 1828115
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 8 deletions.
diff --git a/src/components/ebay-dialog/index.marko b/src/components/ebay-dialog/index.marko
@@ -12,6 +12,7 @@ $ var isCenter = !input.type || input.type === "fill";
 $ var isDocked = input.type === "left" || input.type === "right";
 <div
     ...processHtmlAttributes(input, ignoredAttributes)
+    aria-modal="true"
     role="dialog"
     class=[
         "dialog",
@@ -25,7 +26,6 @@ $ var isDocked = input.type === "left" || input.type === "right";
     onMousedown("handleStartClick")>
     <div
         key="window"
-        role="document"
         class=[
             "dialog__window",
             input.type && `dialog__window--${input.type}`,

diff --git a/src/components/ebay-dialog/test/test.browser.js b/src/components/ebay-dialog/test/test.browser.js
@@ -39,7 +39,7 @@ describe('given a closed dialog', () => {
     });
 
     it('then it does not trap focus', () => {
-        expect(component.getByRole('document')).does.not.have.class('keyboard-trap--active');
+        expect(component.getByRole('dialog').children[0]).does.not.have.class('keyboard-trap--active');
     });
 
     describe('when it is rerendered to be open', () => {
@@ -66,7 +66,7 @@ describe('given a closed dialog', () => {
         if (wasToggled) {
             it('then it traps focus', async() => {
                 await wait(() => {
-                    expect(component.getByRole('document')).has.class('keyboard-trap--active');
+                    expect(component.getByRole('dialog').children[1]).has.class('keyboard-trap--active');
                     expect(document.activeElement).has.class(component.getByLabelText(input.a11yCloseText).className);
                 });
             });
@@ -131,7 +131,7 @@ describe('given an open dialog', () => {
 
         it('then it traps focus', async() => {
             await wait(() => {
-                expect(component.getByRole('document')).has.class('keyboard-trap--active');
+                expect(component.getByRole('dialog').children[1]).has.class('keyboard-trap--active');
                 expect(document.activeElement).has.class(component.getByLabelText(input.a11yCloseText).className);
             });
         });
@@ -153,7 +153,7 @@ describe('given an open dialog', () => {
         });
 
         it('then it restores the previous focus', async() => {
-            expect(component.getByRole('document')).does.not.have.class('keyboard-trap--active');
+            expect(component.getByRole('dialog').children[0]).does.not.have.class('keyboard-trap--active');
             await wait(() => expect(document.activeElement).to.equal(sibling));
         });
 

diff --git a/src/components/ebay-dialog/test/test.server.js b/src/components/ebay-dialog/test/test.server.js
@@ -13,7 +13,6 @@ describe('dialog', () => {
 
         expect(getByRole('dialog')).has.attr('hidden');
         expect(getByRole('dialog')).has.class('dialog');
-        expect(getByRole('document')).has.class('dialog__window');
         expect(getByLabelText(input.a11yCloseText)).has.class('dialog__close');
         expect(getByText(input.renderBody.text)).has.class('dialog__body');
     });
@@ -28,7 +27,7 @@ describe('dialog', () => {
         it(`renders with ${type || 'default'} type`, async() => {
             const { getByRole } = await render(template, { type });
             const $dialog = getByRole('dialog');
-            const $window = getByRole('document');
+            const $window = $dialog.children[0];
 
             if (type) {
                 expect($window).has.class(`dialog__window--${type}`);
@@ -48,7 +47,7 @@ describe('dialog', () => {
         it(`renders with ${type} type`, async() => {
             const { getByRole } = await render(template, { type });
             const $dialog = getByRole('dialog');
-            const $window = getByRole('document');
+            const $window = $dialog.children[0];
 
             expect($dialog).has.class('dialog--mask-fade-slow');
             expect($window).has.class(`dialog__window--${type}`);