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

[improvement] Rate: improve accessibility

Browse Source
This commit is contained in:
陈嘉涵 2019-05-25 15:18:30 +08:00
parent 38afa3dffd
commit 9182f064b9
5 changed files with 74 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/markdown/changelog.zh-CN.md
View File

@ -7,6 +7,7 @@
对以下组件增加了无障碍访问的支持： 对以下组件增加了无障碍访问的支持：
- List - List
- Rate
- Dialog - Dialog
- Slider - Slider
- Switch - Switch

4
packages/circle/test/__snapshots__/demo.spec.js.snap
View File

@ -5,9 +5,9 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div class="van-circle" style="width: 120px; height: 120px;"><svg viewBox="0 0 1060 1060"> <div class="van-circle" style="width: 120px; height: 120px;"><svg viewBox="0 0 1060 1060">
<path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path> <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
<path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__layer" style="stroke: #1989fa; stroke-dashoffset: 3083.48px; stroke-width: 41px;"></path> <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__layer" style="stroke: #1989fa; stroke-dashoffset: 3140px; stroke-width: 41px;"></path>
</svg> </svg>
<div class="van-circle__text">2%</div> <div class="van-circle__text">0%</div>
</div> </div>
<div class="van-circle" style="width: 120px; height: 120px;"><svg viewBox="0 0 1060 1060"> <div class="van-circle" style="width: 120px; height: 120px;"><svg viewBox="0 0 1060 1060">
<path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__hover" style="fill: #fff; stroke: #ebedf0; stroke-width: 60px;"></path> <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__hover" style="fill: #fff; stroke: #ebedf0; stroke-width: 60px;"></path>

7
packages/rate/index.less
View File

