diff --git a/src/components/CvRadioButton/CvRadioButton.stories.js b/src/components/CvRadioButton/CvRadioButton.stories.js
index 6b88b1f43..01c203e0b 100644
--- 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
index 2c5bc663d..6b26ed017 100644
--- a/src/components/CvRadioButton/CvRadioGroup.vue
+++ b/src/components/CvRadioButton/CvRadioGroup.vue
@@ -1,13 +1,22 @@
-
+
-
+
@@ -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
index a3e15da3a..aa5eddfe2 100644
--- 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 */ `
+
+
+
+ `,
+ },
+ {
+ 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 */ `
+
+
+
+ `,
+ },
+ {
+ 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
index d796d3bbd..57988945c 100644
--- 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: '
RadioButtonStub
',
},
@@ -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: 'RadioButtonStub
',
},
@@ -143,6 +143,9 @@ describe('CvRadioGroup', () => {
const stubId = 'radioBtn';
const radioButtonStub = ``;
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
index 41128336e..389431d57 100644
--- 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`] = `
`;
exports[`CvRadioGroup matches render when vertical 1`] = `
`;