blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat(Popover): add tabindex and aria-disabled for a11y (#9889)

Browse Source
This commit is contained in:
neverland 2021-11-17 16:57:47 +08:00 committed by GitHub
parent 5f7e65b637
commit 8214bf8d02
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/vant/src/popover/Popover.tsx
View File

@ -173,6 +173,8 @@ export default defineComponent({
role="menuitem" role="menuitem"
class={[bem('action', { disabled, 'with-icon': icon }), className]} class={[bem('action', { disabled, 'with-icon': icon }), className]}
style={{ color }} style={{ color }}
tabindex={disabled ? undefined : 0}
aria-disabled={disabled || undefined}
onClick={() => onClickAction(action, index)} onClick={() => onClickAction(action, index)}
> >
{icon && ( {icon && (

2
packages/vant/src/popover/test/__snapshots__/index.spec.tsx.snap
View File

@ -3,6 +3,7 @@
exports[`should allow to custom the className of action 1`] = ` exports[`should allow to custom the className of action 1`] = `
<div role="menuitem" <div role="menuitem"
class="van-popover__action foo" class="van-popover__action foo"
tabindex="0"
> >
<div class="van-popover__action-text van-hairline--bottom"> <div class="van-popover__action-text van-hairline--bottom">
Option Option
@ -22,6 +23,7 @@ exports[`should change icon class prefix when using icon-prefix prop 1`] = `
> >
<div role="menuitem" <div role="menuitem"
class="van-popover__action van-popover__action--with-icon" class="van-popover__action van-popover__action--with-icon"
tabindex="0"
> >
<i class="van-badge__wrapper my-icon my-icon-success van-popover__action-icon"> <i class="van-badge__wrapper my-icon my-icon-success van-popover__action-icon">
</i> </i>

2
packages/vant/src/rate/Rate.tsx
View File

@ -196,7 +196,7 @@ export default defineComponent({
style={style} style={style}
class={bem('item')} class={bem('item')}
tabindex={disabled ? undefined : 0} tabindex={disabled ? undefined : 0}
aria-setsize={+count} aria-setsize={count}
aria-posinset={score} aria-posinset={score}
aria-checked={!isVoid} aria-checked={!isVoid}
onClick={onClickItem} onClick={onClickItem}

4
packages/vant/src/slider/Slider.tsx
View File

@ -295,9 +295,9 @@ export default defineComponent({
role="slider" role="slider"
class={getButtonClassName(index)} class={getButtonClassName(index)}
tabindex={props.disabled ? undefined : 0} tabindex={props.disabled ? undefined : 0}
aria-valuemin={+props.min} aria-valuemin={props.min}
aria-valuenow={current} aria-valuenow={current}
aria-valuemax={+props.max} aria-valuemax={props.max}
aria-disabled={props.disabled || undefined} aria-disabled={props.disabled || undefined}
aria-readonly={props.readonly || undefined} aria-readonly={props.readonly || undefined}
aria-orientation={props.vertical ? 'vertical' : 'horizontal'} aria-orientation={props.vertical ? 'vertical' : 'horizontal'}

6
packages/vant/src/stepper/Stepper.tsx
View File

@ -313,9 +313,9 @@ export default defineComponent({
// set keyboard in modern browsers // set keyboard in modern browsers
inputmode={props.integer ? 'numeric' : 'decimal'} inputmode={props.integer ? 'numeric' : 'decimal'}
placeholder={props.placeholder} placeholder={props.placeholder}
aria-valuemax={+props.max} aria-valuemax={props.max}
aria-valuemin={+props.min} aria-valuemin={props.min}
aria-valuenow={+current.value} aria-valuenow={current.value}
onBlur={onBlur} onBlur={onBlur}
onInput={onInput} onInput={onInput}
onFocus={onFocus} onFocus={onFocus}

2
packages/vant/src/stepper/test/__snapshots__/demo.spec.ts.snap
View File

@ -206,7 +206,7 @@ exports[`should render demo and match snapshot 1`] = `
inputmode="decimal" inputmode="decimal"
aria-valuemax="Infinity" aria-valuemax="Infinity"
aria-valuemin="1" aria-valuemin="1"
aria-valuenow="1" aria-valuenow="1.0"
> >
<button type="button" <button type="button"
class="van-stepper__plus van-haptics-feedback" class="van-stepper__plus van-haptics-feedback"