Merge pull request #5507 from nextcloud-libraries/fix/checkbox-attrs

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

Author: susnux

src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue

@@ -28,6 +28,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 attributes on the element are passed to the inner input element - except for the button type.
+
 ### Standard checkbox
 ```vue
 <template>
@@ -274,6 +276,7 @@ export default {
 		class="checkbox-radio-switch"
 		:style="cssVars"
 		:type="isButtonType ? 'button' : null"
+		v-bind="isButtonType ? $attrs : {}"
 		v-on="isButtonType ? listeners : null">
 		<input v-if="!isButtonType"
 			:id="id"
@@ -287,6 +290,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"
@@ -322,6 +326,9 @@ export default {
 		NcCheckboxContent,
 	},
 
+	// We need to pass attributes to the input element
+	inheritAttrs: false,
+
 	props: {
 		/**
 		 * Unique id attribute of the input

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

@@ -0,0 +1,52 @@
+/**
+ * @copyright Copyright (c) 2024 Ferdinand Thiessen <[email protected]>
+ *
+ * @author Ferdinand Thiessen <[email protected]>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import { shallowMount } from '@vue/test-utils'
+import NcCheckboxRadioSwitch from '../../../../src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue'
+
+describe('NcCheckboxRadioSwitch', () => {
+	it('sets text content', () => {
+		const wrapper = shallowMount(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')
+	})
+})