mirror of https://github.com/ElemeFE/element
Checkbox: Improve screen reader experience (#16575)
parent
f29f49a17d
commit
58b544e55e
|
@ -7,9 +7,6 @@
|
||||||
{ 'is-bordered': border },
|
{ 'is-bordered': border },
|
||||||
{ 'is-checked': isChecked }
|
{ 'is-checked': isChecked }
|
||||||
]"
|
]"
|
||||||
role="checkbox"
|
|
||||||
:aria-checked="indeterminate ? 'mixed': isChecked"
|
|
||||||
:aria-disabled="isDisabled"
|
|
||||||
:id="id"
|
:id="id"
|
||||||
>
|
>
|
||||||
<span class="el-checkbox__input"
|
<span class="el-checkbox__input"
|
||||||
|
@ -19,14 +16,16 @@
|
||||||
'is-indeterminate': indeterminate,
|
'is-indeterminate': indeterminate,
|
||||||
'is-focus': focus
|
'is-focus': focus
|
||||||
}"
|
}"
|
||||||
aria-checked="mixed"
|
:tabindex="indeterminate ? 0 : false"
|
||||||
|
:role="indeterminate ? checkbox : false"
|
||||||
|
:aria-checked="indeterminate ? 'mixed' : false"
|
||||||
>
|
>
|
||||||
<span class="el-checkbox__inner"></span>
|
<span class="el-checkbox__inner"></span>
|
||||||
<input
|
<input
|
||||||
v-if="trueLabel || falseLabel"
|
v-if="trueLabel || falseLabel"
|
||||||
class="el-checkbox__original"
|
class="el-checkbox__original"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
aria-hidden="true"
|
:aria-hidden="indeterminate ? 'true' : 'false'"
|
||||||
:name="name"
|
:name="name"
|
||||||
:disabled="isDisabled"
|
:disabled="isDisabled"
|
||||||
:true-value="trueLabel"
|
:true-value="trueLabel"
|
||||||
|
@ -39,7 +38,7 @@
|
||||||
v-else
|
v-else
|
||||||
class="el-checkbox__original"
|
class="el-checkbox__original"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
aria-hidden="true"
|
:aria-hidden="indeterminate ? 'true' : 'false'"
|
||||||
:disabled="isDisabled"
|
:disabled="isDisabled"
|
||||||
:value="label"
|
:value="label"
|
||||||
:name="name"
|
:name="name"
|
||||||
|
|
Loading…
Reference in New Issue