Improve keyboard navigation

- QModal - fix not emmiting dismiss on ESC - focus after show - add back noRefocus - QPopover - focus after show - refocus after hide (noRefocus prop) - allow toggle by keyboard ENTER - QDialog - fix button focus - find button by class name (q-btn) - add back noRefocus - QFab - refocus after hide - QTab / QRouteTab - focus with keyboard - allow select with keyboard ENTER - QColor and QDatetime - fix tabindex lost on close - fix popup not closing on blur - QColorPicker - fix incorrect tabindex on disable - allow to select saturation on click on mobile (was working only on drag) - QDatetimePicker.mat - allow keyboard adjustment of all values - QActionsheet - select option with ENTER/SPACE, navigation with TAB - trigger selection on keyup to avoid click on original button - QAutocomplete - use QPopup with noFocus - QKnob, QSlider, QRange - keyboard updating (UP|RIGHT +, DOWN|LEFT -, CTRL+... 10*) - QSelect - remove autofocusFilter - always select filter if present - move keyboard navigation on QPopover - delay popover.reposition on filter to allow resize - v-back-to-top, v-close-overlay, v-go-back, v-ripple - trigger by keyboard ENTER - QInput - set model on ENTER
quasarframework · Jun 8, 2018 · b3cc2f3 · b3cc2f3
1 parent 075fe7e
commit b3cc2f3
Show file tree

Hide file tree

Showing 32 changed files with 333 additions and 77 deletions.
diff --git a/dev/components/components/button.vue b/dev/components/components/button.vue
@@ -50,10 +50,17 @@
         <q-btn label="Go to index page" to="/" />
       </p>
       <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" />
-          <q-btn fab color="primary" icon="android" type="submit" class="on-right" title="Submit" />
+        <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>
 
@@ -480,7 +487,9 @@ export default {
       loading2: false,
       percentage: 0,
       clickTimes: 0,
-      test: 'Initial value'
+      test: 'Initial value',
+      testN: 0,
+      tag: 'button'
     }
   },
   methods: {
@@ -517,9 +526,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')
     }
   },

diff --git a/dev/components/components/fab.vue b/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.

diff --git a/dev/components/components/popover.vue b/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>

diff --git a/dev/components/form/select.vue b/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"/>

diff --git a/src/components/action-sheet/QActionSheet.js b/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)
               }

diff --git a/src/components/autocomplete/QAutocomplete.js b/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: () => {

diff --git a/src/components/color/QColorPicker.js b/src/components/color/QColorPicker.js
@@ -127,8 +127,7 @@ export default {
           ? [{
             name: 'touch-pan',
             modifiers: {
-              prevent: true,
-              stop: true
+              mightPrevent: true
             },
             value: this.__saturationPan
           }]

diff --git a/src/components/datetime/QDatetimePicker.mat.vue b/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'
         }
       }

diff --git a/src/components/datetime/datetime.mat.styl b/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

diff --git a/src/components/dialog/QDialog.js b/src/components/dialog/QDialog.js
@@ -23,6 +23,7 @@ export default {
     preventClose: Boolean,
     noBackdropDismiss: Boolean,
     noEscDismiss: Boolean,
+    noRefocus: Boolean,
     position: String,
     color: {
       type: String,
@@ -86,6 +87,7 @@ export default {
         minimized: true,
         noBackdropDismiss: this.noBackdropDismiss || this.preventClose,
         noEscDismiss: this.noEscDismiss || this.preventClose,
+        noRefocus: this.noRefocus,
         position: this.position
       },
       on: {
@@ -95,7 +97,7 @@ export default {
         show: () => {
           this.$emit('show')
 
-          if (!this.$q.platform.is.desktop || (!this.prompt && !this.options)) {
+          if (!this.$q.platform.is.desktop) {
             return
           }
 
@@ -108,7 +110,7 @@ export default {
             return
           }
 
-          node = this.$refs.modal.$el.getElementsByTagName('BUTTON')
+          node = this.$refs.modal.$el.getElementsByClassName('q-btn')
           if (node.length) {
             node[node.length - 1].focus()
           }