alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages 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
Download Patch File Download Diff File Expand all files Collapse all files
packages/rate/index.less
+7
View File
@@ -9,6 +9,13 @@
padding: 0 @rate-horizontal-padding;
}
&,
&__item {
&:focus {
outline: none;
}
}
&__icon {
width: 1em;
packages/rate/index.tsx
+21 -6
View File
@@ -92,17 +92,26 @@ function Rate(
function renderStar(status: RateStatus, index: number) {
const isFull = status === 'full';
const isVoid = status === 'void';
const score = index + 1;
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
name={isFull ? icon : voidIcon}
size={`${size}px`}
class={bem('icon')}
data-score={index + 1}
data-score={score}
color={disabled ? disabledColor : isFull ? color : voidColor}
onClick={() => {
onSelect(index + 1);
onSelect(score);
}}
/>
{props.allowHalf && (
@@ -110,10 +119,10 @@ function Rate(
name={isVoid ? voidIcon : icon}
size={`${size}px`}
class={bem('icon', 'half')}
data-score={index + 0.5}
data-score={score - 0.5}
color={disabled ? disabledColor : isVoid ? voidColor : color}
onClick={() => {
onSelect(index + 0.5);
onSelect(score - 0.5);
}}
/>
)}
@@ -122,7 +131,13 @@ function Rate(
}
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))}
</div>
);
packages/rate/test/__snapshots__/demo.spec.js.snap
+43 -43
View File
@@ -3,107 +3,107 @@
exports[`renders demo correctly 1`] = `
<div>
<div>
<div 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 tabindex="0" role="radiogroup" class="van-rate">
<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>
<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>
<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>
<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>
<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>
</div>
</div>
<div>
<div 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 tabindex="0" role="radiogroup" class="van-rate">
<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>
<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>
<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>
<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>
<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>
</div>
</div>
<div>
<div 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 tabindex="0" role="radiogroup" class="van-rate">
<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>
<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>
<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>
<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>
<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>
</div>
</div>
<div>
<div 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 tabindex="0" role="radiogroup" class="van-rate">
<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></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></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></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></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></div>
</div>
</div>
<div>
<div 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 tabindex="0" role="radiogroup" class="van-rate">
<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>
<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>
<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>
<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>
<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>
<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>
</div>
</div>
<div>
<div 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 tabindex="0" role="radiogroup" class="van-rate">
<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>
<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>
<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>
<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>
<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>
</div>
</div>
<div>
<div 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 tabindex="0" role="radiogroup" class="van-rate">
<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>
<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>
<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>
<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>
<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>
</div>
</div>