perf(a11y): Make modals accessible

index.html

@@ -26,8 +26,8 @@ <h1 class="sr-only">AsTeRICS Grid</h1>
     <audio style="display: none" id="audioPlayer" src="" preload="none"></audio>
     <video style="display: none" id="videoPlayer" src="" preload="none"></video>
     <notification-bar ref="notificationBar"></notification-bar>
-    <progress-bar-modal v-show="showModal === modalTypes.MODAL_PROGRESSBAR" ref="progressBar" @close="showModal = null"></progress-bar-modal>
-    <search-modal v-if="showModal === modalTypes.MODAL_SEARCH" @close="showModal = null;" :route-to-edit="Router.getCurrentView() === Router.VIEWS.GridEditView" :options="modalOptions"></search-modal>
+    <progress-bar-modal ref="progressBar"></progress-bar-modal>
+    <search-modal ref="search" :route-to-edit="Router.getCurrentView() === Router.VIEWS.GridEditView" :options="modalOptions"></search-modal>
     <div class="grid-container grid-mask" v-if="false">
         <i class="fas fa-4x fa-spinner fa-spin" style="top: 40%;"></i>
         <div style="position: fixed; top: 50%; width: 100%; text-align: center; font-size: 2em;">

src/js/vue/mainVue.js

@@ -17,13 +17,9 @@ import { systemActionService } from '../service/systemActionService';
 
 let MainVue = {};
 let app = null;
