alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 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/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>