fix(NcCheckboxRadioSwitch): Pass attrs to `input` if available
If not button type, pass the attrs to the input element to allow setting aria tags like `aria-invalid` and `aria-errormessage` Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
This commit is contained in:
Родитель
c818fb1bf0
Коммит
8debebe91f
|
@ -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
|
||||
|
|
|
@ -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')
|
||||
})
|
||||
})
|
Загрузка…
Ссылка в новой задаче