feat(Search): improve accessibility (#4522)

This commit is contained in:
neverland 2019-09-21 07:34:46 +08:00 committed by GitHub
parent a1ac34bead
commit 890936f61d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 10 additions and 14 deletions

View File

@ -53,17 +53,17 @@ function Search(
} }
function onCancel() { function onCancel() {
if (slots.action) {
return;
}
emit(ctx, 'input', ''); emit(ctx, 'input', '');
emit(ctx, 'cancel'); emit(ctx, 'cancel');
} }
return ( return (
<div class={bem('action')}> <div class={bem('action')} role="button" tabindex="0" onClick={onCancel}>
{slots.action ? ( {slots.action ? slots.action() : props.actionText || t('cancel')}
slots.action()
) : (
<div onClick={onCancel}>{props.actionText || t('cancel')}</div>
)}
</div> </div>
); );
} }

View File

@ -27,9 +27,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
<div class="van-search__action"> <div role="button" tabindex="0" class="van-search__action">取消</div>
<div>取消</div>
</div>
</div> </div>
</form> </form>
</div> </div>
@ -45,7 +43,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
<div class="van-search__action"> <div role="button" tabindex="0" class="van-search__action">
<div>搜索</div> <div>搜索</div>
</div> </div>
</div> </div>

View File

@ -11,9 +11,7 @@ exports[`action-text prop 1`] = `
</div> </div>
</div> </div>
</div> </div>
<div class="van-search__action"> <div role="button" tabindex="0" class="van-search__action">Custom Text</div>
<div>Custom Text</div>
</div>
</div> </div>
`; `;

View File

@ -35,7 +35,7 @@ test('cancel event', () => {
} }
}); });
const cancel = wrapper.find('.van-search__action div'); const cancel = wrapper.find('.van-search__action');
cancel.trigger('click'); cancel.trigger('click');
expect(onInput).toHaveBeenCalledWith(''); expect(onInput).toHaveBeenCalledWith('');