From 49352de7484aa244269849c8b79f854c4f500fda Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Tue, 14 Oct 2025 04:17:24 -0600
Subject: [PATCH] =?UTF-8?q?fix:=20resolver=20conflicto=20aria-hidden=20con?=
 =?UTF-8?q?=20foco=20en=20bot=C3=B3n=20m=C3=B3vil=20del=20sidebar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 nuxt4-app/app/layouts/dashboard.vue | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/nuxt4-app/app/layouts/dashboard.vue b/nuxt4-app/app/layouts/dashboard.vue
index 3243776..6733bc5 100644
--- a/nuxt4-app/app/layouts/dashboard.vue
+++ b/nuxt4-app/app/layouts/dashboard.vue
@@ -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>