blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

feat(Cascader): add role, aria and tabindex for a11y (#9886)

Browse Source 
* feat(Cascader): add role, aria and tabindex for a11y

* fix: typing

* fix: snapshot
This commit is contained in:
neverland 2021-11-17 11:51:56 +08:00 committed by GitHub
parent 2e67881ca7
commit fe7f5e28d7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 65 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/vant/src/calendar/CalendarHeader.tsx
View File

@ -26,9 +26,8 @@ export default defineComponent({
}
};
const onClickSubtitle = (event: MouseEvent) => {
const onClickSubtitle = (event: MouseEvent) =>
emit('click-subtitle', event);
};
const renderSubtitle = () => {
if (props.showSubtitle) {

20
packages/vant/src/cascader/Cascader.tsx
View File

@ -205,8 +205,10 @@ export default defineComponent({
selectedOption: CascaderOption | null,
tabIndex: number
) => {
const selected =
selectedOption && option[valueKey] === selectedOption[valueKey];
const { disabled } = option;
const selected = !!(
selectedOption && option[valueKey] === selectedOption[valueKey]
);
const color = option.color || (selected ? props.activeColor : undefined);
const Text = slots.option ? (
@ -217,14 +219,12 @@ export default defineComponent({
return (
<li
class={[
bem('option', {
selected,
disabled: option.disabled,
}),
option.className,
]}
role="menuitemradio"
class={[bem('option', { selected, disabled }), option.className]}
style={{ color }}
tabindex={disabled ? undefined : selected ? 0 : -1}
aria-checked={selected}
aria-disabled={disabled || undefined}
onClick={() => onSelect(option, tabIndex)}
>
{Text}
@ -240,7 +240,7 @@ export default defineComponent({
selectedOption: CascaderOption | null,
tabIndex: number
) => (
<ul class={bem('options')}>
<ul role="menu" class={bem('options')}>
{options.map((option) =>
renderOption(option, selectedOption, tabIndex)
)}

66
packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap
View File

@ -6,7 +6,11 @@ exports[`should change close icon when using close-icon prop 1`] = `
`;
exports[`should render option slot correctly 1`] = `
<li class="van-cascader__option">
<li role="menuitemradio"
class="van-cascader__option"
tabindex="-1"
aria-checked="false"
>
Custom Option foo
</li>
`;
@ -14,15 +18,25 @@ exports[`should render option slot correctly 1`] = `
exports[`should render options-top、options-bottom slots correctly 1`] = `
<div class="van-tab__panel">
Top, tab index: 0
<ul class="van-cascader__options">
<li class="van-cascader__option van-cascader__option--selected">
<ul role="menu"
class="van-cascader__options"
>
<li role="menuitemradio"
class="van-cascader__option van-cascader__option--selected"
tabindex="0"
aria-checked="true"
>
<span>
Zhejiang
</span>
<i class="van-badge__wrapper van-icon van-icon-success van-cascader__selected-icon">
</i>
</li>
<li class="van-cascader__option">
<li role="menuitemradio"
class="van-cascader__option"
tabindex="-1"
aria-checked="false"
>
<span>
Jiangsu
</span>
@ -39,7 +53,11 @@ exports[`should render title slot correctly 1`] = `
`;
exports[`should select correct option when value changed 1`] = `
<li class="van-cascader__option van-cascader__option--selected">
<li role="menuitemradio"
class="van-cascader__option van-cascader__option--selected"
tabindex="0"
aria-checked="true"
>
<span>
Wenzhou
</span>
@ -102,13 +120,23 @@ exports[`should update tabs when previous tab is clicked 1`] = `
style="width: 100px;"
>
<div class="van-tab__panel">
<ul class="van-cascader__options">
<li class="van-cascader__option">
<ul role="menu"
class="van-cascader__options"
>
<li role="menuitemradio"
class="van-cascader__option"
tabindex="-1"
aria-checked="false"
>
<span>
Zhejiang
</span>
</li>
<li class="van-cascader__option van-cascader__option--selected">
<li role="menuitemradio"
class="van-cascader__option van-cascader__option--selected"
tabindex="0"
aria-checked="true"
>
<span>
Jiangsu
</span>
@ -127,18 +155,32 @@ exports[`should update tabs when previous tab is clicked 1`] = `
style="width: 100px;"
>
<div class="van-tab__panel">
<ul class="van-cascader__options">
<li class="van-cascader__option">
<ul role="menu"
class="van-cascader__options"
>
<li role="menuitemradio"
class="van-cascader__option"
tabindex="-1"
aria-checked="false"
>
<span>
Nanjing
</span>
</li>
<li class="van-cascader__option">
<li role="menuitemradio"
class="van-cascader__option"
tabindex="-1"
aria-checked="false"
>
<span>
Wuxi
</span>
</li>
<li class="van-cascader__option">
<li role="menuitemradio"
class="van-cascader__option"
tabindex="-1"
aria-checked="false"
>
<span>
Xuzhou
</span>