fix: resolver conflicto aria-hidden con foco en botón móvil del sidebar
- 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:
@@ -32,7 +32,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, ref } from 'vue'
|
import { computed, ref, watch, nextTick } from 'vue'
|
||||||
import { useRoute } from 'vue-router'
|
import { useRoute } from 'vue-router'
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
@@ -41,4 +41,28 @@ const sidebarOpen = ref(true)
|
|||||||
const sidebarCollapsed = ref(false)
|
const sidebarCollapsed = ref(false)
|
||||||
|
|
||||||
const pageTitle = computed(() => (route.meta.title as string) || 'Panel')
|
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>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user