feat(QScrollArea): allow scrolling element to be focusable quasarframework#8893 (quasarframework#8896)

quasarframework#8893

Author: pdanpdan

ui/dev/src/pages/components/scroll-area.vue

@@ -4,6 +4,7 @@
     <q-toggle v-model="customStyle" label="Custom style" />
     <q-toggle v-model="alwaysVisible" toggle-indeterminate label="Always visible" />
     <q-toggle v-model="darkVariant" toggle-indeterminate label="Dark variant" />
+    <q-toggle v-model="focusable" label="Focusable" />
 
     <div style="height: 300px;" />
 
@@ -16,6 +17,7 @@
       :visible="alwaysVisible"
       :bar-style="customStyle === true ? customBarStyle : void 0"
       :thumb-style="customStyle === true ? customThumbStyle : void 0"
+      :tabindex="focusable === true ? 0 : void 0"
     >
       <div :class="{ 'flex no-wrap' : horizontal }">
         <div style="margin-top: 150px" />
@@ -34,6 +36,7 @@
       :horizontal="horizontal"
       :visible="alwaysVisible"
       dark
+      :tabindex="focusable === true ? 0 : void 0"
     >
       <div :class="{ 'flex no-wrap' : horizontal }">
         <div style="margin-top: 150px" />
@@ -73,7 +76,8 @@ export default {
       number: 10,
       horizontal: false,
       alwaysVisible: true,
-      customStyle: true
+      customStyle: true,
+      focusable: true
     }
   },
 

ui/src/components/scroll-area/QScrollArea.js

@@ -37,7 +37,9 @@ export default Vue.extend({
       default: null
     },
 
-    horizontal: Boolean
+    horizontal: Boolean,
+
+    tabindex: [String, Number]
   },
 
   data () {
@@ -138,6 +140,12 @@ export default Vue.extend({
         },
         value: this.__panThumb
       }]
+    },
+
+    scrollAttrs () {
+      if (this.tabindex !== void 0) {
+        return { tabindex: this.tabindex }
+      }
     }
   },
 
@@ -267,7 +275,8 @@ export default Vue.extend({
     }, [
       h('div', {
         ref: 'target',
-        staticClass: 'scroll relative-position fit hide-scrollbar'
+        staticClass: 'scroll relative-position fit hide-scrollbar',
+        attrs: this.scrollAttrs
       }, [
         h('div', {
           staticClass: 'absolute',

ui/src/components/scroll-area/QScrollArea.json

@@ -57,6 +57,10 @@
       "type": "Boolean",
       "desc": "Register for horizontal scroll instead of vertical (which is default)",
       "category": "behavior"
+    },
+
+    "tabindex": {
+      "extends": "tabindex"
     }
   },