fix: resolver conflicto aria-hidden con foco en botón móvil del sidebar
All checks were successful
build-and-deploy / build (push) Successful in 42s
build-and-deploy / deploy (push) Successful in 3s

- 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
This commit is contained in:
2025-10-14 04:17:24 -06:00
parent 2f6331e809
commit 49352de748

View File

@@ -32,7 +32,7 @@
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
import { computed, ref, watch, nextTick } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
@@ -41,4 +41,28 @@ 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>