fix(fuselage): RadioButton a11y best practices improvement (#1162)

Co-authored-by: Douglas Fabris <devfabris@gmail.com>
RocketChat · Sep 15, 2023 · 387c401 · 387c401
1 parent bbe8890
commit 387c401
Show file tree

Hide file tree

Showing 5 changed files with 131 additions and 45 deletions.
diff --git a/.changeset/lucky-doors-warn.md b/.changeset/lucky-doors-warn.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": patch
+---
+
+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
@@ -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(<RadioButton />);
+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(<Story />);
+      expect(tree.baseElement).toMatchSnapshot();
+    }
+  );
+
+  test.each(testCases)(
+    '%s should have no a11y violations',
+    async (_storyname, Story) => {
+      const { container } = render(<Story />);
+
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    }
+  );
+});
+
+describe('[RadioButton Interacting]', () => {
+  it('changes style of element as radio button is checked', () => {
+    const { container } = render(<Default />);
+    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(<Checked />);
+    const radioButton = container.querySelector(
+      'input[type="radio"]'
+    ) as HTMLInputElement;
+    expect(radioButton.defaultChecked).toEqual(true);
+  });
+  it('displays radio button disabled correctly', () => {
+    const { container } = render(<Disabled />);
+    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
@@ -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<typeof RadioButton>;
 
 const Template: ComponentStory<typeof RadioButton> = (args) => (
-  <RadioButton {...args} />
+  <RadioButton {...args} aria-label={DECORATOR_LABEL} />
 );
 
 export const Default: ComponentStory<typeof RadioButton> = Template.bind({});
@@ -57,7 +60,7 @@ Disabled.args = {
 export const States: ComponentStory<typeof RadioButton> = () => (
   <PropsVariationSection
     component={RadioButton}
-    common={{ onChange: action('change') }}
+    common={{ 'onChange': action('change'), 'aria-label': DECORATOR_LABEL }}
     xAxis={{
       checked: { checked: true },
       unchecked: { checked: false },

diff --git a/packages/fuselage/src/components/RadioButton/RadioButton.tsx b/packages/fuselage/src/components/RadioButton/RadioButton.tsx
@@ -1,56 +1,24 @@
-import type { ComponentProps, Ref } from 'react';
+import type { AllHTMLAttributes, ComponentProps, Ref } from 'react';
 import React, { forwardRef } from 'react';
 
 import Box from '../Box';
 import { Label } from '../Label';
 
-type RadioButtonProps = ComponentProps<typeof Box> & {
-  'qa'?: unknown;
-  'data-qa'?: unknown;
-};
+type RadioButtonProps = ComponentProps<typeof Box> &
+  AllHTMLAttributes<HTMLInputElement>;
 
 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<HTMLInputElement>
 ) {
   return (
-    <Box is={Label} rcx-radio-button {...props}>
+    <Box is={Label} rcx-radio-button>
       <Box
         is='input'
         rcx-radio-button__input
-        autoComplete={autoComplete}
-        checked={checked}
-        defaultChecked={defaultChecked}
-        disabled={disabled}
-        form={form}
-        id={id}
-        name={name}
-        required={required}
-        tabIndex={tabIndex}
         type='radio'
-        value={value}
-        data-qa={dataQa || qa}
         ref={ref}
-        onChange={onChange}
-        onInput={onInput}
-        onInvalid={onInvalid}
+        {...props}
       />
       <Box is='i' rcx-radio-button__fake aria-hidden='true' />
     </Box>

diff --git a/packages/fuselage/src/components/RadioButton/__snapshots__/RadioButton.spec.tsx.snap 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`] = `
+<body>
+  <div>
+    <label
+      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-radio-button"
+    >
+      <input
+        aria-label="Decorator Label"
+        checked=""
+        class="rcx-box rcx-box--full rcx-radio-button__input"
+        type="radio"
+      />
+      <i
+        aria-hidden="true"
+        class="rcx-box rcx-box--full rcx-radio-button__fake"
+      />
+    </label>
+  </div>
+</body>
+`;
+
+exports[`[RadioButton Rendering] renders Default without crashing 1`] = `
+<body>
+  <div>
+    <label
+      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-radio-button"
+    >
+      <input
+        aria-label="Decorator Label"
+        class="rcx-box rcx-box--full rcx-radio-button__input"
+        type="radio"
+      />
+      <i
+        aria-hidden="true"
+        class="rcx-box rcx-box--full rcx-radio-button__fake"
+      />
+    </label>
+  </div>
+</body>
+`;
+
+exports[`[RadioButton Rendering] renders Disabled without crashing 1`] = `
+<body>
+  <div>
+    <label
+      class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-radio-button"
+    >
+      <input
+        aria-label="Decorator Label"
+        class="rcx-box rcx-box--full rcx-radio-button__input"
+        disabled=""
+        type="radio"
+      />
+      <i
+        aria-hidden="true"
+        class="rcx-box rcx-box--full rcx-radio-button__fake"
+      />
+    </label>
+  </div>
+</body>
+`;