fix(hub-ui): give dock iframes a title and the standalone hub landmarks

axe flags the standalone hub page for an unnamed dock iframe and for content outside any landmark. Each dock iframe now carries its localized dock title, and the dock list and content area are nav and main landmarks.

Author: erkamyaman

packages/hub-ui/src/client/components/dock/DockStandalone.vue

@@ -55,11 +55,11 @@ function switchEntry(id: string | undefined) {
 
 <template>
   <ColorSchemeRoot>
-    <div v-if="!isRpcTrusted" class="h-screen w-screen of-hidden">
+    <main v-if="!isRpcTrusted" class="h-screen w-screen of-hidden">
       <ViewBuiltinClientAuthNotice :context="context" />
-    </div>
+    </main>
     <div v-else class="h-screen w-screen of-clip grid cols-[max-content_1fr]">
-      <div class="border-r border-base flex flex-col min-h-0">
+      <nav aria-label="Docks" class="border-r border-base flex flex-col min-h-0">
         <div class="p2 border-b border-base flex">
           <BrandMark class="w-7 h-7 ma" />
         </div>
@@ -77,8 +77,8 @@ function switchEntry(id: string | undefined) {
             </template>
           </DockEntriesWithCategories>
         </div>
-      </div>
-      <div class="min-h-0 flex">
+      </nav>
+      <main class="min-h-0 flex">
         <DockGroupSidebar
           v-if="activeGroup"
           :context
@@ -95,7 +95,7 @@ function switchEntry(id: string | undefined) {
           />
           <div id="devframes-views-container" ref="viewsContainer" class="pointer-events-auto" />
         </div>
-      </div>
+      </main>
     </div>
     <FloatingElements />
     <CommandPalette :context />

packages/hub-ui/src/client/components/views/ViewIframe.vue

@@ -8,6 +8,7 @@ import { stripRemoteConnectionFromUrl, watchFrameLocation } from '@devframes/hub
 import { DEVFRAME_REMOTE_ASSETS_ERROR_MESSAGE_TYPE } from '@devframes/hub/constants'
 import { computed, nextTick, onMounted, onUnmounted, ref, useTemplateRef, watchEffect } from 'vue'
 import { t } from '../../i18n'
+import { localizeTitle } from '../../state/locale'
 import { useSettings } from '../../state/settings-defaults'
 import ViewAssetsError from './ViewAssetsError.vue'
 import ViewIframeLoading from './ViewIframeLoading.vue'
@@ -233,6 +234,9 @@ onMounted(() => {
     style: { boxShadow: 'none', outline: 'none' },
   })
   const iframe = pane.iframe
+  watchEffect(() => {
+    iframe.title = localizeTitle(props.entry).title
+  })
 
   // Follow the frame wherever it goes: a document load, but also an SPA
   // router's `pushState`/`replaceState` and back/forward, none of which fire