josedario87
49352de748
- Mover foco al sidebar cuando se abre en móvil - Mover foco al panel principal cuando sidebar se cierra - Evita warning de accesibilidad: aria-hidden con elemento enfocado
69 lines
2.2 KiB
Vue
69 lines
2.2 KiB
Vue
<template>
|
|
<div class="brand-shell min-h-screen text-[#fef9f0]">
|
|
<UDashboardGroup storage-key="analytics-dashboard" class="h-full">
|
|
<AppSidebar v-model:open="sidebarOpen" v-model:collapsed="sidebarCollapsed" />
|
|
|
|
<UDashboardPanel class="bg-transparent">
|
|
<template #header>
|
|
<div class="flex flex-col gap-4 px-4 py-4 lg:px-6">
|
|
<UDashboardNavbar :title="pageTitle" icon="i-lucide-pie-chart" toggle-side="left">
|
|
<template #leading>
|
|
<UDashboardSidebarCollapse variant="subtle" />
|
|
</template>
|
|
<template #toggle>
|
|
<UDashboardSidebarToggle variant="subtle" />
|
|
</template>
|
|
<template #trailing>
|
|
<AuthSessionStatusButton />
|
|
<UserMenu />
|
|
</template>
|
|
</UDashboardNavbar>
|
|
</div>
|
|
</template>
|
|
|
|
<template #body>
|
|
<div class="px-4 pb-10 lg:px-8">
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
</UDashboardPanel>
|
|
</UDashboardGroup>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref, watch, nextTick } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
|
|
const route = useRoute()
|
|
|
|
const sidebarOpen = ref(true)
|
|
const sidebarCollapsed = ref(false)
|
|
|
|
const pageTitle = computed(() => (route.meta.title as string) || 'Panel')
|
|
|
|
// Fix aria-hidden focus issue on mobile sidebar
|
|
// When sidebar opens on mobile, Nuxt UI applies aria-hidden to the main content
|
|
// but the toggle button retains focus, causing accessibility errors.
|
|
// Move focus to the sidebar when it opens to avoid this.
|
|
watch(sidebarOpen, async (isOpen) => {
|
|
await nextTick()
|
|
|
|
if (isOpen) {
|
|
// When sidebar opens, move focus to sidebar to avoid aria-hidden conflict
|
|
const sidebar = document.querySelector('#analytics-dashboard-sidebar-v-0-0') as HTMLElement
|
|
if (sidebar) {
|
|
sidebar.setAttribute('tabindex', '-1')
|
|
sidebar.focus({ preventScroll: true })
|
|
}
|
|
} else {
|
|
// When sidebar closes, move focus back to main content area
|
|
const mainPanel = document.querySelector('[id^="analytics-dashboard-panel"]') as HTMLElement
|
|
if (mainPanel) {
|
|
mainPanel.setAttribute('tabindex', '-1')
|
|
mainPanel.focus({ preventScroll: true })
|
|
}
|
|
}
|
|
})
|
|
</script>
|