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>

resources/js/views/settings/OAuth.vue

@@ -9,7 +9,7 @@
                     {{ $t('settings.token_legend')}}
                 </div>
                 <div class="mt-3">
-                    <a role="button" tabindex="0" class="is-link" @click="createToken()">
+                    <a tabindex="0" class="is-link" @click="createToken" @keyup.enter="createToken">
                         <font-awesome-icon :icon="['fas', 'plus-circle']" /> {{ $t('settings.generate_new_token')}}
                     </a>
                 </div>

resources/js/views/settings/WebAuthn.vue

@@ -9,7 +9,7 @@
                     {{ $t('auth.webauthn.security_devices_legend')}}
                 </div>
                 <div class="mt-3">
-                    <a role="button" tabindex="0"  @click="register()">
+                    <a tabindex="0" @click="register" @keyup.enter="register">
                         <font-awesome-icon :icon="['fas', 'plus-circle']" />&nbsp;{{ $t('auth.webauthn.register_a_new_device')}}
                     </a>
                 </div>

resources/sass/app.scss

@@ -65,7 +65,7 @@ a:hover {
 }
 
 .accounts {
-  margin-top: 64px;
+  margin-top: 74px;
 }
 
 .groups {
@@ -82,7 +82,7 @@ a:hover {
 
 @media screen and (min-width: 769px) {
   .accounts {
-    margin-top: 84px;
+    margin-top: 98px;
   }
 }
 
@@ -413,10 +413,10 @@ figure.no-icon {
 
 .button:focus, .button:focus-visible, .button.is-focused {
   border-color: transparent;
-  outline-offset: 3px !important;
+  outline-offset: 3px;
 }
 a:focus, a:focus-visible {
-  outline-offset: 2px !important;
+  outline-offset: 2px;
 }
 .button:focus:not(:active), .button.is-focused:not(:active),
 .button.is-white:focus:not(:active), .button.is-white.is-focused:not(:active),
@@ -437,51 +437,51 @@ a:focus, a:focus-visible {
 
 .button.is-white:focus, .button.is-white:focus-visible, .button.is-white.is-focused
 {
-  outline: 2px solid $white !important;
+  outline: 2px solid $white;
 }
 .button.is-light:focus, .button.is-light:focus-visible, .button.is-light.is-focused
 {
-  outline: 2px solid $grey-lightest !important;
+  outline: 2px solid $grey-lightest;
 }
 .button.is-dark:focus, .button.is-dark:focus-visible, .button.is-dark.is-focused
 {
-  outline: 2px solid $dark !important;
+  outline: 2px solid $dark;
 }
 .button.is-black:focus, .button.is-black:focus-visible, .button.is-black.is-focused
 {
-  outline: 2px solid $black !important;
+  outline: 2px solid $black;
 }
 .button.is-text:focus, .button.is-text:focus-visible, .button.is-text.is-focused
 {
-  outline: 2px solid $text !important;
+  outline: 2px solid $text;
 }
 .button.is-ghost:focus, .button.is-ghost:focus-visible, .button.is-ghost.is-focused
 {
-  outline: 2px solid $text !important;
+  outline: 2px solid $text;
 }
 .button.is-primary:focus, .button.is-primary:focus-visible, .button.is-primary.is-focused
 {
-  outline: 2px solid $primary !important;
+  outline: 2px solid $primary;
 }
 .button.is-link:focus, .button.is-link:focus-visible, .button.is-link.is-focused
 {
-  outline: 2px solid $link !important;
+  outline: 2px solid $link;
 }
 .button.is-info:focus, .button.is-info:focus-visible, .button.is-info.is-focused
 {
-  outline: 2px solid $info !important;
+  outline: 2px solid $info;
 }
 .button.is-success:focus, .button.is-success:focus-visible, .button.is-success.is-focused
 {
-  outline: 2px solid $success !important;
+  outline: 2px solid $success;
 }
 .button.is-warning:focus, .button.is-warning:focus-visible, .button.is-warning.is-focused
 {
-  outline: 2px solid $warning !important;
+  outline: 2px solid $warning;
 }
 .button.is-danger:focus, .button.is-danger:focus-visible, .button.is-danger.is-focused
 {
-  outline: 2px solid $danger !important;
+  outline: 2px solid $danger;
 }
 
 a:focus, a:focus-visible
@@ -518,6 +518,10 @@ a.has-text-white-bis:focus, a.has-text-white-bis:focus-visible {
   outline-color: $white-bis;
 }
 
+.tabs a:focus, .tabs a:focus-visible {
+  outline-offset: -4px;
+}
+
 .control.has-icons-right > span.icon:focus-visible,
 .control.has-icons-left > span.icon:focus-visible,
 .control.has-icons-right > span.icon:focus,