alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(Cell): improve accessibility (#4519)

Browse Source
This commit is contained in:
neverland
2019-09-20 20:29:38 +08:00
committed by GitHub
parent 2d04b23671
commit 3c210f8252
15 changed files with 63 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/cell/index.tsx
+10 -3
View File
@@ -75,11 +75,12 @@ function Cell(
functionalRoute(ctx);
}
const clickable = isLink || props.clickable;
const classes: Mods = {
clickable,
center: props.center,
required: props.required,
borderless: !props.border,
clickable: isLink || props.clickable
borderless: !props.border
};
if (size) {
@@ -87,7 +88,13 @@ function Cell(
}
return (
<div class={bem(classes)} onClick={onClick} {...inherit(ctx)}>
<div
class={bem(classes)}
role={clickable ? 'button' : null}
tabindex={clickable ? 0 : null}
onClick={onClick}
{...inherit(ctx)}
>
{LeftIcon}
{Title}
{Value}
src/cell/test/__snapshots__/demo.spec.js.snap
+6 -6
View File
@@ -41,27 +41,27 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div>
<div class="van-cell van-cell--clickable">
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>单元格</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
<div class="van-cell van-cell--clickable">
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>单元格</span></div>
<div class="van-cell__value"><span>内容</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
<div class="van-cell van-cell--clickable">
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>单元格</span></div>
<div class="van-cell__value"><span>内容</span></div><i class="van-icon van-icon-arrow-down van-cell__right-icon">
<!----></i>
</div>
</div>
<div>
<div class="van-cell van-cell--clickable">
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>URL 跳转</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
<div class="van-cell van-cell--clickable">
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>路由跳转</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
@@ -87,7 +87,7 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div>
<div class="van-cell van-cell--clickable">
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
<div class="van-cell__title"><span class="custom-title">单元格</span> <span class="van-tag van-tag--danger">标签</span></div>
<div class="van-cell__value"><span>内容</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
src/cell/test/__snapshots__/index.spec.js.snap
+1 -1
View File
@@ -8,7 +8,7 @@ exports[`CellGroup title slot 1`] = `
`;
exports[`arrow direction 1`] = `
<div class="van-cell van-cell--clickable"><i class="van-icon van-icon-arrow-down van-cell__right-icon">
<div role="button" tabindex="0" class="van-cell van-cell--clickable"><i class="van-icon van-icon-arrow-down van-cell__right-icon">
<!----></i></div>
`;