extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-02-23 22:01:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

Complete keyboard navigation and focus style enhancement

Browse Source
This commit is contained in:
Bubka 2022-09-30 14:00:22 +02:00
parent 41387453d5
commit 1610cf3738
7 changed files with 26 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/components/FormCheckbox.vue
View File

@ -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])
}

2
resources/js/components/Modal.vue
View File

@ -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>

1
resources/js/components/OtpDisplayer.vue
View File

@ -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()

8
resources/js/components/SettingTabs.vue
View File

@ -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>

2
resources/js/views/settings/OAuth.vue
View File

@ -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>

2
resources/js/views/settings/WebAuthn.vue
View File

@ -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>

36
resources/sass/app.scss vendored
View File

@ -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,