alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages 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
4 changed files with 14 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/action-sheet/demo/index.vue
+2 -3
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);
},
src/action-sheet/index.less
+3
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;
src/action-sheet/index.tsx
+4 -4
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>
);
}
}
src/action-sheet/test/__snapshots__/index.spec.js.snap
+5 -25
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>`;