Complete keyboard navigation and focus style enhancement

resources/js/components/FormCheckbox.vue

@@ -47,7 +47,7 @@
 
         methods: {
             setCheckbox(event) {
-                if (this.$attrs.disabled == false) {
+                if (this.$attrs['disabled'] == undefined) {
                     this.form[this.fieldName] = !this.form[this.fieldName]
                     this.$emit(this.fieldName, this.form[this.fieldName])
                 }

resources/js/components/Modal.vue

@@ -14,7 +14,7 @@
         </div>
         <div v-if="this.showcloseButton" class="fullscreen-footer">
             <!-- Close button -->
-            <button class="button is-dark is-rounded" @click.stop="closeModal">
+            <button ref="closeModalButton" class="button is-dark is-rounded" @click.stop="closeModal">
                 {{ $t('commons.close') }}
             </button>
         </div>

resources/js/components/OtpDisplayer.vue

@@ -133,6 +133,7 @@
                         else this.$router.push({ name: 'genericError', params: { err: this.$t('errors.not_a_supported_otp_type') } });
     
                         this.$parent.isActive = true
+                        this.$parent.$refs.closeModalButton.focus()
                     }
                     catch(error) {
                         this.clearOTP()

resources/js/components/SettingTabs.vue

@@ -5,7 +5,7 @@
                 <div class="tabs is-centered is-fullwidth">
                     <ul>
                         <li v-for="tab in tabs" :key="tab.view" :class="{ 'is-active': tab.view === activeTab }">
-                            <a :id="tab.id" tabindex="0" @click="selectTab(tab.view)">{{ tab.name }}</a>
+                            <router-link :id="tab.id" :to="{ name: tab.view }">{{ tab.name }}</router-link>
                         </li>
                     </ul>
                 </div>
@@ -52,12 +52,6 @@
                 default: ''
             },
         },
-
-        methods: {
-            selectTab(viewName) {
-                this.$router.push({ name: viewName })
-            },
-        }
     }
 
 </script>