From 4094d78c51be1cac1dd783249671dd430987e7c1 Mon Sep 17 00:00:00 2001 From: Douglas Fabris Date: Wed, 5 Jun 2024 02:48:43 -0300 Subject: [PATCH] fix(fuselage): Modal components missing some a11y props (#1390) --- .changeset/red-tips-joke.md | 5 +++ .../src/components/Modal/Modal.spec.tsx | 10 ++++-- .../fuselage/src/components/Modal/Modal.tsx | 2 +- .../src/components/Modal/ModalClose.tsx | 2 +- .../Modal/__snapshots__/Modal.spec.tsx.snap | 32 ++++++++++++++----- 5 files changed, 39 insertions(+), 12 deletions(-) create mode 100644 .changeset/red-tips-joke.md diff --git a/.changeset/red-tips-joke.md b/.changeset/red-tips-joke.md new file mode 100644 index 0000000000..f9afdc1fa9 --- /dev/null +++ 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 index bfecd135c2..e12e422190 100644 --- 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(); expect(tree.baseElement).toMatchSnapshot(); @@ -28,4 +29,9 @@ describe('[Modal Component]', () => { expect(results).toHaveNoViolations(); } ); + + test('Default should render the dialog a11y compliant', () => { + render(); + expect(screen.getByRole('dialog')).toBeInTheDocument(); + }); }); diff --git a/packages/fuselage/src/components/Modal/Modal.tsx b/packages/fuselage/src/components/Modal/Modal.tsx index ea582bc6e9..31436e49d3 100644 --- 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 ( - + {wrapperFunction ? wrapperFunction(wrapperProps) : createElement(wrapper, wrapperProps)} diff --git a/packages/fuselage/src/components/Modal/ModalClose.tsx b/packages/fuselage/src/components/Modal/ModalClose.tsx index 6e3beb6a57..189bf683fa 100644 --- 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; export const ModalClose = (props: ModalCloseProps) => ( - + ); diff --git a/packages/fuselage/src/components/Modal/__snapshots__/Modal.spec.tsx.snap b/packages/fuselage/src/components/Modal/__snapshots__/Modal.spec.tsx.snap index 0987093665..8744924709 100644 --- 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`] = `