Merge pull request #5508 from nextcloud-libraries/backport/5507/next

[next] fix(NcCheckboxRadioSwitch): Pass attrs to `input` if available

src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue

@@ -10,6 +10,8 @@
 This is a simple input checkbox, radio and switch design.
 Please have a look at proper usage and recommendations: https://material.io/components/checkboxes
 
+Note: All generic attributes on the component, except `class` and `style`, are passed to the inner `input` element *(for the button type the attributes are passed to the `button` element)*.
+
 ### Standard checkbox
 ```vue
 <template>
@@ -241,21 +243,25 @@ export default {
 
 <template>
 	<component :is="computedWrapperElement"
-		:id="wrapperId"
+		:id="wrapperId ?? (isButtonType ? id : null)"
 		:aria-label="isButtonType && ariaLabel ? ariaLabel : undefined"
-		:class="{
-			['checkbox-radio-switch-' + type]: type,
-			'checkbox-radio-switch--checked': isChecked,
-			'checkbox-radio-switch--disabled': disabled,
-			'checkbox-radio-switch--indeterminate': hasIndeterminate ? indeterminate : false,
-			'checkbox-radio-switch--button-variant': buttonVariant,
-			'checkbox-radio-switch--button-variant-v-grouped': buttonVariant && buttonVariantGrouped === 'vertical',
-			'checkbox-radio-switch--button-variant-h-grouped': buttonVariant && buttonVariantGrouped === 'horizontal',
-			'button-vue': isButtonType,
-		}"
 		class="checkbox-radio-switch"
-		:style="cssVars"
+		:class="[
+			$props.class,
+			{
+				['checkbox-radio-switch-' + type]: type,
+				'checkbox-radio-switch--checked': isChecked,
+				'checkbox-radio-switch--disabled': disabled,
+				'checkbox-radio-switch--indeterminate': hasIndeterminate ? indeterminate : false,
+				'checkbox-radio-switch--button-variant': buttonVariant,
+				'checkbox-radio-switch--button-variant-v-grouped': buttonVariant && buttonVariantGrouped === 'vertical',
+				'checkbox-radio-switch--button-variant-h-grouped': buttonVariant && buttonVariantGrouped === 'horizontal',
+				'button-vue': isButtonType,
+			},
+		]"
+		:style="[cssVars, style]"
 		:type="isButtonType ? 'button' : null"
+		v-bind="isButtonType ? $attrs : {} "
 		v-on="isButtonType ? listeners : {}">
 		<input v-if="!isButtonType"
 			:id="id"
@@ -269,6 +275,7 @@ export default {
 			:indeterminate.prop="hasIndeterminate ? indeterminate : null"
 			:required="required"
 			:name="name"
+			v-bind="$attrs"
 			v-on="listeners">
 		<NcCheckboxContent :id="id"
 			class="checkbox-radio-switch__content"
@@ -306,6 +313,9 @@ export default {
 		NcCheckboxContent,
 	},
 
+	// We need to pass attributes to the input element
+	inheritAttrs: false,
+
 	props: {
 		/**
 		 * Unique id attribute of the input
@@ -440,6 +450,22 @@ export default {
 			type: String,
 			default: null,
 		},
+
+		/**
+		 * The class(es) to pass to the wrapper / root element of the component
+		 */
+		class: {
+			type: [String, Array, Object],
+			default: '',
+		},
+
+		/**
+		 * The style to pass to the wrapper / root element of the component
+		 */
+		style: {
+			type: [String, Array, Object],
+			default: '',
+		},
 	},
 
 	emits: ['update:modelValue'],
@@ -470,6 +496,17 @@ export default {
 			}
 		},
 
+		/**
+		 * CSS local variables for this component
+		 * @return {Record<string, string>}
+		 */
+		cssVars() {
+			return {
+				'--icon-size': this.size + 'px',
+				'--icon-height': (this.type === TYPE_SWITCH ? 16 : this.size) + 'px',
+			}
+		},
+
 		/**
 		 * Icon size
 		 *
@@ -481,18 +518,6 @@ export default {
 				: 24
 		},
 
-		/**
-		 * Css local variables for this component
-		 *
-		 * @return {object}
-		 */
-		cssVars() {
-			return {
-				'--icon-size': this.size + 'px',
-				'--icon-height': (this.type === TYPE_SWITCH ? 16 : this.size) + 'px',
-			}
-		},
-
 		/**
 		 * Return the input type.
 		 * Switch is not an official type

tests/unit/components/NcCheckboxRadioSwitch/checkbox.spec.js

@@ -0,0 +1,36 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { mount, shallowMount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import NcCheckboxRadioSwitch from '../../../../src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue'
+
+describe('NcCheckboxRadioSwitch', () => {
+	it('sets text content', () => {
+		const wrapper = mount(NcCheckboxRadioSwitch, {
+			slots: {
+				default: 'Test',
+			},
+		})
+
+		expect(wrapper.text()).toContain('Test')
+	})
+
+	it('forwards aria-invalid and aria-errormessage to input', () => {
+		const wrapper = shallowMount(NcCheckboxRadioSwitch, {
+			slots: {
+				default: 'Test',
+			},
+			attrs: {
+				'aria-invalid': 'true',
+				'aria-errormessage': 'id-test',
+			},
+		})
+
+		const input = wrapper.find('input')
+		expect(input.attributes('aria-invalid')).toBe('true')
+		expect(input.attributes('aria-errormessage')).toBe('id-test')
+	})
+})