refactor: simplify defaultOpen handling and enhance sidebar accessibility with titles and descriptions

Author: JasonKrik

services/frontend/src/components/DashboardLayout.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue' // Added ref
+import { computed } from 'vue'
 import type { StyleValue } from 'vue'
 import { SidebarProvider, SidebarInset, SidebarTrigger } from '@/components/ui/sidebar' // Assuming SidebarTrigger might be needed
 import AppSidebar from '@/components/AppSidebar.vue'
@@ -11,7 +11,7 @@ const props = defineProps<Props>()
 
 // TODO: Implement cookie-based persistence for defaultOpen if needed, like in the shadcn/ui example.
 // For now, defaulting to true.
-const defaultOpen = ref(true)
+const defaultOpen = true
 
 // Define sidebar width using custom values
 // Override the collapsed width to 30rem for testing

services/frontend/src/components/ui/sidebar/Sidebar.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { SidebarProps } from '.'
 import { cn } from '@/lib/utils'
-import { Sheet, SheetContent } from '@/components/ui/sheet'
+import { Sheet, SheetContent, SheetTitle, SheetDescription } from '@/components/ui/sheet'
 import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'
 
 defineOptions({
@@ -31,11 +31,13 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
       data-sidebar="sidebar"
       data-mobile="true"
       :side="side"
-      class="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+      class="w-[--sidebar-width] !bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
       :style="{
         '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
       }"
     >
+      <SheetTitle class="sr-only">Navigation Sidebar</SheetTitle>
+      <SheetDescription class="sr-only">Main navigation menu for the application</SheetDescription>
       <div class="flex h-full w-full flex-col">
         <slot />
       </div>