fix(cv-radio-group): basic a11y tests

add legendText and make it required for accessibility add hideLegend option, only visually
carbon-design-system · Feb 3, 2024 · 3da0a02 · 3da0a02
1 parent 2ce3e75
commit 3da0a02
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 10 deletions.
diff --git a/src/components/CvRadioButton/CvRadioButton.stories.js b/src/components/CvRadioButton/CvRadioButton.stories.js
@@ -38,11 +38,28 @@ export default {
       type: 'boolean',
       table: {
         type: { summary: 'boolean' },
-        category: 'props',
+        category: 'CvRadioGroup - props',
       },
       description:
         'Property of CvRadioGroup component - stacks inside radio components vertically',
     },
+    legendText: {
+      control: 'text',
+      table: {
+        type: { summary: 'text' },
+        category: 'CvRadioGroup - props',
+      },
+      description: 'Property of CvRadioGroup component',
+    },
+    hideLegend: {
+      type: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'CvRadioGroup - props',
+      },
+      description:
+        'Property of CvRadioGroup component - makes the legend visually hidden',
+    },
   },
 };
 
@@ -105,6 +122,8 @@ const Template = (args, { argTypes }) => {
 export const Default = Template.bind({});
 Default.args = {
   vertical: false,
+  legendText: 'CvRadioGroup legend',
+  hideLegend: false,
 };
 Default.parameters = storyParametersObject(
   DefaultStoryParameters,

diff --git a/src/components/CvRadioButton/CvRadioGroup.vue b/src/components/CvRadioButton/CvRadioGroup.vue
@@ -1,13 +1,22 @@
 <template>
   <div :class="`cv-radio-group ${carbonPrefix}--form-item`">
-    <div
+    <fieldset
       :class="[
         `${carbonPrefix}--radio-button-group`,
         { [`${carbonPrefix}--radio-button-group--vertical`]: vertical },
       ]"
     >
+      <legend
+        :class="[
+          `${carbonPrefix}--label`,
+          { [`${carbonPrefix}--visually-hidden`]: hideLegend },
+        ]"
+        dir="auto"
+      >
+        {{ legendText }}
+      </legend>
       <slot></slot>
-    </div>
+    </fieldset>
   </div>
 </template>
 
@@ -17,6 +26,13 @@ import { carbonPrefix } from '../../global/settings';
 
 defineProps({
   vertical: Boolean,
+  legendText: {
+    type: String,
+    default: null,
+    required: true,
+    validator: legend => !!legend.length,
+  },
+  hideLegend: Boolean,
 });
 
 const emit = defineEmits(['change']);

diff --git a/src/components/CvRadioButton/__tests__/CvRadioButton.accessibility.spec.js b/src/components/CvRadioButton/__tests__/CvRadioButton.accessibility.spec.js
@@ -1,4 +1,4 @@
-import { CvRadioButton } from '..';
+import { CvRadioButton, CvRadioGroup } from '..';
 import { render } from '@testing-library/vue';
 
 describe('CvRadioButton - accessibility', () => {
@@ -46,3 +46,63 @@ describe('CvRadioButton - accessibility', () => {
     await expect(result.container).toBeAccessible('cv-radio-button');
   }, 10000);
 });
+
+describe('CvRadioGroup - accessibility', () => {
+  it('CvRadioGroup - basic', async () => {
+    const main = document.createElement('main');
+
+    const result = render(
+      {
+        components: { CvRadioGroup, CvRadioButton },
+        template: /* html */ `<cv-radio-group legendText="radioButtonGroupLegend">
+        <cv-radio-button
+          label="radioButtonLabel1"
+          value="radioButtonValue1"
+        />
+        <cv-radio-button
+          label="radioButtonLabel2"
+          value="radioButtonValue2"
+        />
+        <cv-radio-button
+          label="radioButtonLabel3"
+          value="radioButtonValue3"
+        />
+      </cv-radio-group>`,
+      },
+      {
+        container: document.body.appendChild(main),
+      }
+    );
+
+    await expect(result.container).toBeAccessible('cv-radio-group');
+  }, 10000);
+
+  it('CvRadioGroup - with hidden legend', async () => {
+    const main = document.createElement('main');
+
+    const result = render(
+      {
+        components: { CvRadioGroup, CvRadioButton },
+        template: /* html */ `<cv-radio-group legendText="radioButtonGroupLegend" hide-legend>
+        <cv-radio-button
+          label="radioButtonLabel1"
+          value="radioButtonValue1"
+        />
+        <cv-radio-button
+          label="radioButtonLabel2"
+          value="radioButtonValue2"
+        />
+        <cv-radio-button
+          label="radioButtonLabel3"
+          value="radioButtonValue3"
+        />
+      </cv-radio-group>`,
+      },
+      {
+        container: document.body.appendChild(main),
+      }
+    );
+
+    await expect(result.container).toBeAccessible('cv-radio-group');
+  }, 10000);
+});
diff --git a/src/components/CvRadioButton/__tests__/CvRadioButton.spec.js b/src/components/CvRadioButton/__tests__/CvRadioButton.spec.js
@@ -117,7 +117,7 @@ describe('CvRadioGroup', () => {
   // ***************
   it('matches render when vertical', async () => {
     const wrapper = shallowMount(CvRadioGroup, {
-      props: { vertical: true },
+      props: { vertical: true, legendText: 'test legend' },
       slots: {
         default: '<div class="cv-radio-button-stub">RadioButtonStub</div>',
       },
@@ -127,7 +127,7 @@ describe('CvRadioGroup', () => {
 
   it('matches render when horizontal', async () => {
     const wrapper = shallowMount(CvRadioGroup, {
-      props: { vertical: false },
+      props: { vertical: false, legendText: 'test legend' },
       slots: {
         default: '<div class="cv-radio-button-stub">RadioButtonStub</div>',
       },
@@ -143,6 +143,9 @@ describe('CvRadioGroup', () => {
     const stubId = 'radioBtn';
     const radioButtonStub = `<div id="${stubId}"></div>`;
     const wrapper = shallowMount(CvRadioGroup, {
+      props: {
+        legendText: 'test legend',
+      },
       slots: {
         default: radioButtonStub,
       },

diff --git a/src/components/CvRadioButton/__tests__/__snapshots__/CvRadioButton.spec.js.snap b/src/components/CvRadioButton/__tests__/__snapshots__/CvRadioButton.spec.js.snap
@@ -12,16 +12,18 @@ exports[`CvRadioButton matches render with right label 1`] = `<div class="cv-rad
 
 exports[`CvRadioGroup matches render when horizontal 1`] = `
 <div class="cv-radio-group bx--form-item">
-  <div class="bx--radio-button-group">
+  <fieldset class="bx--radio-button-group">
+    <legend class="bx--label" dir="auto">test legend</legend>
     <div class="cv-radio-button-stub">RadioButtonStub</div>
-  </div>
+  </fieldset>
 </div>
 `;
 
 exports[`CvRadioGroup matches render when vertical 1`] = `
 <div class="cv-radio-group bx--form-item">
-  <div class="bx--radio-button-group bx--radio-button-group--vertical">
+  <fieldset class="bx--radio-button-group bx--radio-button-group--vertical">
+    <legend class="bx--label" dir="auto">test legend</legend>
     <div class="cv-radio-button-stub">RadioButtonStub</div>
-  </div>
+  </fieldset>
 </div>
 `;