working on yaml editor (how to prevent from being a focus trap - no s…

…olution yet)

pkg/rancher-components/src/components/Card/Card.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
+import { createFocusTrap, FocusTrap } from 'focus-trap';
 
 export default defineComponent({
   name:  'Card',
@@ -50,12 +51,36 @@ export default defineComponent({
       type:    Boolean,
       default: false,
     },
-  }
+    triggerFocusTrap: {
+      type:    Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return { focusTrapInstance: {} as FocusTrap };
+  },
+  mounted() {
+    if (this.triggerFocusTrap) {
+      this.focusTrapInstance = createFocusTrap(this.$refs.cardContainer as HTMLElement, {
+        escapeDeactivates: true,
+        allowOutsideClick: true,
+      });
+      this.$nextTick(() => {
+        this.focusTrapInstance.activate();
+      });
+    }
+  },
+  beforeUnmount() {
+    if (this.focusTrapInstance && this.triggerFocusTrap) {
+      this.focusTrapInstance.deactivate();
+    }
+  },
 });
 </script>
 
 <template>
   <div
+    ref="cardContainer"
     class="card-container"
     :class="{'highlight-border': showHighlightBorder, 'card-sticky': sticky}"
     data-testid="card"

shell/components/AppModal.vue

@@ -103,7 +103,20 @@ export default defineComponent({
     },
     handleEscapeKey(event: KeyboardEvent) {
       if (this.clickToClose && event.key === 'Escape') {
-        this.$emit('close');
+        console.warn('ESCAPE KEY PRESSED ON MODAL...');
+        // this.$emit('close');
+        const yamlEditorEl = document.querySelector('#yaml-editor-code-mirror');
+        const currActiveEl = document.activeElement;
+
+        console.log('******* document.activeElement ********', document.activeElement);
+        // console.log('******* this.$refs.cm ********', this.$refs.cm);
+        // console.log('******* "document.querySelector ********', document.querySelector('#yaml-editor-code-mirror'));
+        console.log('******* contains ********', document.querySelector('#yaml-editor-code-mirror')?.contains(document.activeElement));
+
+        if (!yamlEditorEl || (yamlEditorEl && !yamlEditorEl.contains(currActiveEl))) {
+          console.error('CLOSING!!!');
+          this.$emit('close');
+        }
       }
     },
     isValidWidth(value: number | string) {

shell/components/CodeMirror.vue

@@ -52,6 +52,8 @@ export default {
       const theme = this.$store.getters['prefs/theme'];
       const keymap = this.$store.getters['prefs/get'](KEYMAP);
 
+      console.log('keymap', keymap);
+
       const out = {
         // codemirror default options
         tabSize:                 2,

shell/components/Import.vue

@@ -121,6 +121,7 @@ export default {
     v-else
     :show-highlight-border="false"
     data-testid="import-yaml"
+    :trigger-focus-trap="true"
   >
     <template #title>
       <div style="display: block; width: 100%;">
@@ -136,7 +137,7 @@ export default {
               <FileSelector
                 class="btn role-secondary pull-left"
                 :label="t('generic.readFromFile')"
-                tabindex="0"
+                :aria-label="t('generic.readFromFile')"
                 @selected="onFileSelected"
               />
             </div>
@@ -193,6 +194,8 @@ export default {
           type="button"
           class="btn role-primary"
           data-testid="import-yaml-close"
+          role="button"
+          :aria-label="t('generic.close')"
           @click="close"
         >
           {{ t('generic.close') }}
@@ -207,6 +210,8 @@ export default {
           type="button"
           class="btn role-secondary mr-10"
           data-testid="import-yaml-cancel"
+          role="button"
+          :aria-label="t('generic.cancel')"
           @click="close"
         >
           {{ t('generic.cancel') }}
@@ -216,6 +221,8 @@ export default {
           mode="import"
           :disabled="!currentYaml.length"
           data-testid="import-yaml-import-action"
+          role="button"
+          :aria-label="t('import.title')"
           @click="importYaml"
         />
       </div>

shell/components/YamlEditor.vue

@@ -147,7 +147,6 @@ export default {
       return [EDITOR_MODES.EDIT_CODE, EDITOR_MODES.VIEW_CODE].includes(this.editorMode);
     },
   },
-
   watch: {
     showUploadPrompt(neu) {
       if (neu) {
@@ -156,10 +155,31 @@ export default {
     },
   },
 
+  mounted() {
+    document.addEventListener('keydown', this.handleEscapeKey);
+  },
+  beforeUnmount() {
+    document.removeEventListener('keydown', this.handleEscapeKey);
+  },
+
   methods: {
-    focus() {
-      if ( this.$refs.cm ) {
-        this.$refs.cm.focus();
+    // focus() {
+    //   if ( this.$refs.cm ) {
+    //     this.$refs.cm.focus();
+    //   }
+    // },
+
+    handleEscapeKey(e) {
+      if (e.key === 'Escape') {
+        console.log('******* document.activeElement ON YAML EDITOR ********', document.activeElement);
+
+        const yamlEditorEl = this.$refs.cm.$el;
+        const currActiveEl = document.activeElement;
+
+        if (yamlEditorEl.contains(currActiveEl)) {
+          console.warn('MOVING FOCUS TO OUTER ELEMENT!');
+          this.$refs.outerYamlEditorElement.focus();
+        }
       }
     },
 
@@ -204,7 +224,10 @@ export default {
 </script>
 
 <template>
-  <div class="yaml-editor">
+  <div
+    ref="outerYamlEditorElement"
+    class="yaml-editor"
+  >
     <div class="text-right">
       <span
         v-if="isPreview && !hidePreviewButtons"
@@ -227,6 +250,7 @@ export default {
     </div>
     <CodeMirror
       v-if="showCodeEditor"
+      id="yaml-editor-code-mirror"
       ref="cm"
       :class="{fill: true, scrolling: scrolling}"
       :value="curValue"
@@ -255,6 +279,10 @@ export default {
   display: flex;
   flex-direction: column;
 
+  &:focus {
+    @include focus-outline;
+  }
+
   .fill {
     flex: 1;
   }

shell/components/form/LabeledSelect.vue

@@ -451,6 +451,10 @@ export default {
   // LabeledSelect.
   padding-bottom: 1px;
 
+  &:focus-visible {
+    @include focus-outline;
+  }
+
   &.no-label.compact-input {
     :deep() .vs__actions:after {
       top: -2px;

shell/components/nav/Header.vue

@@ -542,13 +542,12 @@ export default {
             tabindex="0"
             :aria-label="t('nav.import')"
             @click="openImport()"
-            @keyup.enter="openImport()"
             @keyup.space="openImport()"
           >
             <i class="icon icon-upload icon-lg" />
           </button>
           <app-modal
-            :visibility="showImportModal"
+            v-if="showImportModal"
             class="import-modal"
             name="importModal"
             width="75%"

shell/initialize/install-directives.js

@@ -10,7 +10,6 @@ import cleanTooltipDirective from '@shell/directives/clean-tooltip';
 import positiveIntNumberDirective from '@shell/directives/positive-int-number.js';
 import trimWhitespaceDirective from '@shell/directives/trim-whitespace';
 import intNumberDirective from '@shell/directives/int-number';
-import focusTrap from '@shell/directives/focus-trap';
 
 /**
  * Prevent extensions from overriding existing directives
@@ -48,7 +47,6 @@ function addDirectives(vueApp) {
   vueApp.directive('focus', focusDirective);
   vueApp.directive('intNumber', intNumberDirective);
   vueApp.directive('positiveIntNumber', positiveIntNumberDirective);
-  vueApp.directive('trap', focusTrap);
 }
 
 /**

shell/mixins/vue-select-overrides.js

@@ -5,39 +5,22 @@ export default {
       // Defaults found at - https://github.com/sagalbot/vue-select/blob/master/src/components/Select.vue#L947
       const out = { ...map };
 
-      // tab
-      (out[9] = (e) => {
-        // user esc'd
-        if (!vm.open) {
-          return;
-        }
-
-        e.preventDefault();
-
-        const optsLen = vm.filteredOptions.length;
-        const typeAheadPointer = vm.typeAheadPointer;
-
-        if (e.shiftKey) {
-          if (typeAheadPointer === 0) {
-            return vm.onEscape();
-          }
-
-          return vm.typeAheadUp();
-        }
-        if (typeAheadPointer + 1 === optsLen) {
-          return vm.onEscape();
+      // escape key
+      (out[27] = (e) => {
+        // this will prevent propagation to global escape key handler
+        // that is responsible for closing a modal
+        // probably we can gate it to a prop...
+        if (vm.open) {
+          e.stopPropagation();
         }
 
-        return vm.typeAheadDown();
-      });
-
-      (out[27] = (e) => {
         vm.open = false;
         vm.search = '';
 
         return false;
       });
 
+      // enter key
       (out[13] = (e, opt) => {
         if (!vm.open) {
           vm.open = true;

shell/package.json

@@ -57,9 +57,9 @@
     "babel-preset-vue": "2.0.2",
     "cache-loader": "4.1.0",
     "clipboard-polyfill": "4.0.1",
-    "color": "4.2.3",
     "codemirror": ">=5.64.0 <6",
     "codemirror-editor-vue3": "2.7.1",
+    "color": "4.2.3",
     "cookie": "0.7.0",
     "cookie-universal": "2.2.2",
     "core-js": "3.25.3",
@@ -90,6 +90,7 @@
     "express": "4.17.1",
     "file-saver": "2.0.2",
     "floating-vue": "5.2.2",
+    "focus-trap": "^7.6.4",
     "frontmatter-markdown-loader": "3.7.0",
     "identicon.js": "2.3.3",
     "intl-messageformat": "7.8.4",
@@ -108,9 +109,9 @@
     "jszip": "3.8.0",
     "lodash": "4.17.21",
     "marked": "4.0.17",
+    "node-polyfill-webpack-plugin": "3.0.0",
     "nodemon": "2.0.22",
     "nyc": "15.1.0",
-    "node-polyfill-webpack-plugin": "3.0.0",
     "papaparse": "5.3.0",
     "portal-vue": "~3.0.0",
     "sass": "1.51.0",

shell/yarn.lock

@@ -7894,6 +7894,13 @@ [email protected]:
     "@floating-ui/dom" "~1.1.1"
     vue-resize "^2.0.0-alpha.1"
 
+focus-trap@^7.6.4:
+  version "7.6.4"
+  resolved "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.4.tgz#455ec5c51fee5ae99604ca15142409ffbbf84db9"
+  integrity sha512-xx560wGBk7seZ6y933idtjJQc1l+ck+pI3sKvhKozdBV1dRZoKhkW5xoCaFv9tQiX5RH1xfSxjuNu6g+lmN/gw==
+  dependencies:
+    tabbable "^6.2.0"
+
 [email protected], follow-redirects@^1.0.0, follow-redirects@^1.14.0:
   version "1.15.2"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
@@ -12648,6 +12655,11 @@ symbol-tree@^3.2.4:
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
+tabbable@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
+  integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
+
 table@^6.0.9:
   version "6.8.2"
   resolved "https://registry.yarnpkg.com/table/-/table-6.8.2.tgz#c5504ccf201213fa227248bdc8c5569716ac6c58"