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`] = `
+
+
+
+
+
+`;
+
+exports[`[RadioButton Rendering] renders Default without crashing 1`] = `
+
+
+
+
+
+`;
+
+exports[`[RadioButton Rendering] renders Disabled without crashing 1`] = `
+
+
+
+
+
+`;