Handle keyboard-dependent focus outlines in Vuex

kolibri/core/assets/src/core-app/index.js

@@ -11,6 +11,7 @@ require('kolibri.urls').default.setUp();
 require('purecss/build/base-min.css');
 require('../styles/main.scss');
 require('../styles/globalDynamicStyles');
+require('./vuexModality');
 
 // Required to setup Keen UI, should be imported only once in your project
 require('keen-ui/src/bootstrap');

kolibri/core/assets/src/core-app/vuexModality.js

@@ -0,0 +1,112 @@
+/* global kolibriGlobal */
+/**
+ * Adapted from https://github.com/alice/modality
+ * Version: 1.0.2
+ *
+ * For Kolibri, this mirrors in Vuex the DOM updates done by modality.js in Keen-UI,
+ * which gives the code in theme.js easier access to the current modality.
+ */
+
+document.addEventListener('DOMContentLoaded', () => {
+  let hadKeyboardEvent = false;
+  const keyboardModalityWhitelist = [
+    'input:not([type])',
+    'input[type=text]',
+    'input[type=number]',
+    'input[type=date]',
+    'input[type=time]',
+    'input[type=datetime]',
+    'textarea',
+    '[role=textbox]',
+    '[supports-modality=keyboard]',
+  ].join(',');
+
+  let isHandlingKeyboardThrottle;
+
+  const matcher = (() => {
+    const el = document.body;
+
+    if (el.matchesSelector) {
+      return el.matchesSelector;
+    }
+
+    if (el.webkitMatchesSelector) {
+      return el.webkitMatchesSelector;
+    }
+
+    if (el.mozMatchesSelector) {
+      return el.mozMatchesSelector;
+    }
+
+    if (el.msMatchesSelector) {
+      return el.msMatchesSelector;
+    }
+
+    /* eslint-disable-next-line */
+    console.error("Couldn't find any matchesSelector method on document.body.");
+  })();
+
+  const disableFocusRingByDefault = function() {
+    const css = 'body:not([modality=keyboard]) :focus { outline: none; }';
+    const head = document.head || document.getElementsByTagName('head')[0];
+    const style = document.createElement('style');
+
+    style.type = 'text/css';
+    style.id = 'disable-focus-ring';
+
+    if (style.styleSheet) {
+      style.styleSheet.cssText = css;
+    } else {
+      style.appendChild(document.createTextNode(css));
+    }
+
+    head.insertBefore(style, head.firstChild);
+  };
+
+  const focusTriggersKeyboardModality = function(el) {
+    let triggers = false;
+
+    if (matcher) {
+      triggers =
+        matcher.call(el, keyboardModalityWhitelist) && matcher.call(el, ':not([readonly])');
+    }
+
+    return triggers;
+  };
+
+  disableFocusRingByDefault();
+
+  document.body.addEventListener(
+    'keydown',
+    () => {
+      hadKeyboardEvent = true;
+
+      if (isHandlingKeyboardThrottle) {
+        clearTimeout(isHandlingKeyboardThrottle);
+      }
+
+      isHandlingKeyboardThrottle = setTimeout(() => {
+        hadKeyboardEvent = false;
+      }, 100);
+    },
+    true
+  );
+
+  document.body.addEventListener(
+    'focus',
+    e => {
+      if (hadKeyboardEvent || focusTriggersKeyboardModality(e.target)) {
+        kolibriGlobal.coreVue.vuex.store.commit('SET_MODALITY', 'keyboard');
+      }
+    },
+    true
+  );
+
+  document.body.addEventListener(
+    'blur',
+    () => {
+      kolibriGlobal.coreVue.vuex.store.commit('SET_MODALITY', null);
+    },
+    true
+  );
+});

kolibri/core/assets/src/state/modules/theme.js

@@ -24,6 +24,7 @@ const initialState = {
   '$core-grey': '#e0e0e0',
 
   '$core-loading': '#03a9f4',
+  modality: null,
 };
 
 export default {
@@ -90,7 +91,25 @@ export default {
     $coreLoading(state) {
       return state['$core-loading'];
     },
+    // Should only use these styles to outline stuff that will be focused
+    // on keyboard-tab-focus
     $coreOutline(state) {
+      if (state.modality !== 'keyboard') {
+        return {
+          outline: 'none',
+        };
+      }
+
+      return {
+        outlineColor: darken(state['$core-action-light'], 0.1),
+        outlineStyle: 'solid',
+        outlineWidth: '3px',
+        outlineOffset: '4px',
+      };
+    },
+    // Should use this when the outline needs to be applied regardless
+    // of modality
+    $coreOutlineAnyModality(state) {
       return {
         outlineColor: darken(state['$core-action-light'], 0.1),
         outlineStyle: 'solid',
@@ -106,5 +125,8 @@ export default {
     RESET_THEME_VALUE(state, varName) {
       state[varName] = initialState[varName];
     },
+    SET_MODALITY(state, modality) {
+      state.modality = modality;
+    },
   },
 };

kolibri/core/assets/src/views/ImmersiveToolbar.vue

@@ -119,7 +119,6 @@
       ...mapGetters([
         '$coreGrey200',
         '$coreGrey300',
-        '$coreOutline',
         '$coreActionDark',
         '$coreActionNormal',
         '$coreTextDefault',

kolibri/core/assets/src/views/KNavbar/index.vue

@@ -65,7 +65,7 @@
       };
     },
     computed: {
-      ...mapGetters(['$coreActionNormal', '$coreOutline']),
+      ...mapGetters(['$coreActionNormal', '$coreOutlineAnyModality']),
       maxWidth() {
         return this.enoughSpace ? this.elementWidth : this.elementWidth - 38 * 2;
       },
@@ -76,7 +76,7 @@
       },
       scrollButton() {
         return {
-          ':hover': this.$coreOutline,
+          ':hover': this.$coreOutlineAnyModality,
         };
       },
     },

kolibri/plugins/facility_management/assets/src/views/UserTable.vue

@@ -5,7 +5,7 @@
 
       <thead slot="thead">
         <tr>
-          <th v-if="selectable" class="core-table-icon-col">
+          <th v-if="selectable" class="core-table-checkbox-col">
             <KCheckbox
               :label="selectAllLabel"
               :showLabel="false"
@@ -34,7 +34,7 @@
           v-for="user in users"
           :key="user.id"
         >
-          <td v-if="selectable" class="core-table-icon-col">
+          <td v-if="selectable" class="core-table-checkbox-col">
             <KCheckbox
               :label="userCheckboxLabel"
               :showLabel="false"