Merge pull request #254 from php-school/focus-trapping

Focus trapping in dialog/modals + some fixes for confirm dialog

Author: AydinHassan

assets/cloud.js

@@ -11,6 +11,7 @@ import WorkshopExerciseSelectionList from './components/WorkshopExerciseSelectio
 import PassNotification from "./components/PassNotification.vue";
 import ExerciseVerify from "./components/ExerciseVerify.vue";
 import ExerciseEditor from "./components/ExerciseEditor.vue";
+import { FocusTrap } from 'focus-trap-vue'
 import VueClickAway from "vue3-click-away";
 import VueDiff from 'vue-diff';
 import 'vue-diff/dist/index.css';
@@ -42,6 +43,8 @@ Object.entries(results).forEach(([name, resultComponent]) => {
     app.component(name, resultComponent);
 });
 
+app.component('FocusTrap', FocusTrap)
+
 app.config.unwrapInjectedRef = true;
 
 app.use(VueClickAway);

assets/components/Confirm.vue

@@ -6,6 +6,7 @@ export default {
     ExclamationTriangleIcon,
   },
   data: () => ({
+    focusActive: false,
     isOpen: false,
     title: null,
     message: null,
@@ -20,10 +21,13 @@ export default {
       this.isOpen = true;
     },
     close() {
+      document.removeEventListener('keyup', this.$el.escapeEventHandler);
+
       this.isOpen = false;
+      this.focusActive = false;
+      this.showCancel = true;
     },
     show(options = {}) {
-      document.removeEventListener('keyup', this.$el.escapeEventHandler);
 
       this.title = options.title;
       this.message = options.message;
@@ -35,19 +39,29 @@ export default {
       }
 
       if (options.disableCancel) {
-          this.showCancel = false;
+        this.showCancel = false;
+        this.$el.escapeEventHandler = (evt) => {
+          if (evt.code === 'Escape') {
+            this.confirm();
+          }
+        };
       } else {
         //hitting escape is the same as cancelling
         this.$el.escapeEventHandler = (evt) => {
           if (evt.code === 'Escape') {
             this.decline();
           }
         };
-
-        document.addEventListener('keyup', this.$el.escapeEventHandler);
       }
 
+      document.addEventListener('keyup', this.$el.escapeEventHandler);
+
       this.open();
+
+      this.$nextTick(() => {
+        this.focusActive = true;
+      });
+
       return new Promise((resolve,reject) => {
         this.resolvePromise = resolve;
         this.rejectPromise = reject;
@@ -66,29 +80,31 @@ export default {
 </script>
 
 <template>
-  <div v-show="isOpen" class="fixed rounded-lg bg-gray-800 flex flex-col justify-start w-full h-full inset-0 z-40 bg-opacity-80">
-    <div class="bg-grey-800 h-full w-full flex justify-center items-center drop-shadow-xl">
-      <div class="bg-gray-900 max-w-sm max-h-[calc(1/2*100%)] rounded-lg">
-        <div class="p-4 rounded-t flex-none flex justify-between items-top border-b border-solid border-slate-600">
-          <div class="flex items-center">
-            <ExclamationTriangleIcon class="h-6 w-6 text-pink-500 mr-2" />
-            <h3 class="text-base font-semibold lg:text-lg text-white pt-0 mt-0">{{ title }}</h3>
+  <focus-trap v-model:active="focusActive" :initial-focus="() => $refs.confirm">
+    <div v-show="isOpen" class="fixed rounded-lg bg-gray-800 flex flex-col justify-start w-full h-full inset-0 z-40 bg-opacity-80">
+      <div class="bg-grey-800 h-full w-full flex justify-center items-center drop-shadow-xl">
+        <div class="bg-gray-900 max-w-sm max-h-[calc(1/2*100%)] rounded-lg">
+          <div class="p-4 rounded-t flex-none flex justify-between items-top border-b border-solid border-slate-600">
+            <div class="flex items-center">
+              <ExclamationTriangleIcon class="h-6 w-6 text-pink-500 mr-2" />
+              <h3 class="text-base font-semibold lg:text-lg text-white pt-0 mt-0">{{ title }}</h3>
+            </div>
           </div>
-        </div>
-        <div class="p-4 rounded-t flex-none flex justify-between items-top border-b border-solid border-slate-600">
-          <div class="flex items-center">
-            <p class="text-white">{{ message }}</p>
+          <div class="p-4 rounded-t flex-none flex justify-between items-top border-b border-solid border-slate-600">
+            <div class="flex items-center">
+              <p class="text-white">{{ message }}</p>
+            </div>
           </div>
-        </div>
-        <div class="p-6 rounded-b border-solid border-slate-600 flex-none">
-          <div class="flex justify-end">
-            <button v-if="showCancel" @click="decline" type="button" class="inline-flex items-center w-full justify-center rounded-full border border-pink-600 px-8 py-2 text-base font-medium text-gray-400 hover:text-white shadow-sm hover:bg-pink-600 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">{{ cancelMessage }}</button>
-            <button @click="confirm" type="button" class="inline-flex items-center w-full justify-center rounded-full border border-transparent bg-pink-600 px-8 py-2 text-base font-medium text-white shadow-sm hover:bg-pink-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">{{ okMessage }}</button>
+          <div class="p-6 rounded-b border-solid border-slate-600 flex-none">
+            <div class="flex justify-end">
+              <button v-if="showCancel" @click="decline" type="button" class="inline-flex items-center w-full justify-center rounded-full border border-pink-600 px-8 py-2 text-base font-medium text-gray-400 hover:text-white shadow-sm hover:bg-pink-600 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm focus:outline-none focus:ring focus:ring-pink-800">{{ cancelMessage }}</button>
+              <button ref="confirm" @click="confirm" type="button" class="inline-flex items-center w-full justify-center rounded-full border border-transparent bg-pink-600 px-8 py-2 text-base font-medium text-white shadow-sm hover:bg-pink-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm focus:outline-none focus:ring focus:ring-pink-800">{{ okMessage }}</button>
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
+  </focus-trap>
 </template>
 
 

assets/components/ExerciseEditor.vue

@@ -128,7 +128,6 @@ export default {
             return this.studentState.completedExercises.includes(this.exercise.name);
         },
     },
-
     methods: {
         saveSolution(file) {
             localStorage.setItem(this.currentExercise.workshop.code + '.' + this.currentExercise.exercise.slug + '.' + file.name, file.content);
@@ -489,7 +488,7 @@ export default {
                             <package-search ref="packageSearch" @package-selected="packageSelected"
                                             v-model="newDependency" class="w-full"></package-search>
                             <button :disabled="newDependency === ''" @click.stop="addDependency" type="button"
-                                    class="inline-flex items-center h-9 justify-center rounded-full border border-transparent w-16 bg-pink-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-pink-700 focus:outline-none sm:ml-3 sm:text-sm disabled:opacity-70 disabled:hover:bg-pink-600">
+                                    class="inline-flex items-center h-9 justify-center rounded-full border border-transparent w-16 bg-pink-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-pink-700 focus:outline-none focus:ring focus:ring-pink-800 sm:ml-3 sm:text-sm disabled:opacity-70 disabled:hover:bg-pink-600">
                                 <ArrowPathIcon v-cloak v-show="loadingComposerAdd" class="w-4 h-4 animate-spin"/>
                                 <span v-if="!loadingComposerAdd">Add</span>
                             </button>
@@ -510,7 +509,7 @@ export default {
                     <template #footer>
                         <div class="flex justify-end">
                             <button @click="openComposerModal = false" type="button"
-                                    class="inline-flex items-center w-full justify-center rounded-full border border-transparent bg-pink-600 px-8 py-2 text-base font-medium text-white shadow-sm hover:bg-pink-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
+                                    class="inline-flex items-center w-full justify-center rounded-full border border-transparent bg-pink-600 px-8 py-2 text-base font-medium text-white shadow-sm hover:bg-pink-700 focus:outline-none focus:ring focus:ring-pink-800 sm:ml-3 sm:w-auto sm:text-sm">
                                 Close
                             </button>
                         </div>
@@ -543,7 +542,7 @@ export default {
                     <template #footer>
                         <div class="flex justify-end">
                             <button id="lets-go" @click="openProblemModal = false" type="button"
-                                    class="inline-flex items-center w-full justify-center rounded-full border border-transparent bg-pink-600 px-8 py-2 text-base font-medium text-white shadow-sm hover:bg-pink-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
+                                    class="inline-flex items-center w-full justify-center rounded-full border border-transparent bg-pink-600 px-8 py-2 text-base font-medium text-white shadow-sm hover:bg-pink-700 focus:outline-none focus:ring focus:ring-pink-800 sm:ml-3 sm:w-auto sm:text-sm">
                                 Let's go!
                             </button>
                         </div>

assets/components/ExerciseVerify.vue

@@ -209,7 +209,7 @@ export default {
       </template>
       <template #footer>
         <div class="flex justify-end">
-          <button type="button" class="inline-flex items-center w-full justify-center rounded-full border border-transparent bg-pink-600 px-8 py-2 text-base font-medium text-white shadow-sm hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm" @click="runSolution">
+          <button type="button" class="inline-flex items-center w-full justify-center rounded-full border border-transparent bg-pink-600 px-8 py-2 text-base font-medium text-white shadow-sm hover:bg-pink-700 focus:outline-none focus:ring focus:ring-pink-800 sm:ml-3 sm:w-auto sm:text-sm" @click="runSolution">
             <ArrowPathIcon :class="{ 'animate-spin': loadingRun}" class="w-4 h-4 mr-2 -ml-1"/>
             Run again
           </button>

assets/components/Modal.vue

@@ -50,7 +50,8 @@ export default {
         '5xl': 'max-w-5xl',
         '6xl': 'max-w-6xl',
         '7xl': 'max-w-7xl',
-      }
+      },
+      focusActive: false,
     }
   },
   methods: {
@@ -74,31 +75,31 @@ export default {
 </script>
 
 <template >
-  <div class="">
-    <div class="bg-gray-900 bg-opacity-80 fixed inset-0 z-40"/>
-    <div tabindex="-1"
-        class="overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 md:h-full justify-center items-center flex"
-    >
-      <div :id="id" v-click-away="clickAway" class="relative rounded-lg shadow bg-gray-800 flex flex-col justify-start w-full modal-border border-2 border-solid border-transparent" :class="[modalSizeClasses[size], maxHeight]">
-          <div class="p-6 rounded-t flex-none flex justify-between items-top"
-               :class="$slots.header ? 'border-b border-solid border-slate-600' : ''">
-            <slot name="header"/>
-            <div>
-              <button :id="id + '-close'" @click="closeModal($event)" type="button"
-                      class="text-gray-400 bg-transparent rounded-lg text-sm p-1.5 ml-auto inline-flex items-center hover:bg-gray-600 hover:text-white">
-                <XMarkIcon class="w-5 h-5"/>
-              </button>
+    <focus-trap :v-model:active="true">
+        <div class="">
+        <div class="bg-gray-900 bg-opacity-80 fixed inset-0 z-40"/>
+        <div tabindex="-1" class="overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 md:h-full justify-center items-center flex">
+          <div :id="id" v-click-away="clickAway" class="relative rounded-lg shadow bg-gray-800 flex flex-col justify-start w-full modal-border border-2 border-solid border-transparent" :class="[modalSizeClasses[size], maxHeight]">
+              <div class="p-6 rounded-t flex-none flex justify-between items-top"
+                   :class="$slots.header ? 'border-b border-solid border-slate-600' : ''">
+                <slot name="header"/>
+                <div>
+                  <button :id="id + '-close'" @click="closeModal($event)" type="button"
+                          class="text-gray-400 bg-transparent rounded-lg text-sm p-1.5 ml-auto inline-flex items-center hover:bg-gray-600 hover:text-white focus:outline-none focus:ring focus:ring-pink-800">
+                    <XMarkIcon class="w-5 h-5"/>
+                  </button>
+                </div>
+              </div>
+              <div class="p-6 flex-1" :class="{'pt-0' : !$slots.header, 'overflow-y-auto scrollbar-thin scrollbar-thumb-pink-500 scrollbar-track-none scrollbar-thumb-rounded-full scrollbar-track-rounded-full mr-[3px]' : scrollContent}" >
+                <slot name="body"/>
+              </div>
+              <div v-if="$slots.footer" class="p-6 rounded-b border-t border-solid border-slate-600 flex-none">
+                <slot name="footer"/>
+              </div>
             </div>
-          </div>
-          <div class="p-6 flex-1" :class="{'pt-0' : !$slots.header, 'overflow-y-auto scrollbar-thin scrollbar-thumb-pink-500 scrollbar-track-none scrollbar-thumb-rounded-full scrollbar-track-rounded-full mr-[3px]' : scrollContent}" >
-            <slot name="body"/>
-          </div>
-          <div v-if="$slots.footer" class="p-6 rounded-b border-t border-solid border-slate-600 flex-none">
-            <slot name="footer"/>
-          </div>
         </div>
-    </div>
-  </div>
+      </div>
+    </focus-trap>
 </template>
 
 <style>

assets/components/results/CgiOutputMismatch.vue

@@ -98,7 +98,7 @@ export default {
 
       <template #footer>
         <div class="flex justify-end">
-          <button @click="openModal = false" type="button" class="inline-flex items-center w-full justify-center rounded-full border border-transparent bg-pink-600 px-8 py-2 text-base font-medium text-white shadow-sm hover:bg-pink-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
+          <button @click="openModal = false" type="button" class="inline-flex items-center w-full justify-center rounded-full border border-transparent bg-pink-600 px-8 py-2 text-base font-medium text-white shadow-sm hover:bg-pink-700 focus:outline-none focus:ring focus:ring-pink-800 sm:ml-3 sm:w-auto sm:text-sm">
             Close
           </button>
         </div>

assets/components/results/CgiRun.vue

@@ -86,7 +86,7 @@ export default {
 
       <template #footer>
         <div class="flex justify-end">
-          <button @click="openModal = false" type="button" class="inline-flex items-center w-full justify-center rounded-full border border-transparent bg-pink-600 px-8 py-2 text-base font-medium text-white shadow-sm hover:bg-pink-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
+          <button @click="openModal = false" type="button" class="inline-flex items-center w-full justify-center rounded-full border border-transparent bg-pink-600 px-8 py-2 text-base font-medium text-white shadow-sm hover:bg-pink-700 focus:outline-none focus:ring focus:ring-pink-800 sm:ml-3 sm:w-auto sm:text-sm">
             Close
           </button>
         </div>

assets/components/results/CliOutputMismatch.vue

@@ -65,7 +65,7 @@ export default {
 
       <template #footer>
         <div class="flex justify-end">
-          <button @click="openModal = false" type="button" class="inline-flex items-center w-full justify-center rounded-full border border-transparent bg-pink-600 px-8 py-2 text-base font-medium text-white shadow-sm hover:bg-pink-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
+          <button @click="openModal = false" type="button" class="inline-flex items-center w-full justify-center rounded-full border border-transparent bg-pink-600 px-8 py-2 text-base font-medium text-white shadow-sm hover:bg-pink-700 focus:outline-none focus:ring focus:ring-pink-800 sm:ml-3 sm:w-auto sm:text-sm">
             Close
           </button>
         </div>

assets/components/results/CliRun.vue

@@ -86,7 +86,7 @@ export default {
 
       <template #footer>
         <div class="flex justify-end">
-          <button @click="openModal = false" type="button" class="inline-flex items-center w-full justify-center rounded-full border border-transparent bg-pink-600 px-8 py-2 text-base font-medium text-white shadow-sm hover:bg-pink-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
+          <button @click="openModal = false" type="button" class="inline-flex items-center w-full justify-center rounded-full border border-transparent bg-pink-600 px-8 py-2 text-base font-medium text-white shadow-sm hover:bg-pink-700 focus:outline-none focus:ring focus:ring-pink-800 sm:ml-3 sm:w-auto sm:text-sm">
             Close
           </button>
         </div>

assets/components/results/ComparisonFailure.vue

@@ -65,7 +65,7 @@ export default {
 
       <template #footer>
         <div class="flex justify-end">
-          <button @click="openModal = false" type="button" class="inline-flex items-center w-full justify-center rounded-full border border-transparent bg-pink-600 px-8 py-2 text-base font-medium text-white shadow-sm hover:bg-pink-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
+          <button @click="openModal = false" type="button" class="inline-flex items-center w-full justify-center rounded-full border border-transparent bg-pink-600 px-8 py-2 text-base font-medium text-white shadow-sm hover:bg-pink-700 focus:outline-none focus:ring focus:ring-pink-800 sm:ml-3 sm:w-auto sm:text-sm">
             Close
           </button>
         </div>