diff --git a/.changeset/lucky-doors-warn.md b/.changeset/lucky-doors-warn.md new file mode 100644 index 0000000000..c656dd8a43 --- /dev/null +++ b/.changeset/lucky-doors-warn.md @@ -0,0 +1,5 @@ +--- +"@rocket.chat/fuselage": minor +--- + +fix(fuselage): RadioButton a11y best practices improvement diff --git a/packages/fuselage/src/components/RadioButton/RadioButton.spec.tsx b/packages/fuselage/src/components/RadioButton/RadioButton.spec.tsx index 96bec3b13e..a4cce6d0a9 100644 --- a/packages/fuselage/src/components/RadioButton/RadioButton.spec.tsx +++ b/packages/fuselage/src/components/RadioButton/RadioButton.spec.tsx @@ -1,10 +1,57 @@ +import { composeStories } from '@storybook/testing-react'; import { render } from '@testing-library/react'; +import { axe } from 'jest-axe'; import React from 'react'; -import { RadioButton } from '.'; +import * as stories from './RadioButton.stories'; -describe('RadioButton Component', () => { - it('renders without crashing', () => { - render(); +const testCases = Object.values(composeStories(stories)) + .filter((story) => story.storyName !== 'States') + .map((Story) => [Story.storyName || 'Story', Story]); + +const { Default, Checked, Disabled } = composeStories(stories); + +describe('[RadioButton Rendering]', () => { + test.each(testCases)( + `renders %s without crashing`, + async (_storyname, Story) => { + const tree = render(); + expect(tree.baseElement).toMatchSnapshot(); + } + ); + + test.each(testCases)( + '%s should have no a11y violations', + async (_storyname, Story) => { + const { container } = render(); + + const results = await axe(container); + expect(results).toHaveNoViolations(); + } + ); +}); + +describe('[RadioButton Interacting]', () => { + it('changes style of element as radio button is checked', () => { + const { container } = render(); + const radioButton = container.querySelector( + 'input[type="radio"]' + ) as HTMLInputElement; + radioButton.click(); + expect(radioButton.checked).toEqual(true); + }); + it('displays radio button with defaultChecked value correctly', () => { + const { container } = render(); + const radioButton = container.querySelector( + 'input[type="radio"]' + ) as HTMLInputElement; + expect(radioButton.defaultChecked).toEqual(true); + }); + it('displays radio button disabled correctly', () => { + const { container } = render(); + const radioButton = container.querySelector( + 'input[type="radio"]' + ) as HTMLInputElement; + expect(radioButton.disabled).toEqual(true); }); }); diff --git a/packages/fuselage/src/components/RadioButton/RadioButton.stories.tsx b/packages/fuselage/src/components/RadioButton/RadioButton.stories.tsx index cc5233bb5e..c42a19c341 100644 --- a/packages/fuselage/src/components/RadioButton/RadioButton.stories.tsx +++ b/packages/fuselage/src/components/RadioButton/RadioButton.stories.tsx @@ -10,7 +10,10 @@ import type { ComponentStory, ComponentMeta } from '@storybook/react'; import React from 'react'; import { RadioButton } from '../..'; -import { PropsVariationSection } from '../../../.storybook/helpers'; +import { + PropsVariationSection, + DECORATOR_LABEL, +} from '../../../.storybook/helpers'; export default { title: 'Inputs/RadioButton', @@ -35,7 +38,7 @@ export default { } as ComponentMeta; const Template: ComponentStory = (args) => ( - + ); export const Default: ComponentStory = Template.bind({}); @@ -57,7 +60,7 @@ Disabled.args = { export const States: ComponentStory = () => ( & { - 'qa'?: unknown; - 'data-qa'?: unknown; -}; +type RadioButtonProps = ComponentProps & + AllHTMLAttributes; export const RadioButton = forwardRef(function RadioButton( - { - autoComplete, - checked, - defaultChecked, - disabled, - form, - id, - name, - required, - tabIndex, - value, - qa, - 'data-qa': dataQa, - onChange, - onInput, - onInvalid, - ...props - }: RadioButtonProps, + props: RadioButtonProps, ref: Ref ) { return ( - + diff --git a/packages/fuselage/src/components/RadioButton/__snapshots__/RadioButton.spec.tsx.snap b/packages/fuselage/src/components/RadioButton/__snapshots__/RadioButton.spec.tsx.snap new file mode 100644 index 0000000000..05adc36ca1 --- /dev/null +++ b/packages/fuselage/src/components/RadioButton/__snapshots__/RadioButton.spec.tsx.snap @@ -0,0 +1,63 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`[RadioButton Rendering] renders Checked without crashing 1`] = ` + +
+