fix(a11y): settings items without href
This commit is contained in:
parent
25fb7c1c97
commit
2dc2c34a74
@ -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>
|
||||
|
@ -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"
|
||||
/>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user