fix(fuselage): Modal components missing some a11y props (#1390)

RocketChat · Jun 5, 2024 · 4094d78 · 4094d78
1 parent bebe9bc
commit 4094d78
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 12 deletions.
diff --git a/.changeset/red-tips-joke.md b/.changeset/red-tips-joke.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": patch
+---
+
+fix(fuselage): Modal components missing some a11y props
diff --git a/packages/fuselage/src/components/Modal/Modal.spec.tsx b/packages/fuselage/src/components/Modal/Modal.spec.tsx
@@ -1,9 +1,10 @@
 import { composeStories } from '@storybook/testing-react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { axe } from 'jest-axe';
 import React from 'react';
 
 import * as stories from './Modal.stories';
+import { Default } from './Modal.stories';
 
 const testCases = Object.values(composeStories(stories)).map((Story) => [
   Story.storyName || 'Story',
@@ -12,7 +13,7 @@ const testCases = Object.values(composeStories(stories)).map((Story) => [
 
 describe('[Modal Component]', () => {
   test.each(testCases)(
-    `renders %s without crashing`,
+    `%s should match the snapshot`,
     async (_storyname, Story) => {
       const tree = render(<Story />);
       expect(tree.baseElement).toMatchSnapshot();
@@ -28,4 +29,9 @@ describe('[Modal Component]', () => {
       expect(results).toHaveNoViolations();
     }
   );
+
+  test('Default should render the dialog a11y compliant', () => {
+    render(<Default />);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+  });
 });
diff --git a/packages/fuselage/src/components/Modal/Modal.tsx b/packages/fuselage/src/components/Modal/Modal.tsx
@@ -27,7 +27,7 @@ export const Modal = forwardRef(
     } as const;
 
     return (
-      <Box is='dialog' aria-modal='true' rcx-modal ref={ref} {...props}>
+      <Box is='dialog' open aria-modal='true' rcx-modal ref={ref} {...props}>
         {wrapperFunction
           ? wrapperFunction(wrapperProps)
           : createElement(wrapper, wrapperProps)}

diff --git a/packages/fuselage/src/components/Modal/ModalClose.tsx b/packages/fuselage/src/components/Modal/ModalClose.tsx
@@ -7,5 +7,5 @@ import { IconButton } from '../Button';
 export type ModalCloseProps = ComponentProps<typeof Box>;
 
 export const ModalClose = (props: ModalCloseProps) => (
-  <IconButton small {...props} icon='cross' />
+  <IconButton aria-label='Close' {...props} small icon='cross' />
 );
diff --git a/packages/fuselage/src/components/Modal/__snapshots__/Modal.spec.tsx.snap b/packages/fuselage/src/components/Modal/__snapshots__/Modal.spec.tsx.snap
@@ -1,11 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`[Modal Component] renders _WithAnnotation without crashing 1`] = `
+exports[`[Modal Component] _WithAnnotation should match the snapshot 1`] = `
 <body>
   <div>
     <dialog
       aria-modal="true"
       class="rcx-box rcx-box--full rcx-modal"
+      open=""
     >
       <div
         class="rcx-box rcx-box--full  rcx-modal__inner rcx-css-1ppp6za"
@@ -26,6 +27,7 @@ exports[`[Modal Component] renders _WithAnnotation without crashing 1`] = `
               </h2>
             </div>
             <button
+              aria-label="Close"
               class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button  rcx-css-trljwa rcx-css-lma364"
               type="button"
             >
@@ -87,12 +89,13 @@ exports[`[Modal Component] renders _WithAnnotation without crashing 1`] = `
 </body>
 `;
 
-exports[`[Modal Component] renders _WithForm without crashing 1`] = `
+exports[`[Modal Component] _WithForm should match the snapshot 1`] = `
 <body>
   <div>
     <dialog
       aria-modal="true"
       class="rcx-box rcx-box--full rcx-modal"
+      open=""
     >
       <form
         class="rcx-box rcx-box--full  rcx-modal__inner rcx-css-1ppp6za"
@@ -113,6 +116,7 @@ exports[`[Modal Component] renders _WithForm without crashing 1`] = `
               </h2>
             </div>
             <button
+              aria-label="Close"
               class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button  rcx-css-trljwa rcx-css-lma364"
               type="button"
             >
@@ -192,12 +196,13 @@ exports[`[Modal Component] renders _WithForm without crashing 1`] = `
 </body>
 `;
 
-exports[`[Modal Component] renders _WithHeroImage without crashing 1`] = `
+exports[`[Modal Component] _WithHeroImage should match the snapshot 1`] = `
 <body>
   <div>
     <dialog
       aria-modal="true"
       class="rcx-box rcx-box--full rcx-modal"
+      open=""
     >
       <div
         class="rcx-box rcx-box--full  rcx-modal__inner rcx-css-1ppp6za"
@@ -218,6 +223,7 @@ exports[`[Modal Component] renders _WithHeroImage without crashing 1`] = `
               </h2>
             </div>
             <button
+              aria-label="Close"
               class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button  rcx-css-trljwa rcx-css-lma364"
               type="button"
             >
@@ -282,12 +288,13 @@ exports[`[Modal Component] renders _WithHeroImage without crashing 1`] = `
 </body>
 `;
 
-exports[`[Modal Component] renders _WithIcon without crashing 1`] = `
+exports[`[Modal Component] _WithIcon should match the snapshot 1`] = `
 <body>
   <div>
     <dialog
       aria-modal="true"
       class="rcx-box rcx-box--full rcx-modal"
+      open=""
     >
       <div
         class="rcx-box rcx-box--full  rcx-modal__inner rcx-css-1ppp6za"
@@ -318,6 +325,7 @@ exports[`[Modal Component] renders _WithIcon without crashing 1`] = `
               </h2>
             </div>
             <button
+              aria-label="Close"
               class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button  rcx-css-trljwa rcx-css-lma364"
               type="button"
             >
@@ -374,12 +382,13 @@ exports[`[Modal Component] renders _WithIcon without crashing 1`] = `
 </body>
 `;
 
-exports[`[Modal Component] renders _WithIconAndTagline without crashing 1`] = `
+exports[`[Modal Component] _WithIconAndTagline should match the snapshot 1`] = `
 <body>
   <div>
     <dialog
       aria-modal="true"
       class="rcx-box rcx-box--full rcx-modal"
+      open=""
     >
       <div
         class="rcx-box rcx-box--full  rcx-modal__inner rcx-css-1ppp6za"
@@ -415,6 +424,7 @@ exports[`[Modal Component] renders _WithIconAndTagline without crashing 1`] = `
               </h2>
             </div>
             <button
+              aria-label="Close"
               class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button  rcx-css-trljwa rcx-css-lma364"
               type="button"
             >
@@ -471,12 +481,13 @@ exports[`[Modal Component] renders _WithIconAndTagline without crashing 1`] = `
 </body>
 `;
 
-exports[`[Modal Component] renders _WithTagline without crashing 1`] = `
+exports[`[Modal Component] _WithTagline should match the snapshot 1`] = `
 <body>
   <div>
     <dialog
       aria-modal="true"
       class="rcx-box rcx-box--full rcx-modal"
+      open=""
     >
       <div
         class="rcx-box rcx-box--full  rcx-modal__inner rcx-css-1ppp6za"
@@ -502,6 +513,7 @@ exports[`[Modal Component] renders _WithTagline without crashing 1`] = `
               </h2>
             </div>
             <button
+              aria-label="Close"
               class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button  rcx-css-trljwa rcx-css-lma364"
               type="button"
             >
@@ -558,12 +570,13 @@ exports[`[Modal Component] renders _WithTagline without crashing 1`] = `
 </body>
 `;
 
-exports[`[Modal Component] renders _WithThumb without crashing 1`] = `
+exports[`[Modal Component] _WithThumb should match the snapshot 1`] = `
 <body>
   <div>
     <dialog
       aria-modal="true"
       class="rcx-box rcx-box--full rcx-modal"
+      open=""
     >
       <div
         class="rcx-box rcx-box--full  rcx-modal__inner rcx-css-1ppp6za"
@@ -596,6 +609,7 @@ exports[`[Modal Component] renders _WithThumb without crashing 1`] = `
               </h2>
             </div>
             <button
+              aria-label="Close"
               class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button  rcx-css-trljwa rcx-css-lma364"
               type="button"
             >
@@ -652,12 +666,13 @@ exports[`[Modal Component] renders _WithThumb without crashing 1`] = `
 </body>
 `;
 
-exports[`[Modal Component] renders Default without crashing 1`] = `
+exports[`[Modal Component] Default should match the snapshot 1`] = `
 <body>
   <div>
     <dialog
       aria-modal="true"
       class="rcx-box rcx-box--full rcx-modal"
+      open=""
     >
       <div
         class="rcx-box rcx-box--full  rcx-modal__inner rcx-css-1ppp6za"
@@ -678,6 +693,7 @@ exports[`[Modal Component] renders Default without crashing 1`] = `
               </h2>
             </div>
             <button
+              aria-label="Close"
               class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button  rcx-css-trljwa rcx-css-lma364"
               type="button"
             >