Improve keyboard navigation for all framework

dev/components/components/button.vue

@@ -54,10 +54,17 @@
       <q-btn to="/" label="To index in 2s" @click="linkClick" glossy color="secondary" class="q-ml-md" />
       <br><br>
       <div>
-        <form @submit.prevent="submit" @reset.prevent="reset" class="shadow-2 row q-pa-md items-center">
-          <q-input v-model="test" class="col" />
-          <q-btn fab-mini color="primary" icon="android" type="reset" class="on-right" title="Reset" @click="onClick" />
-          <q-btn fab color="primary" icon="android" type="submit" class="on-right" title="Submit" @click="onClick" />
+        <form @submit.prevent="submit" @reset.prevent="reset" class="shadow-2 q-pa-md row items-center">
+          <div class="col row items-center gutter-md">
+            <div class="col">
+              <q-input v-model="test" />
+            </div>
+            <div class="col">
+              <q-input type="number" v-model="testN" />
+            </div>
+          </div>
+          <q-btn :tag="tag" fab-mini color="primary" icon="android" type="reset" class="on-right" title="Reset" @click="onClick" />
+          <q-btn :tag="tag" fab color="primary" icon="android" type="submit" class="on-right" title="Submit" @click="onClick" />
         </form>
       </div>
 
@@ -500,6 +507,7 @@ export default {
       percentage: 0,
       clickTimes: 0,
       test: 'Initial value',
+      testN: 0,
       tag: 'button'
     }
   },
