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`] = `
-
+
+ test legend
RadioButtonStub
-
+
`; exports[`CvRadioGroup matches render when vertical 1`] = `
-
+
+ test legend
RadioButtonStub
-
+
`;