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')
+ })
+})