Skip to content

Commit

Permalink
fix(NcCheckboxRadioSwitch): only bind aria attributes to the input
Browse files Browse the repository at this point in the history
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
  • Loading branch information
skjnldsv committed Jul 4, 2024
1 parent a671ba4 commit 34329dd
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 3 deletions.
16 changes: 14 additions & 2 deletions src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
Original file line number Diff line number Diff line change
Expand Up @@ -258,7 +258,7 @@ export default {
class="checkbox-radio-switch"
:style="cssVars"
:type="isButtonType ? 'button' : null"
v-bind="isButtonType ? $attrs : {}"
v-bind="isButtonType ? $attrs : nonAriaAttrs"
v-on="isButtonType ? listeners : null">
<input v-if="!isButtonType"
:id="id"
Expand All @@ -272,7 +272,7 @@ export default {
:indeterminate.prop="hasIndeterminate ? indeterminate : null"
:required="required"
:name="name"
v-bind="$attrs"
v-bind="ariaAttrs"
v-on="listeners">
<NcCheckboxContent :id="id"
class="checkbox-radio-switch__content"
Expand Down Expand Up @@ -450,6 +450,18 @@ export default {
emits: ['update:checked'],

computed: {
ariaAttrs() {
// filter all aria attributes
return Object.fromEntries(Object.entries(this.$attrs)
.filter(([key]) => key.startsWith('aria-')))
},

nonAriaAttrs() {
// filter all non-aria attributes
return Object.fromEntries(Object.entries(this.$attrs)
.filter(([key]) => !key.startsWith('aria-')))
},

isButtonType() {
return this.type === TYPE_BUTTON
},
Expand Down
5 changes: 4 additions & 1 deletion tests/unit/components/NcCheckboxRadioSwitch/checkbox.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,19 +17,22 @@ describe('NcCheckboxRadioSwitch', () => {
expect(wrapper.text()).toContain('Test')
})

it('forwards aria-invalid and aria-errormessage to input', () => {
it('forwards aria- attributes to the input', () => {
const wrapper = shallowMount(NcCheckboxRadioSwitch, {
slots: {
default: 'Test',
},
attrs: {
'aria-invalid': 'true',
'aria-errormessage': 'id-test',
'data-test': 'checkbox-test__class',
},
})

const input = wrapper.find('input')
expect(input.attributes('aria-invalid')).toBe('true')
expect(input.attributes('aria-errormessage')).toBe('id-test')
expect(input.attributes('data-test')).not.toBe('checkbox-test__class')
expect(wrapper.attributes('data-test')).toBe('checkbox-test__class')
})
})

0 comments on commit 34329dd

Please sign in to comment.