[improvement] NumberKeyboard: improve accessibility

packages/number-keyboard/Key.js

@@ -1,5 +1,4 @@
 import { use } from '../utils';
-import { preventDefault } from '../utils/event';
 
 const [sfc, bem] = use('key');
 
@@ -26,12 +25,14 @@ export default sfc({
   methods: {
     onFocus() {
       this.active = true;
-      this.$emit('press', this.text);
     },
 
     onBlur(event) {
-      preventDefault(event, true);
       this.active = false;
+    },
+
+    onClick() {
+      this.$emit('press', this.text);
     }
   },
 
@@ -39,7 +40,10 @@ export default sfc({
     const { onBlur } = this;
     return (
       <i
+        role="button"
+        tabindex="0"
         class={['van-hairline', this.className]}
+        onClick={this.onClick}
         onTouchstart={this.onFocus}
         onTouchmove={onBlur}
         onTouchend={onBlur}

packages/number-keyboard/demo/index.vue

@@ -12,6 +12,7 @@
         :show="keyboard === 'default'"
         :close-button-text="$t('close')"
         extra-key="."
+        safe-area-inset-bottom
         @blur="keyboard = ''"
         @input="onInput"
         @delete="onDelete"
@@ -31,6 +32,7 @@
         :close-button-text="$t('close')"
         theme="custom"
         extra-key="."
+        safe-area-inset-bottom
         @blur="keyboard = ''"
         @input="onInput"
         @delete="onDelete"

packages/number-keyboard/index.js

@@ -100,7 +100,10 @@ export default sfc({
 
       if (action !== this.handlerStatus && this.hideOnClickOutside) {
         this.handlerStatus = action;
-        document.body[(action ? 'add' : 'remove') + 'EventListener']('touchstart', this.onBlur);
+        document.body[(action ? 'add' : 'remove') + 'EventListener'](
+          'touchstart',
+          this.onBlur
+        );
       }
     },
 
@@ -139,6 +142,18 @@ export default sfc({
     const showTitleClose = closeButtonText && theme === 'default';
     const showTitle = title || showTitleClose || titleLeftSlot;
 
+    const Title = showTitle && (
+      <div class={[bem('title'), 'van-hairline--top']}>
+        {titleLeftSlot && <span class={bem('title-left')}>{titleLeftSlot}</span>}
+        {title && <span>{title}</span>}
+        {showTitleClose && (
+          <span role="button" tabindex="0" class={bem('close')} onClick={this.onClose}>
+            {closeButtonText}
+          </span>
+        )}
+      </div>
+    );
+
     return (
       <transition name={this.transition ? 'van-slide-up' : ''}>
         <div
@@ -149,21 +164,7 @@ export default sfc({
           onAnimationend={this.onAnimationEnd}
           onWebkitAnimationEnd={this.onAnimationEnd}
         >
-          {showTitle && (
-            <div class={[bem('title'), 'van-hairline--top']}>
-              {titleLeftSlot && (
-                <span class={bem('title-left')}>
-                  {titleLeftSlot}
-                </span>
-              )}
-              {title && <span>{title}</span>}
-              {showTitleClose && (
-                <span class={bem('close')} onClick={this.onClose}>
-                  {closeButtonText}
-                </span>
-              )}
-            </div>
-          )}
+          {Title}
           <div class={bem('body')}>
             {this.keys.map(key => (
               <Key key={key.text} text={key.text} type={key.type} onPress={onPress} />

packages/number-keyboard/index.less

@@ -99,6 +99,10 @@
     &::after {
       border-color: @number-keyboard-button-background-color;
     }
+
+    &:active {
+      background-color: darken(@number-keyboard-button-background-color, 10%);
+    }
   }
 
   &--gray {

packages/number-keyboard/test/__snapshots__/demo.spec.js.snap

@@ -5,17 +5,17 @@ exports[`renders demo correctly 1`] = `
   <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
       弹出默认键盘
     </span></button>
-    <div class="van-number-keyboard van-number-keyboard--default" style="z-index: 100;" name="van-slide-up">
-      <div class="van-number-keyboard__title van-hairline--top"><span class="van-number-keyboard__close">完成</span></div>
-      <div class="van-number-keyboard__body"><i class="van-hairline van-key">1</i><i class="van-hairline van-key">2</i><i class="van-hairline van-key">3</i><i class="van-hairline van-key">4</i><i class="van-hairline van-key">5</i><i class="van-hairline van-key">6</i><i class="van-hairline van-key">7</i><i class="van-hairline van-key">8</i><i class="van-hairline van-key">9</i><i class="van-hairline van-key van-key--gray">.</i><i class="van-hairline van-key">0</i><i class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
+    <div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="z-index: 100;" name="van-slide-up">
+      <div class="van-number-keyboard__title van-hairline--top"><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
+      <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray">.</i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
     </div>
   </div>
   <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
       弹出自定义键盘
     </span></button>
-    <div class="van-number-keyboard van-number-keyboard--custom" style="z-index: 100; display: none;" name="van-slide-up">
-      <div class="van-number-keyboard__body"><i class="van-hairline van-key">1</i><i class="van-hairline van-key">2</i><i class="van-hairline van-key">3</i><i class="van-hairline van-key">4</i><i class="van-hairline van-key">5</i><i class="van-hairline van-key">6</i><i class="van-hairline van-key">7</i><i class="van-hairline van-key">8</i><i class="van-hairline van-key">9</i><i class="van-hairline van-key van-key--middle">0</i><i class="van-hairline van-key">.</i></div>
-      <div class="van-number-keyboard__sidebar"><i class="van-hairline van-key van-key--delete van-key--big van-key--gray">删除</i><i class="van-hairline van-key van-key--blue van-key--big">完成</i></div>
+    <div class="van-number-keyboard van-number-keyboard--custom van-number-keyboard--safe-area-inset-bottom" style="z-index: 100; display: none;" name="van-slide-up">
+      <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--middle">0</i><i role="button" tabindex="0" class="van-hairline van-key">.</i></div>
+      <div class="van-number-keyboard__sidebar"><i role="button" tabindex="0" class="van-hairline van-key van-key--delete van-key--big van-key--gray">删除</i><i role="button" tabindex="0" class="van-hairline van-key van-key--blue van-key--big">完成</i></div>
     </div>
   </div>
 </div>

packages/number-keyboard/test/__snapshots__/index.spec.js.snap

@@ -3,6 +3,6 @@
 exports[`title-left slot 1`] = `
 <div class="van-number-keyboard van-number-keyboard--default" style="z-index: 100;" name="van-slide-up">
   <div class="van-number-keyboard__title van-hairline--top"><span class="van-number-keyboard__title-left">Custom Title Left</span></div>
-  <div class="van-number-keyboard__body"><i class="van-hairline van-key">1</i><i class="van-hairline van-key">2</i><i class="van-hairline van-key">3</i><i class="van-hairline van-key">4</i><i class="van-hairline van-key">5</i><i class="van-hairline van-key">6</i><i class="van-hairline van-key">7</i><i class="van-hairline van-key">8</i><i class="van-hairline van-key">9</i><i class="van-hairline van-key van-key--gray"></i><i class="van-hairline van-key">0</i><i class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
+  <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
 </div>
 `;

packages/number-keyboard/test/index.spec.js

@@ -1,13 +1,6 @@
 import NumberKeyboard from '..';
 import { mount } from '../../../test/utils';
 
-function mockTouch(wrapper, event, keyIndex) {
-  const key = wrapper.element.querySelectorAll('.van-key')[keyIndex];
-  const touchStart = document.createEvent('CustomEvent');
-  touchStart.initCustomEvent(event, true, true, {});
-  key.dispatchEvent(touchStart);
-}
-
 test('click number key', () => {
   const wrapper = mount(NumberKeyboard, {
     propsData: {
@@ -16,16 +9,15 @@ test('click number key', () => {
     }
   });
 
-  mockTouch(wrapper, 'touchstart', 10);
-  mockTouch(wrapper, 'touchstart', 0);
-  mockTouch(wrapper, 'touchend', 0);
-  wrapper.destroy();
+  wrapper.findAll('.van-key').at(0).trigger('click');
   expect(wrapper.emitted('input')[0][0]).toEqual(1);
+
+  wrapper.destroy();
 });
 
 it('click delete key', () => {
   const wrapper = mount(NumberKeyboard);
-  mockTouch(wrapper, 'touchstart', 11);
+  wrapper.findAll('.van-key').at(11).trigger('click');
   expect(wrapper.emitted('delete')).toBeTruthy();
 });
 
@@ -37,7 +29,7 @@ test('click close button', () => {
     }
   });
 
-  mockTouch(wrapper, 'touchstart', 12);
+  wrapper.findAll('.van-key').at(12).trigger('click');
   expect(wrapper.emitted('close')).toBeTruthy();
 });