fix(dialog, dialog-full-screen): address axe violations

Sage · Feb 2, 2022 · 53167d8 · 53167d8
1 parent d5e07d9
commit 53167d8
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 5 deletions.
diff --git a/src/components/dialog-full-screen/dialog-full-screen.component.js b/src/components/dialog-full-screen/dialog-full-screen.component.js
@@ -29,7 +29,7 @@ const DialogFullScreen = ({
   onCancel,
   contentRef,
   help,
-  role = "region",
+  role = "dialog",
   ...rest
 }) => {
   const dialogRef = useRef();

diff --git a/src/components/dialog-full-screen/dialog-full-screen.spec.js b/src/components/dialog-full-screen/dialog-full-screen.spec.js
@@ -428,6 +428,23 @@ describe("DialogFullScreen", () => {
   });
 
   describe("ARIA attributes", () => {
+    it("by default, set role to `dialog` and aria-modal to true", () => {
+      wrapper = mount(
+        <DialogFullScreen open onCancel={() => {}} onConfirm={() => {}} />
+      );
+
+      expect(
+        wrapper
+          .find("[data-element='dialog-full-screen']")
+          .first()
+          .prop("aria-modal")
+      ).toBe(true);
+
+      expect(
+        wrapper.find("[data-element='dialog-full-screen']").first().prop("role")
+      ).toBe("dialog");
+    });
+
     describe("when a title is specified as string", () => {
       it("then the container should have aria-labeledby attribute set to it's header's id", () => {
         wrapper = mount(

diff --git a/src/components/dialog-full-screen/dialog-full-screen.stories.mdx b/src/components/dialog-full-screen/dialog-full-screen.stories.mdx
@@ -885,7 +885,7 @@ and setting the `autoFocus` on the element you wish to be focused instead (click
                 This should be focused first now
               </Button>
             </div>
-            <Textbox value="Not Focused" />
+            <Textbox label="Not Focused" />
           </DialogFullScreen>
           <Button ml={2} onClick={() => setIsOpenTwo(true)}>
             Open Demo using autoFocus
@@ -909,7 +909,7 @@ and setting the `autoFocus` on the element you wish to be focused instead (click
               <Button onClick={() => setisOpenTwo(false)}>Not focused</Button>
               <Button onClick={() => setisOpenTwo(false)}>Not focused</Button>
             </div>
-            <Textbox autoFocus value="This should be focused first now" />
+            <Textbox label="This should be focused first now" autoFocus />
           </DialogFullScreen>
         </>
       );

diff --git a/src/components/dialog/dialog.stories.mdx b/src/components/dialog/dialog.stories.mdx
@@ -312,7 +312,7 @@ and setting the `autoFocus` on the element you wish to be focused instead (click
                 This should be focused first now
               </Button>
             </div>
-            <Textbox value="Not Focused" />
+            <Textbox label="Not focused" />
           </Dialog>
           <Button ml={2} onClick={() => setIsOpenTwo(true)}>
             Open Demo using autoFocus
@@ -335,7 +335,7 @@ and setting the `autoFocus` on the element you wish to be focused instead (click
               <Button onClick={() => setisOpenTwo(false)}>Not focused</Button>
               <Button onClick={() => setisOpenTwo(false)}>Not focused</Button>
             </div>
-            <Textbox autoFocus value="This should be focused first now" />
+            <Textbox autoFocus label="This should be focused first now" />
           </Dialog>
         </>
       );