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(ActionSheet): improve accessibility (#4525)

Browse Source
This commit is contained in:
neverland 2019-09-21 12:26:26 +08:00 committed by GitHub
parent 16a5de6d5f
commit 6e5e2f22a9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 14 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/action-sheet/demo/index.vue
View File

@ -7,7 +7,7 @@
<demo-block :title="$t('status')">
<van-button type="primary" @click="show2 = true">{{ $t('buttonText') }}</van-button>
<van-action-sheet v-model="show2" :actions="statusActions" @select="onSelect" />
<van-action-sheet v-model="show2" close-on-click-action :actions="statusActions" />
</demo-block>
<demo-block :title="$t('title2')">
@ -15,9 +15,9 @@
<van-action-sheet
v-model="show3"
:actions="simpleActions"
close-on-click-action
:cancel-text="$t('cancel')"
@cancel="onCancel"
@select="onSelect"
/>
</demo-block>
@ -83,7 +83,6 @@ export default {
methods: {
onSelect(item) {
this.show1 = false;
this.show2 = false;
this.$toast(item.name);
},

3
src/action-sheet/index.less
View File

@ -6,10 +6,13 @@
&__item,
&__cancel {
display: block;
width: 100%;
font-size: @action-sheet-item-font-size;
line-height: @action-sheet-item-height;
text-align: center;
background-color: @action-sheet-item-background;
border: none;
&:active {
background-color: @active-color;

8
src/action-sheet/index.tsx
View File

@ -96,22 +96,22 @@ function ActionSheet(
}
return (
<div
<button
class={[bem('item', { disabled }), item.className, BORDER_TOP]}
style={{ color: item.color }}
onClick={onClickOption}
>
{OptionContent()}
</div>
</button>
);
}
function CancelText() {
if (cancelText) {
return (
<div class={bem('cancel')} onClick={onCancel}>
<button class={bem('cancel')} onClick={onCancel}>
{cancelText}
</div>
</button>
);
}
}

30
src/action-sheet/test/__snapshots__/index.spec.js.snap
View File

@ -1,35 +1,15 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`callback events 1`] = `
<div class="van-popup van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
<div class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></div>
<div class="van-action-sheet__item van-action-sheet__item--disabled van-hairline--top"><span class="van-action-sheet__name">Option</span></div>
<div class="van-action-sheet__item van-action-sheet__item--disabled van-hairline--top">
<div class="van-popup van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button class="van-action-sheet__item van-action-sheet__item--disabled van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button class="van-action-sheet__item van-action-sheet__item--disabled van-hairline--top">
<div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(201, 201, 201); width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
</div>
<div class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span><span class="van-action-sheet__subname">Subname</span></div>
<div class="van-action-sheet__cancel">Cancel</div>
</div>
</button><button class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span><span class="van-action-sheet__subname">Subname</span></button><button class="van-action-sheet__cancel">Cancel</button></div>
`;
exports[`color option 1`] = `
<div class="van-popup van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
<div class="van-action-sheet__item van-hairline--top" style="color: red;"><span class="van-action-sheet__name">Option</span></div>
</div>
`;
exports[`color option 1`] = `<div class="van-popup van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button class="van-action-sheet__item van-hairline--top" style="color: red;"><span class="van-action-sheet__name">Option</span></button></div>`;
exports[`disable lazy-render 1`] = `
<div class="van-popup van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" style="display: none;" name="van-popup-slide-bottom">
<div class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></div>
<div class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></div>
<div class="van-action-sheet__cancel">Cancel</div>
</div>
`;
exports[`disable lazy-render 1`] = `<div class="van-popup van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" style="display: none;" name="van-popup-slide-bottom"><button class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button class="van-action-sheet__cancel">Cancel</button></div>`;
exports[`render title and default slot 1`] = ``;
exports[`round prop 1`] = `
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
<div class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></div>
</div>
`;
exports[`round prop 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button></div>`;