1
0

fix(a11y): settings items without href

This commit is contained in:
userquin 2024-04-05 21:57:18 +02:00
parent 25fb7c1c97
commit 2dc2c34a74
2 changed files with 33 additions and 5 deletions

View File

@ -11,11 +11,28 @@ const props = defineProps<{
large?: true
match?: boolean
target?: string
button?: boolean
}>()
defineEmits<{
(event: 'click'): void
}>()
const vm = getCurrentInstance()
const router = useRouter()
const scrollOnClick = computed(() => props.to && !(props.target === '_blank' || props.external))
function focus() {
setTimeout(() => {
if (props.button)
vm?.vnode.el?.querySelector('button')?.focus()
else
vm?.vnode.el?.focus()
}, 100)
}
defineExpose({ focus })
useCommand({
scope: 'Settings',
@ -45,13 +62,17 @@ useCommand({
exact-active-class="text-primary"
:class="disabled ? 'op25 pointer-events-none ' : match ? 'text-primary' : ''"
block w-full group focus:outline-none
:tabindex="disabled ? -1 : null"
:tabindex="!button && disabled ? -1 : undefined"
:custom="button"
@click="scrollOnClick ? $scrollToTop() : undefined"
>
<div
<component
:is="button ? 'button' : 'div'"
w-full flex px5 py3 md:gap2 gap4 items-center
transition-250 group-hover:bg-active
group-focus-visible:ring="2 current"
:disabled="button ? disabled : undefined"
@click="button && !disabled && $emit('click')"
>
<div flex-1 flex items-center md:gap2 gap4>
<div
@ -85,6 +106,6 @@ useCommand({
</slot>
</p>
<div v-if="to" :class="!external ? 'i-ri:arrow-right-s-line' : 'i-ri:external-link-line'" text-xl text-secondary-light class="rtl-flip" />
</div>
</component>
</NuxtLink>
</template>

View File

@ -6,12 +6,14 @@ useHydratedHead({
title: () => `${t('settings.about.label')} | ${t('nav.settings')}`,
})
const commitRef = ref()
const showCommit = ref(buildInfo.env !== 'release' && buildInfo.env !== 'dev')
const builtTime = useFormattedDateTime(buildInfo.time)
function handleShowCommit() {
setTimeout(() => {
showCommit.value = true
nextTick(() => commitRef.value?.focus())
}, 50)
}
</script>
@ -33,9 +35,12 @@ function handleShowCommit() {
<template v-if="isHydrated">
<SettingsItem
ref="commitRef"
:text="$t('settings.about.version')"
:to="showCommit ? `https://github.com/elk-zone/elk/commit/${buildInfo.commit}` : undefined"
external target="_blank"
external
target="_blank"
:button="!showCommit"
@click="handleShowCommit"
>
<template #content>
@ -54,7 +59,9 @@ function handleShowCommit() {
<SettingsItem
:text="$t('nav.show_intro')"
icon="i-ri:article-line"
cursor-pointer large
cursor-pointer
large
button
@click="openPreviewHelp"
/>