blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

feat(Uploader): add role, aria and tabindex for a11y (#9905)

Browse Source
This commit is contained in:
neverland 2021-11-19 15:37:41 +08:00 committed by GitHub
parent 880a075340
commit eb6e609a93
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 100 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/vant/src/form/test/__snapshots__/demo.spec.ts.snap
View File

@ -459,7 +459,11 @@ exports[`should render demo and match snapshot 1`] = `
</i>
</div>
</div>
<div class="van-uploader__preview-delete">
<div role="button"
class="van-uploader__preview-delete"
tabindex="0"
aria-label="Delete"
>
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
</i>
</div>

10
packages/vant/src/uploader/UploaderPreviewItem.tsx
View File

@ -1,7 +1,7 @@
import { PropType, defineComponent } from 'vue';
// Utils
import { bem, isImageFile } from './utils';
import { t, bem, isImageFile } from './utils';
import {
isDef,
extend,
@ -71,7 +71,13 @@ export default defineComponent({
const renderDeleteIcon = () => {
if (props.deletable && props.item.status !== 'uploading') {
return (
<div class={bem('preview-delete')} onClick={onDelete}>
<div
role="button"
class={bem('preview-delete')}
tabindex={0}
aria-label={t('delete')}
onClick={onDelete}
>
<Icon name="cross" class={bem('preview-delete-icon')} />
</div>
);

48
packages/vant/src/uploader/test/__snapshots__/demo.spec.ts.snap
View File

@ -29,7 +29,11 @@ exports[`should render demo and match snapshot 1`] = `
</i>
</div>
</div>
<div class="van-uploader__preview-delete">
<div role="button"
class="van-uploader__preview-delete"
tabindex="0"
aria-label="Delete"
>
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
</i>
</div>
@ -45,7 +49,11 @@ exports[`should render demo and match snapshot 1`] = `
</i>
</div>
</div>
<div class="van-uploader__preview-delete">
<div role="button"
class="van-uploader__preview-delete"
tabindex="0"
aria-label="Delete"
>
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
</i>
</div>
@ -114,7 +122,11 @@ exports[`should render demo and match snapshot 1`] = `
Failed
</div>
</div>
<div class="van-uploader__preview-delete">
<div role="button"
class="van-uploader__preview-delete"
tabindex="0"
aria-label="Delete"
>
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
</i>
</div>
@ -144,7 +156,11 @@ exports[`should render demo and match snapshot 1`] = `
</i>
</div>
</div>
<div class="van-uploader__preview-delete">
<div role="button"
class="van-uploader__preview-delete"
tabindex="0"
aria-label="Delete"
>
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
</i>
</div>
@ -175,7 +191,11 @@ exports[`should render demo and match snapshot 1`] = `
</i>
</div>
</div>
<div class="van-uploader__preview-delete">
<div role="button"
class="van-uploader__preview-delete"
tabindex="0"
aria-label="Delete"
>
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
</i>
</div>
@ -234,7 +254,11 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
</div>
<div class="van-uploader__preview-delete">
<div role="button"
class="van-uploader__preview-delete"
tabindex="0"
aria-label="Delete"
>
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
</i>
</div>
@ -305,7 +329,11 @@ exports[`should render demo and match snapshot 1`] = `
</i>
</div>
</div>
<div class="van-uploader__preview-delete">
<div role="button"
class="van-uploader__preview-delete"
tabindex="0"
aria-label="Delete"
>
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
</i>
</div>
@ -323,7 +351,11 @@ exports[`should render demo and match snapshot 1`] = `
</i>
</div>
</div>
<div class="van-uploader__preview-delete">
<div role="button"
class="van-uploader__preview-delete"
tabindex="0"
aria-label="Delete"
>
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
</i>
</div>

54
packages/vant/src/uploader/test/__snapshots__/index.spec.ts.snap
View File

@ -16,7 +16,11 @@ exports[`delete preview image 1`] = `
</i>
</div>
</div>
<div class="van-uploader__preview-delete">
<div role="button"
class="van-uploader__preview-delete"
tabindex="0"
aria-label="Delete"
>
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
</i>
</div>
@ -61,7 +65,11 @@ exports[`disable preview image 2`] = `
test.jpg
</div>
</div>
<div class="van-uploader__preview-delete">
<div role="button"
class="van-uploader__preview-delete"
tabindex="0"
aria-label="Delete"
>
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
</i>
</div>
@ -107,7 +115,11 @@ exports[`image-fit prop 1`] = `
</i>
</div>
</div>
<div class="van-uploader__preview-delete">
<div role="button"
class="van-uploader__preview-delete"
tabindex="0"
aria-label="Delete"
>
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
</i>
</div>
@ -141,7 +153,11 @@ exports[`preview-cover slot 1`] = `
Custom Preview Cover
</div>
</div>
<div class="van-uploader__preview-delete">
<div role="button"
class="van-uploader__preview-delete"
tabindex="0"
aria-label="Delete"
>
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
</i>
</div>
@ -160,7 +176,11 @@ exports[`preview-cover slot 1`] = `
Custom Preview Cover
</div>
</div>
<div class="van-uploader__preview-delete">
<div role="button"
class="van-uploader__preview-delete"
tabindex="0"
aria-label="Delete"
>
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
</i>
</div>
@ -190,7 +210,11 @@ exports[`preview-size prop 1`] = `
test.jpg
</div>
</div>
<div class="van-uploader__preview-delete">
<div role="button"
class="van-uploader__preview-delete"
tabindex="0"
aria-label="Delete"
>
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
</i>
</div>
@ -223,7 +247,11 @@ exports[`render preview image 1`] = `
</i>
</div>
</div>
<div class="van-uploader__preview-delete">
<div role="button"
class="van-uploader__preview-delete"
tabindex="0"
aria-label="Delete"
>
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
</i>
</div>
@ -236,7 +264,11 @@ exports[`render preview image 1`] = `
https://img.yzcdn.cn/vant/test.pdf
</div>
</div>
<div class="van-uploader__preview-delete">
<div role="button"
class="van-uploader__preview-delete"
tabindex="0"
aria-label="Delete"
>
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
</i>
</div>
@ -249,7 +281,11 @@ exports[`render preview image 1`] = `
test.jpg
</div>
</div>
<div class="van-uploader__preview-delete">
<div role="button"
class="van-uploader__preview-delete"
tabindex="0"
aria-label="Delete"
>
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
</i>
</div>

4
packages/vant/src/uploader/utils.ts
View File

@ -5,9 +5,9 @@ import type {
UploaderFileListItem,
} from './types';
const [name, bem] = createNamespace('uploader');
const [name, bem, t] = createNamespace('uploader');
export { name, bem };
export { name, bem, t };
export const toArray = <T>(item: T | T[]): T[] =>
Array.isArray(item) ? item : [item];