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

Author: erkamyaman

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { DocksContext } from '@devframes/hub/client'
 import { computed, useTemplateRef, watch } from 'vue'
+import { t } from '../../i18n'
 import { getEntryGroup } from '../../state/dock-settings'
 import { getEntryPaneKey, useIframePanes } from '../../utils/useIframePanes'
 import { useIsRpcTrusted } from '../../utils/useIsRpcTrusted'
@@ -55,11 +56,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="t('settings.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 +78,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 +96,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