fix(NcCheckboxRadioSwitch): Do not use HTML attribute name id as pr…

…operty name Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
nextcloud-libraries · May 10, 2024 · 83c8b38 · 83c8b38
1 parent d828323
commit 83c8b38
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 12 deletions.
diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue
@@ -21,8 +21,7 @@
 -->
 
 <template>
-	<span :id="!isButtonType ? `${id}-label` : undefined"
-		class="checkbox-content"
+	<span class="checkbox-content"
 		:class="{
 			['checkbox-content-' + type]: true,
 			'checkbox-content--button-variant': buttonVariant,
@@ -84,14 +83,6 @@ export default {
 	},
 
 	props: {
-		/**
-		 * Unique id attribute of the input to label
-		 */
-		id: {
-			type: String,
-			default: null,
-		},
-
 		/**
 		 * Class for the icon element
 		 */

diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
@@ -292,7 +292,7 @@ export default {
 			:name="name"
 			v-bind="$attrs"
 			v-on="listeners">
-		<NcCheckboxContent :id="id"
+		<NcCheckboxContent :id="!isButtonType ? `${id}-label` : undefined"
 			class="checkbox-radio-switch__content"
 			icon-class="checkbox-radio-switch__icon"
 			text-class="checkbox-radio-switch__text"

diff --git a/tests/unit/components/NcCheckboxRadioSwitch/checkbox.spec.js b/tests/unit/components/NcCheckboxRadioSwitch/checkbox.spec.js
@@ -20,7 +20,7 @@
  *
  */
 
-import { shallowMount } from '@vue/test-utils'
+import { mount, shallowMount } from '@vue/test-utils'
 import NcCheckboxRadioSwitch from '../../../../src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue'
 
 describe('NcCheckboxRadioSwitch', () => {
@@ -49,4 +49,33 @@ describe('NcCheckboxRadioSwitch', () => {
 		expect(input.attributes('aria-invalid')).toBe('true')
 		expect(input.attributes('aria-errormessage')).toBe('id-test')
 	})
+
+	it('sets aria-labelledby attribute correctly', () => {
+		const wrapper = mount(NcCheckboxRadioSwitch, {
+			propsData: {
+				id: 'test-id',
+			},
+			slots: {
+				default: 'Test',
+			},
+		})
+
+		expect(wrapper.find('input').attributes('aria-labelledby')).toBe('test-id-label')
+		expect(wrapper.findComponent({ name: 'NcCheckboxContent' }).attributes('id')).toBe('test-id-label')
+	})
+
+	it('does not set id on button content', () => {
+		const wrapper = mount(NcCheckboxRadioSwitch, {
+			propsData: {
+				id: 'test-id',
+				type: 'button',
+			},
+			slots: {
+				default: 'Test',
+			},
+		})
+
+		expect(wrapper.find('input').exists()).toBe(false)
+		expect(wrapper.findComponent({ name: 'NcCheckboxContent' }).attributes('id')).toBe(undefined)
+	})
 })