@@ -537,9 +545,11 @@ export default {
     },
     submit () {
       this.$q.notify('Submit called')
+      console.log('test', this.test, 'testN', this.testN)
     },
     reset () {
       this.test = 'Initial value'
+      this.testN = 0
       this.$q.notify('Reset called')
     },
     onClick (e) {

dev/components/components/fab.vue

@@ -19,7 +19,6 @@
 
         <br>
 
-        <q-toggle v-model="toggle" class="z-max fixed-top" />
         <q-fab v-model="toggle" icon="keyboard_arrow_left" direction="left">
           <q-fab-action @click="notify('mail')" icon="mail" />
           <q-fab-action @click="notify('alarm')" icon="alarm" />
@@ -52,6 +51,8 @@
         </q-fab>
       </div>
 
+      <q-toggle v-model="toggle" class="z-max fixed-top" />
+
       <p class="caption" style="margin-bottom: 100px;">
         There's also the absolute positioned one on bottom
         right of screen which maintains position on Page scroll.

dev/components/components/popover.vue

@@ -17,6 +17,8 @@
                 :key="n"
                 v-close-overlay
                 @click.native="showNotify()"
+                @keyup.native.13.32="showNotify()"
+                :tabindex="0"
               >
                 <q-item-main label="Label" sublabel="Click me" />
               </q-item>
@@ -32,6 +34,8 @@
                 :key="n"
                 v-close-overlay
                 @click.native="showNotify()"
+                @keyup.native.13.32="showNotify()"
+                :tabindex="0"
               >
                 <q-item-main label="X Label" sublabel="X Click me" />
               </q-item>
@@ -57,7 +61,9 @@
                     v-for="n in 3"
                     :key="n"
                     v-close-overlay
-                    @click="showNotify()"
+                    @click.native="showNotify()"
+                    @keyup.native.13.32="showNotify()"
+                    :tabindex="0"
                   >
                     <q-item-main label="Label" />
                   </q-item>
@@ -118,6 +124,8 @@
               src="~assets/map.png"
               style="height: 150px; width: 200px;"
               @click="showNotify(), $refs.popover3.hide()"
+              @keyup.13.32="showNotify(), $refs.popover3.hide()"
+              :tabindex="0"
             >
           </q-popover>
         </q-btn>
@@ -140,6 +148,8 @@
               v-for="n in 20"
               :key="n"
               @click.native="showNotify(), $refs.popover5.hide()"
+              @keyup.native.13.32="showNotify(), $refs.popover5.hide()"
+              :tabindex="0"
             >
               <q-item-main label="Label" sublabel="Click me" />
             </q-item>

dev/components/form/select.vue

@@ -58,11 +58,11 @@
       <q-select simple v-model="select" :options="selectOptions"/>
 
       <p class="caption">With Filter</p>
-      <q-select filter autofocus-filter v-model="select" :options="selectListOptions"/>
-      <q-select filter autofocus-filter v-model="select" :options="selectLongListOptions"/>
-      <q-select filter autofocus-filter inverted v-model="select" :options="selectListOptions"/>
-      <q-select filter inverted v-model="select" :options="selectLongListOptions"/>
-      <q-select filter multiple checkbox v-model="multipleSelect" :options="selectListOptions"/>
+      <q-select filter v-model="select" :options="selectListOptions" />
+      <q-select filter v-model="select" :options="selectLongListOptions" />
+      <q-select filter inverted v-model="select" :options="selectListOptions" />
+      <q-select filter inverted v-model="select" :options="selectLongListOptions" />
+      <q-select filter multiple checkbox v-model="multipleSelect" :options="selectListOptions" />
 
       <p class="caption">With Static Label</p>
       <q-select multiple v-model="multipleSelect" :options="selectOptions" static-label="Company"/>

src/components/action-sheet/QActionSheet.js

@@ -59,7 +59,7 @@ export default {
             },
             nativeOn: {
               click: this.__onCancel,
-              keydown: this.__onKeyCancel
+              keyup: this.__onKeyCancel
             }
           }, [
             h(QItemMain, { staticClass: 'text-center text-primary' }, [
@@ -116,7 +116,7 @@ export default {
           },
           [this.grid ? 'on' : 'nativeOn']: {
             click: () => this.__onOk(action),
-            keydown: e => {
+            keyup: e => {
               if (getEventKey(e) === /* Enter */ 13) {
                 this.__onOk(action)
               }

src/components/autocomplete/QAutocomplete.js

@@ -218,7 +218,8 @@ export default {
       'class': dark ? 'bg-dark' : null,
       props: {
         fit: true,
-        anchorClick: false
+        anchorClick: false,
+        noFocus: true
       },
       on: {
         show: () => {

src/components/color/QColorPicker.js

@@ -127,8 +127,7 @@ export default {
           ? [{
             name: 'touch-pan',
             modifiers: {
-              prevent: true,
-              stop: true
+              mightPrevent: true
             },
             value: this.__saturationPan
           }]

src/components/datetime/QDatetimePicker.mat.vue

@@ -7,58 +7,88 @@
           <span
             :class="{active: view === 'month'}"
             class="q-datetime-link small col-auto col-md-12"
-            @click="!disable && (view = 'month')"
+            @keydown.down.left="setMonth(month - 1, true)"
+            @keydown.up.right="setMonth(month + 1, true)"
+            :tabindex="0"
           >
-            {{ monthString }}
+            <span @click="!disable && (view = 'month')" :tabindex="-1">
+              {{ monthString }}
+            </span>
           </span>
           <span
             :class="{active: view === 'day'}"
             class="q-datetime-link col-auto col-md-12"
-            @click="!disable && (view = 'day')"
+            @keydown.down.left="setDay(day - 1, true)"
+            @keydown.up.right="setDay(day + 1, true)"
+            :tabindex="0"
           >
-            {{ day }}
+            <span @click="!disable && (view = 'day')" :tabindex="-1">
+              {{ day }}
+            </span>
           </span>
           <span
             :class="{active: view === 'year'}"
             class="q-datetime-link small col-auto col-md-12"
-            @click="!disable && (view = 'year')"
+            @keydown.down.left="setYear(year - 1, true)"
+            @keydown.up.right="setYear(year + 1, true)"
+            :tabindex="0"
           >
-            {{ year }}
+            <span @click="!disable && (view = 'year')" :tabindex="-1">
+              {{ year }}
+            </span>
           </span>
         </div>
       </div>
       <div
         v-if="typeHasTime"
         class="q-datetime-time row flex-center"
       >
-        <div class="q-datetime-clockstring col-auto col-md-12">
+        <div class="q-datetime-clockstring col-auto col-md-12 row no-wrap flex-center">
           <span
             :class="{active: view === 'hour'}"
-            class="q-datetime-link col-auto col-md-12"
-            @click="!disable && (view = 'hour')"
+            class="q-datetime-link col-md text-right q-pr-sm"
+            @keydown.down.left="setHour(hour - 1, true)"
+            @keydown.up.right="setHour(hour + 1, true)"
+            :tabindex="0"
           >
-            {{ __pad(hour, '&nbsp;&nbsp;') }}
+            <span @click="!disable && (view = 'hour')" :tabindex="-1">
+              {{ hour }}
+            </span>
           </span>
           <span style="opacity: 0.6">:</span>
           <span
             :class="{active: view === 'minute'}"
-            class="q-datetime-link col-auto col-md-12"
-            @click="!disable && (view = 'minute')"
+            class="q-datetime-link col-md text-left q-pl-sm"
+            @keydown.down.left="setMinute(minute - 1, true)"
+            @keydown.up.right="setMinute(minute + 1, true)"
+            :tabindex="0"
           >
-            {{ __pad(minute) }}
+            <span @click="!disable && (view = 'minute')" :tabindex="-1">
+              {{ __pad(minute) }}
+            </span>
           </span>
         </div>
         <div v-if="!computedFormat24h" class="q-datetime-ampm column col-auto col-md-12 justify-around">
           <div
             :class="{active: am}"
             class="q-datetime-link"
-            @click="toggleAmPm()"
-          >AM</div>
+            @keyup.13.32="toggleAmPm()"
+            :tabindex="0"
+          >
+            <span @click="toggleAmPm()" :tabindex="-1">
+              AM
+            </span>
+          </div>
           <div
             :class="{active: !am}"
             class="q-datetime-link"
-            @click="toggleAmPm()"
-          >PM</div>
+            @keyup.13.32="toggleAmPm()"
+            :tabindex="0"
+          >
+            <span @click="toggleAmPm()" :tabindex="-1">
+              PM
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -76,6 +106,7 @@
             :class="{active: n + yearMin === year}"
             :disable="!editable"
             @click="setYear(n + yearMin)"
+            :tabindex="-1"
           >
             {{ n + yearMin }}
           </q-btn>
@@ -93,6 +124,7 @@
             :class="{active: month === index + monthMin}"
             :disable="!editable"
             @click="setMonth(index + monthMin, true)"
+            :tabindex="-1"
           >
             {{ $q.i18n.date.months[index + monthMin - 1] }}
           </q-btn>
@@ -112,6 +144,7 @@
               :repeat-timeout="__repeatTimeout"
               :disable="beforeMinDays > 0 || disable || readonly"
               @click="setMonth(month - 1)"
+              :tabindex="-1"
             />
             <div class="col q-datetime-month-stamp">
               {{ monthStamp }}
@@ -125,6 +158,7 @@
               :repeat-timeout="__repeatTimeout"
               :disable="afterMaxDays > 0 || disable || readonly"
               @click="setMonth(month + 1)"
+              :tabindex="-1"
             />
           </div>
           <div class="q-datetime-weekdays row items-center justify-start">
@@ -392,25 +426,29 @@ export default {
   },
   methods: {
     /* date */
-    setYear (value) {
+    setYear (value, skipView) {
       if (this.editable) {
-        this.view = 'day'
+        if (!skipView) {
+          this.view = 'day'
+        }
         this.model = new Date(this.model.setFullYear(this.__parseTypeValue('year', value)))
       }
     },
-    setMonth (value) {
+    setMonth (value, skipView) {
       if (this.editable) {
-        this.view = 'day'
+        if (!skipView) {
+          this.view = 'day'
+        }
         this.model = adjustDate(this.model, {month: value})
       }
     },
-    setDay (value) {
+    setDay (value, skipView) {
       if (this.editable) {
         this.model = new Date(this.model.setDate(this.__parseTypeValue('date', value)))
         if (this.type === 'date') {
           this.$emit('canClose')
         }
-        else {
+        else if (!skipView) {
           this.view = 'hour'
         }
       }

src/components/datetime/datetime.mat.styl

@@ -39,6 +39,10 @@ div + .q-datetime-time
 .q-datetime-link
   cursor pointer
   opacity .6
+  > span
+    display inline-block
+    width 100%
+    outline none
   &.active
     opacity 1
 
@@ -168,10 +172,11 @@ div + .q-datetime-time
     &.q-datetime-day-active > span, &:not(.q-datetime-fillerday):not(.disabled):not(.q-datetime-day-active):hover
       color black
 
-body.desktop .q-datetime-clock-position:not(.active):hover
-  background $grey-2 !important
-body.desktop .q-datetime-dark .q-datetime-clock-position:not(.active):hover
-  color black
+body.desktop
+  .q-datetime-clock-position:not(.active):hover
+    background $grey-2 !important
+  .q-datetime-dark .q-datetime-clock-position:not(.active):hover
+    color black
 
 .q-datetime-clock-position
   position absolute

src/components/fab/QFab.js

@@ -8,7 +8,10 @@ export default {
   mixins: [FabMixin, ModelToggleMixin],
   provide () {
     return {
-      __qFabClose: this.hide
+      __qFabClose: evt => this.hide(evt).then(() => {
+        this.$refs.trigger && this.$refs.trigger.$el && this.$refs.trigger.$el.focus()
+        return evt
+      })
     }
   },
   props: {
@@ -37,6 +40,7 @@ export default {
       }
     }, [
       h(QBtn, {
+        ref: 'trigger',
         props: {
           fab: true,
           outline: this.outline,
@@ -64,7 +68,7 @@ export default {
       h('div', {
         staticClass: 'q-fab-actions flex no-wrap inline items-center',
         'class': `q-fab-${this.direction}`
-      }, this.$slots.default)
+      }, this.showing ? this.$slots.default : null)
     ])
   }
 }