@ -9,6 +9,13 @@
padding: 0 @rate-horizontal-padding; padding: 0 @rate-horizontal-padding;
} }
&,
&__item {
&:focus {
outline: none;
}
}
&__icon { &__icon {
width: 1em; width: 1em;

27
packages/rate/index.tsx
View File

@ -92,17 +92,26 @@ function Rate(
function renderStar(status: RateStatus, index: number) { function renderStar(status: RateStatus, index: number) {
const isFull = status === 'full'; const isFull = status === 'full';
const isVoid = status === 'void'; const isVoid = status === 'void';
const score = index + 1;
return ( return (
<div key={index} class={bem('item')}> <div
key={index}
role="radio"
tabindex="0"
aria-posinset={score}
aria-setsize={props.count}
aria-checked={String(!isVoid)}
class={bem('item')}
>
<Icon <Icon
name={isFull ? icon : voidIcon} name={isFull ? icon : voidIcon}
size={`${size}px`} size={`${size}px`}
class={bem('icon')} class={bem('icon')}
data-score={index + 1} data-score={score}
color={disabled ? disabledColor : isFull ? color : voidColor} color={disabled ? disabledColor : isFull ? color : voidColor}
onClick={() => { onClick={() => {
onSelect(index + 1); onSelect(score);
}} }}
/> />
{props.allowHalf && ( {props.allowHalf && (
@ -110,10 +119,10 @@ function Rate(
name={isVoid ? voidIcon : icon} name={isVoid ? voidIcon : icon}
size={`${size}px`} size={`${size}px`}
class={bem('icon', 'half')} class={bem('icon', 'half')}
data-score={index + 0.5} data-score={score - 0.5}
color={disabled ? disabledColor : isVoid ? voidColor : color} color={disabled ? disabledColor : isVoid ? voidColor : color}
onClick={() => { onClick={() => {
onSelect(index + 0.5); onSelect(score - 0.5);
}} }}
/> />
)} )}
@ -122,7 +131,13 @@ function Rate(
} }
return ( return (
<div class={bem()} {...inherit(ctx)} onTouchmove={onTouchMove}> <div
class={bem()}
tabindex="0"
role="radiogroup"
{...inherit(ctx)}
onTouchmove={onTouchMove}
>
{list.map((status, index) => renderStar(status, index))} {list.map((status, index) => renderStar(status, index))}
</div> </div>
); );

86
packages/rate/test/__snapshots__/demo.spec.js.snap
View File

@ -3,107 +3,107 @@
exports[`renders demo correctly 1`] = ` exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div class="van-rate"> <div tabindex="0" role="radiogroup" class="van-rate">
<div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;"> <div role="radio" tabindex="0" aria-posinset="1" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;"> <div role="radio" tabindex="0" aria-posinset="2" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;"> <div role="radio" tabindex="0" aria-posinset="3" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;"> <div role="radio" tabindex="0" aria-posinset="4" aria-setsize="5" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;"> <div role="radio" tabindex="0" aria-posinset="5" aria-setsize="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;">
<!----></i></div> <!----></i></div>
</div> </div>
</div> </div>
<div> <div>
<div class="van-rate"> <div tabindex="0" role="radiogroup" class="van-rate">
<div class="van-rate__item"><i data-score="1" class="van-icon van-icon-like van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;"> <div role="radio" tabindex="0" aria-posinset="1" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-like van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div class="van-rate__item"><i data-score="2" class="van-icon van-icon-like van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;"> <div role="radio" tabindex="0" aria-posinset="2" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-like van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div class="van-rate__item"><i data-score="3" class="van-icon van-icon-like van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;"> <div role="radio" tabindex="0" aria-posinset="3" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-like van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div class="van-rate__item"><i data-score="4" class="van-icon van-icon-like-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;"> <div role="radio" tabindex="0" aria-posinset="4" aria-setsize="5" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-like-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div class="van-rate__item"><i data-score="5" class="van-icon van-icon-like-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;"> <div role="radio" tabindex="0" aria-posinset="5" aria-setsize="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-like-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;">
<!----></i></div> <!----></i></div>
</div> </div>
</div> </div>
<div> <div>
<div class="van-rate"> <div tabindex="0" role="radiogroup" class="van-rate">
<div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 68, 68); font-size: 25px;"> <div role="radio" tabindex="0" aria-posinset="1" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 68, 68); font-size: 25px;">
<!----></i></div> <!----></i></div>
<div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 68, 68); font-size: 25px;"> <div role="radio" tabindex="0" aria-posinset="2" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 68, 68); font-size: 25px;">
<!----></i></div> <!----></i></div>
<div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 68, 68); font-size: 25px;"> <div role="radio" tabindex="0" aria-posinset="3" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 68, 68); font-size: 25px;">
<!----></i></div> <!----></i></div>
<div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;"> <div role="radio" tabindex="0" aria-posinset="4" aria-setsize="5" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
<!----></i></div> <!----></i></div>
<div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;"> <div role="radio" tabindex="0" aria-posinset="5" aria-setsize="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
<!----></i></div> <!----></i></div>
</div> </div>
</div> </div>
<div> <div>
<div class="van-rate"> <div tabindex="0" role="radiogroup" class="van-rate">
<div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 25px;"> <div role="radio" tabindex="0" aria-posinset="1" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 25px;">
<!----></i><i data-score="0.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(255, 210, 30); font-size: 25px;"> <!----></i><i data-score="0.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(255, 210, 30); font-size: 25px;">
<!----></i></div> <!----></i></div>
<div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 25px;"> <div role="radio" tabindex="0" aria-posinset="2" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 25px;">
<!----></i><i data-score="1.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(255, 210, 30); font-size: 25px;"> <!----></i><i data-score="1.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(255, 210, 30); font-size: 25px;">
<!----></i></div> <!----></i></div>
<div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;"> <div role="radio" tabindex="0" aria-posinset="3" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
<!----></i><i data-score="2.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(255, 210, 30); font-size: 25px;"> <!----></i><i data-score="2.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(255, 210, 30); font-size: 25px;">
<!----></i></div> <!----></i></div>
<div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;"> <div role="radio" tabindex="0" aria-posinset="4" aria-setsize="5" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
<!----></i><i data-score="3.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(238, 238, 238); font-size: 25px;"> <!----></i><i data-score="3.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(238, 238, 238); font-size: 25px;">
<!----></i></div> <!----></i></div>
<div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;"> <div role="radio" tabindex="0" aria-posinset="5" aria-setsize="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
<!----></i><i data-score="4.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(238, 238, 238); font-size: 25px;"> <!----></i><i data-score="4.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(238, 238, 238); font-size: 25px;">
<!----></i></div> <!----></i></div>
</div> </div>
</div> </div>
<div> <div>
<div class="van-rate"> <div tabindex="0" role="radiogroup" class="van-rate">
<div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;"> <div role="radio" tabindex="0" aria-posinset="1" aria-setsize="6" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;"> <div role="radio" tabindex="0" aria-posinset="2" aria-setsize="6" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;"> <div role="radio" tabindex="0" aria-posinset="3" aria-setsize="6" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;"> <div role="radio" tabindex="0" aria-posinset="4" aria-setsize="6" aria-checked="true" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;"> <div role="radio" tabindex="0" aria-posinset="5" aria-setsize="6" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div class="van-rate__item"><i data-score="6" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;"> <div role="radio" tabindex="0" aria-posinset="6" aria-setsize="6" aria-checked="false" class="van-rate__item"><i data-score="6" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;">
<!----></i></div> <!----></i></div>
</div> </div>
</div> </div>
<div> <div>
<div class="van-rate"> <div tabindex="0" role="radiogroup" class="van-rate">
<div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(189, 189, 189); font-size: 20px;"> <div role="radio" tabindex="0" aria-posinset="1" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(189, 189, 189); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(189, 189, 189); font-size: 20px;"> <div role="radio" tabindex="0" aria-posinset="2" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(189, 189, 189); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(189, 189, 189); font-size: 20px;"> <div role="radio" tabindex="0" aria-posinset="3" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(189, 189, 189); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(189, 189, 189); font-size: 20px;"> <div role="radio" tabindex="0" aria-posinset="4" aria-setsize="5" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(189, 189, 189); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(189, 189, 189); font-size: 20px;"> <div role="radio" tabindex="0" aria-posinset="5" aria-setsize="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(189, 189, 189); font-size: 20px;">
<!----></i></div> <!----></i></div>
</div> </div>
</div> </div>
<div> <div>
<div class="van-rate"> <div tabindex="0" role="radiogroup" class="van-rate">
<div class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;"> <div role="radio" tabindex="0" aria-posinset="1" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;"> <div role="radio" tabindex="0" aria-posinset="2" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;"> <div role="radio" tabindex="0" aria-posinset="3" aria-setsize="5" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;"> <div role="radio" tabindex="0" aria-posinset="4" aria-setsize="5" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;">
<!----></i></div> <!----></i></div>
<div class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;"> <div role="radio" tabindex="0" aria-posinset="5" aria-setsize="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 20px;">
<!----></i></div> <!----></i></div>
</div> </div>
</div> </div>