-let modalTypes = {
-    MODAL_SEARCH: 'MODAL_SEARCH',
-    MODAL_PROGRESSBAR: 'MODAL_PROGRESSBAR'
-};
 
 MainVue.setViewComponent = function (component, properties) {
-    if (app && app.$refs.notificationBar.tooltipOptions.closeOnNavigate) {
+    if (app && app.$refs.notificationBar?.tooltipOptions.closeOnNavigate) {
         MainVue.clearTooltip();
     }
     app.setComponent(component, properties);
@@ -56,7 +52,7 @@ MainVue.clearTooltip = function () {
         return;
     }
     app.hiddenPopupData = null;
-    app.$refs.notificationBar.clearTooltip();
+    app.$refs.notificationBar?.clearTooltip();
 };
 
 /**
@@ -71,7 +67,7 @@ MainVue.showProgressBar = function (percentage, options) {
     if (!app) {
         return;
     }
-    app.showModal = modalTypes.MODAL_PROGRESSBAR;
+    app.$refs.progressBar.openModal();
     app.$refs.progressBar.setProgress(percentage, options);
 };
 
@@ -81,7 +77,7 @@ MainVue.showProgressBar = function (percentage, options) {
  * @param options.searchCollectedText use text from collect element to be pre-filled in search bar, if true
  */
 MainVue.showSearchModal = function (options) {
-    app.showModal = modalTypes.MODAL_SEARCH;
+    app.$refs.search.openModal();
     app.modalOptions = options || {};
 };
 
@@ -107,7 +103,6 @@ MainVue.init = function () {
                     Router: Router,
                     uiLocked: false,
                     hiddenPopupData: null,
-                    modalTypes: modalTypes,
                     showModal: null,
                     modalOptions: {}
                 };

src/js/vue/vuePluginManager.js

@@ -16,12 +16,6 @@ function initDirectives() {
                 if (el.focus) el.focus();
                 if (el.select) el.select();
             }
-        },
-        updated: function (el, binding) {
-            if (binding.value) {
-                if (el.focus) el.focus();
-                if (el.select) el.select();
-            }
         }
     });
     Vue.directive('debounce', {

src/vue-components/components/editElementHeader.vue

@@ -1,43 +1,75 @@
 <template>
-    <div class="container-fluid px-0 mb-5">
-        <div class="row">
-            <div class="col-8 col-sm-10 col-md-5 order-md-1">
-                <h1 name="header" class="inline">
-                    {{ header }}
-                </h1>
-            </div>
-            <a v-if="openHelpFn" class="col-2 col-sm-1 col-md black order-md-3" href="javascript:;" @click="openHelpFn"><i class="fas fa-question-circle"></i></a>
-            <a v-if="closeFn" id="closeLink" :title="$t('close')" class="col-2 col-sm-1 col-md black order-md-4" href="javascript:;" @click="closeFn"><i class="fas fa-times"/></a>
-            <div class="col-12 col-md-5 d-flex align-items-center order-md-2 mt-2 mt-md-0" v-if="gridElement">
-                <div v-if="gridElement.type === GridElement.ELEMENT_TYPE_NORMAL">
-                    <img class="me-1" v-if="gridElement.image && (gridElement.image.data || gridElement.image.url)" height="30" :src="gridElement.image.data || gridElement.image.url"/>
-                    <span>{{ gridElement.label | extractTranslation }}</span>
+            <div v-if="gridElement" class="element">
+                <div v-if="gridElement.type === GridElement.ELEMENT_TYPE_NORMAL" :class="{ normal: Object.keys(gridElement.label).length > 0 }">
+                    <img v-if="gridElement.image && (gridElement.image.data || gridElement.image.url)" :src="gridElement.image.data || gridElement.image.url"/>
+                    <span tab-index="0">{{ gridElement.label | extractTranslation }}</span>
                 </div>
                 <div v-if="gridElement.type !== GridElement.ELEMENT_TYPE_NORMAL">
-                    <span class="mx-2">{{ gridElement.type | translate }}</span>
+                    <span>{{ gridElement.type | translate }}</span>
                 </div>
             </div>
-        </div>
-    </div>
 </template>
 
 <script>
-
     import {GridElement} from "../../js/model/GridElement.js";
 
     export default {
-        props: ["header", "gridElement", "openHelpFn", "closeFn"],
+        props: ["gridElement"],
         data() {
             return {
                 GridElement: GridElement
             }
-        },
-        methods: {
-        },
-        mounted() {
-        },
+        }
     }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.element {
+    flex-grow: 6;
+    display: flex;
+
+    & > .normal {
+        flex-flow: column nowrap;
+        align-items: center;
+        justify-content: flex-start;
+        background-color: white;
+        border: 1px solid lightgray;
+        box-shadow: 0 0 0.5rem lightgray;
+    }
+
+    & > div {
+        display: flex;
+        padding: 0.5rem 1rem;
+
+        img {
+            height: 4rem;
+        }
+
+        img {
+            border: 1px solid #111;
+            width: 4rem;
+            object-fit: contain;
+        }
+
+        span {
+            padding: 0 1rem;
+            font-size: 1.5rem;
+            text-align: center;
+        }
+    }
+}
+
+@media screen and (min-width: 768px) {
+    .element {
+        & > .normal {
+            flex-flow: row nowrap;
+        }
+        & > div {
+            span {
+                line-height: 4rem;
+                height: 4rem;
+            }
+        }
+    }
+}
 </style>

src/vue-components/components/gridSelector.vue

@@ -1,32 +1,20 @@
 <template>
-    <div class="container-fluid px-0">
-        <div class="row">
-            <div class="col-12 col-md-5">
-                <div class="row">
+            <div class="selector">
                     <label for="moveGrid">{{ selectLabel }}</label>
-                </div>
-                <div class="row">
-                    <div class="col-12">
-                        <select class="col-12" id="moveGrid" v-model="selectedGrid" @change="selectGrid(selectedGrid)" style="margin-bottom: 1em">
+                <div>
+                        <select id="moveGrid" v-model="selectedGrid" @change="selectGrid(selectedGrid)" style="margin-bottom: 1em">
                             <option v-if="additionalSelectOptions" v-for="option in additionalSelectOptions" :value="option">{{ option | translate}}</option>
                             <option v-for="grid in grids" :value="grid">{{grid.label | extractTranslation}}</option>
                         </select>
-                    </div>
                 </div>
-                <div class="row" v-if="selectedGrid && selectedGrid.thumbnail && selectedGrid.thumbnail.data">
-                    <div class="col-12">
-                        <img :src="selectedGrid.thumbnail.data" style="max-width: 100%; border: 1px solid lightgray"/>
-                    </div>
+                <div v-if="selectedGrid && selectedGrid.thumbnail && selectedGrid.thumbnail.data">
+                        <img :src="selectedGrid.thumbnail.data"/>
                 </div>
-                <div class="row" v-if="selectedGrid && selectedGrid.id">
-                    <div class="col-12">
-                        <button @click="prev" style="width: 49%"><i class="fas fa-arrow-left"></i> <span>{{ $t('back') }}</span></button>
-                        <button @click="next" style="width: 49%"><span>{{ $t('next') }}</span> <i class="fas fa-arrow-right"></i></button>
-                    </div>
+                <div class="controls" v-if="selectedGrid && selectedGrid.id">
+                        <button @click="prev" :aria-label="$t('back')"><i class="fas fa-arrow-left" aria-hidden="true"></i><span>{{ $t('back') }}</span></button>
+                        <button @click="next" :aria-label="$t('next')"><span>{{ $t('next') }}</span><i class="fas fa-arrow-right" aria-hidden="true"></i></button>
                 </div>
             </div>
-        </div>
-    </div>
 </template>
 
 <script>
@@ -79,5 +67,39 @@
     }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.selector {
+    display: flex;
+    flex-flow: column nowrap;
+
+    .controls {
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-between;
+        margin-top: 1rem;
+    }
+
+    label {
+        font-weight: bold;
+        margin-bottom: 0.5rem;
+    }
+
+    select {
+        width: 100%;
+    }
+
+    button {
+        width: 100%;
+        margin-left: 1rem;
+
+        &:first-child {
+            margin-left: 0;
+        }
+
+        i + span,
+        span + i {
+            margin-left: 0.5rem;
+        }
+    }
+}
 </style>