diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue index d6077abf..d4e534d5 100644 --- a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue +++ b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue @@ -258,7 +258,7 @@ export default { class="checkbox-radio-switch" :style="cssVars" :type="isButtonType ? 'button' : null" - v-bind="isButtonType ? $attrs : {}" + v-bind="isButtonType ? $attrs : dataAttrs" v-on="isButtonType ? listeners : null"> key.startsWith('data-'))) + }, + + nonDataAttrs() { + // filter all non-data attributes + return Object.fromEntries(Object.entries(this.$attrs) + .filter(([key]) => !key.startsWith('data-'))) + }, + isButtonType() { return this.type === TYPE_BUTTON }, diff --git a/tests/unit/components/NcCheckboxRadioSwitch/checkbox.spec.js b/tests/unit/components/NcCheckboxRadioSwitch/checkbox.spec.js index f58d4e79..c5eef03e 100644 --- a/tests/unit/components/NcCheckboxRadioSwitch/checkbox.spec.js +++ b/tests/unit/components/NcCheckboxRadioSwitch/checkbox.spec.js @@ -17,7 +17,7 @@ describe('NcCheckboxRadioSwitch', () => { expect(wrapper.text()).toContain('Test') }) - it('forwards aria-invalid and aria-errormessage to input', () => { + it('forwards all but data- attributes to the input', () => { const wrapper = shallowMount(NcCheckboxRadioSwitch, { slots: { default: 'Test', @@ -25,11 +25,17 @@ describe('NcCheckboxRadioSwitch', () => { attrs: { 'aria-invalid': 'true', 'aria-errormessage': 'id-test', + 'data-test': 'checkbox-test-data-attr', + title: 'Test title', }, }) const input = wrapper.find('input') expect(input.attributes('aria-invalid')).toBe('true') expect(input.attributes('aria-errormessage')).toBe('id-test') + expect(input.attributes('title')).toBe('Test title') + expect(input.attributes('data-test')).not.toBe('checkbox-test-data-attr') + expect(wrapper.attributes('data-test')).toBe('checkbox-test-data-attr') + expect(wrapper.attributes('title')).not.toBe('Test title') }) })