From 1828115a7ca16f4d3de592f0aea22d1207e253c9 Mon Sep 17 00:00:00 2001
From: Ian McBurnie <ianmcburnie@users.noreply.github.com>
Date: Mon, 13 Jan 2020 15:34:51 -0800
Subject: [PATCH] Dialog: update ARIA attributes #587

---
 src/components/ebay-dialog/index.marko          | 2 +-
 src/components/ebay-dialog/test/test.browser.js | 8 ++++----
 src/components/ebay-dialog/test/test.server.js  | 5 ++---
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/ebay-dialog/index.marko b/src/components/ebay-dialog/index.marko
index ae67d7941..1e31fa910 100644
--- 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
index 23ffd9ca7..41c9abbe6 100644
--- 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
index 92d37b6f2..dec4836ec 100644
--- 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}`);