From 7360105594735a94e6c2f9776e8122d0693a4f43 Mon Sep 17 00:00:00 2001
From: Erkam Yaman <erkamyaman35@gmail.com>
Date: Wed, 21 Oct 2026 15:34:23 +0000
Subject: [PATCH 1/5] fix(hub-ui): mark the selected dock with aria-current

The dock bar and the group sidebar marked the selected dock only with a
scale and a color, so a screen reader announced every dock button the
same way and its user could not tell which dock was open (WCAG 4.1.2).

The button of the dock that is shown now gets `aria-current="page"`. A
new `isCurrent` prop carries this, because `isSelected` is also on
while a group popover is merely open. Group members in the sidebar get
the same attribute.
---
 packages/hub-ui/src/client/components/dock/DockEntries.vue  | 1 +
 packages/hub-ui/src/client/components/dock/DockEntry.vue    | 6 ++++++
 .../hub-ui/src/client/components/dock/DockGroupButton.vue   | 1 +
 .../hub-ui/src/client/components/dock/DockGroupSidebar.vue  | 1 +
 4 files changed, 9 insertions(+)

diff --git a/packages/hub-ui/src/client/components/dock/DockEntries.vue b/packages/hub-ui/src/client/components/dock/DockEntries.vue
index 55aa6dc2d..89ab1d55c 100644
--- a/packages/hub-ui/src/client/components/dock/DockEntries.vue
+++ b/packages/hub-ui/src/client/components/dock/DockEntries.vue
@@ -74,6 +74,7 @@ function toggleDockEntry(dock: DevframeDockEntry) {
         :dock
         :is-action="dock.type === 'action'"
         :is-selected="selected?.id === dock.id"
+        :is-current="selected?.id === dock.id"
         :is-dimmed="dimInactive && selected ? (selected.id !== dock.id) : false"
         :is-vertical="isVertical"
         :badge="dock.badge"
diff --git a/packages/hub-ui/src/client/components/dock/DockEntry.vue b/packages/hub-ui/src/client/components/dock/DockEntry.vue
index 4d7e9934c..51d9c8642 100644
--- a/packages/hub-ui/src/client/components/dock/DockEntry.vue
+++ b/packages/hub-ui/src/client/components/dock/DockEntry.vue
@@ -13,6 +13,11 @@ const props = withDefaults(
     dock: DevframeDockEntryBase
     isAction?: boolean
     isSelected?: boolean
+    /**
+     * The dock is the one shown now. Unlike `isSelected`, which is also on
+     * while a group popover is open, this marks the button `aria-current`.
+     */
+    isCurrent?: boolean
     isDimmed?: boolean
     isVertical?: boolean
     badge?: string
@@ -98,6 +103,7 @@ useEventListener('pointerdown', () => {
     <button
       ref="button"
       :aria-label="dock.title"
+      :aria-current="isCurrent ? 'page' : undefined"
       :class="[
         isVertical ? 'rotate-270' : '',
         isDimmed ? 'op50 saturate-0' : '',
diff --git a/packages/hub-ui/src/client/components/dock/DockGroupButton.vue b/packages/hub-ui/src/client/components/dock/DockGroupButton.vue
index f481ce357..5d2ac8556 100644
--- a/packages/hub-ui/src/client/components/dock/DockGroupButton.vue
+++ b/packages/hub-ui/src/client/components/dock/DockGroupButton.vue
@@ -132,6 +132,7 @@ function onClick() {
       :dock="group"
       :is-vertical="isVertical"
       :is-selected="isActive || isPanelVisible"
+      :is-current="isActive"
       :is-dimmed="dimInactive && selected ? !isActive : false"
       :badge="group.badge"
       :badge-variant="group.badgeVariant"
diff --git a/packages/hub-ui/src/client/components/dock/DockGroupSidebar.vue b/packages/hub-ui/src/client/components/dock/DockGroupSidebar.vue
index e19d2503d..d200c820c 100644
--- a/packages/hub-ui/src/client/components/dock/DockGroupSidebar.vue
+++ b/packages/hub-ui/src/client/components/dock/DockGroupSidebar.vue
@@ -179,6 +179,7 @@ const moreButtonActive = computed(() => selectedInOverflow.value || isOverflowPa
         v-for="member of members"
         :key="member.id"
         :aria-label="member.title"
+        :aria-current="selectedId === member.id ? 'page' : undefined"
         class="relative flex items-center justify-center w-8 h-8 rounded-lg transition"
         :class="selectedId === member.id ? 'text-primary bg-active' : 'op60 hover:op100 hover:bg-active'"
         @pointerenter="showTooltip($event, member.title)"

From 4258a2880465e10a13bdde4535b3b2681afea7c2 Mon Sep 17 00:00:00 2001
From: Erkam Yaman <erkamyaman35@gmail.com>
Date: Sun, 1 Nov 2026 12:17:13 +0000
Subject: [PATCH 2/5] fix(hub-ui): keep one current dock per set and cover
 hidden members

A group button now gets `aria-current="true"` and only the shown member
gets `page`, so the dock bar and the group sidebar no longer both claim
the current page. The group button finds the shown member among all
its members, also the hidden ones. The member list of the group and
overflow popover marks the shown member too, and an action dock is
never current.
---
 .../src/client/components/dock/DockEntries.vue      |  2 +-
 .../hub-ui/src/client/components/dock/DockEntry.vue |  5 +++--
 .../src/client/components/dock/DockGroupButton.vue  | 13 ++++++++++++-
 .../src/client/components/dock/DockGroupPopover.vue |  1 +
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/hub-ui/src/client/components/dock/DockEntries.vue b/packages/hub-ui/src/client/components/dock/DockEntries.vue
index fe51217db..513154c92 100644
--- a/packages/hub-ui/src/client/components/dock/DockEntries.vue
+++ b/packages/hub-ui/src/client/components/dock/DockEntries.vue
@@ -79,7 +79,7 @@ function toggleDockEntry(dock: DevframeDockEntry) {
         :dock
         :is-action="dock.type === 'action'"
         :is-selected="isDockActive(dock)"
-        :is-current="selected?.id === dock.id"
+        :is-current="dock.type !== 'action' && selected?.id === dock.id"
         :is-dimmed="dimInactive && selected ? !isDockActive(dock) : false"
         :is-vertical="isVertical"
         :badge="dock.badge"
diff --git a/packages/hub-ui/src/client/components/dock/DockEntry.vue b/packages/hub-ui/src/client/components/dock/DockEntry.vue
index f19577660..edf023687 100644
--- a/packages/hub-ui/src/client/components/dock/DockEntry.vue
+++ b/packages/hub-ui/src/client/components/dock/DockEntry.vue
@@ -15,7 +15,8 @@ const props = withDefaults(
     isSelected?: boolean
     /**
      * The dock is the one shown now. Unlike `isSelected`, which is also on
-     * while a group popover is open, this marks the button `aria-current`.
+     * while a group popover is open, this marks the button `aria-current`:
+     * `page` for a view, `true` for a group whose member is shown.
      */
     isCurrent?: boolean
     isDimmed?: boolean
@@ -103,7 +104,7 @@ useEventListener('pointerdown', () => {
     <button
       ref="button"
       :aria-label="dock.title"
-      :aria-current="isCurrent ? 'page' : undefined"
+      :aria-current="isCurrent ? (dock.type === 'group' ? 'true' : 'page') : undefined"
       :class="[
         isVertical ? 'rotate-270' : '',
         isDimmed ? 'op50 saturate-0' : '',
diff --git a/packages/hub-ui/src/client/components/dock/DockGroupButton.vue b/packages/hub-ui/src/client/components/dock/DockGroupButton.vue
index a73faee7e..5ff8ecdd6 100644
--- a/packages/hub-ui/src/client/components/dock/DockGroupButton.vue
+++ b/packages/hub-ui/src/client/components/dock/DockGroupButton.vue
@@ -47,6 +47,17 @@ const isActive = computed(() => {
   return !!id && members.value.some(m => m.id === id)
 })
 
+// A hidden member can own the panel too, so `aria-current` looks at every member.
+const ownsPanel = computed(() => {
+  const id = props.selected?.id
+  return !!id && getGroupMembers(
+    props.context.docks.entries,
+    props.group.id,
+    settings.value,
+    { includeHidden: true, whenContext: props.context.when.context },
+  ).some(m => m.id === id)
+})
+
 // A member toggle action that is on lights the button up too, without owning the panel.
 const hasActiveTool = computed(() => members.value.some(m => m.type === 'action' && props.context.docks.getStateById(m.id)?.isActive))
 
@@ -135,7 +146,7 @@ function onClick() {
       :dock="group"
       :is-vertical="isVertical"
       :is-selected="isActive || isPanelVisible || hasActiveTool"
-      :is-current="isActive"
+      :is-current="ownsPanel"
       :is-dimmed="dimInactive && selected ? !isActive && !hasActiveTool : false"
       :badge="group.badge"
       :badge-variant="group.badgeVariant"
diff --git a/packages/hub-ui/src/client/components/dock/DockGroupPopover.vue b/packages/hub-ui/src/client/components/dock/DockGroupPopover.vue
index 50feefcd3..9872dfcc3 100644
--- a/packages/hub-ui/src/client/components/dock/DockGroupPopover.vue
+++ b/packages/hub-ui/src/client/components/dock/DockGroupPopover.vue
@@ -65,6 +65,7 @@ function openContextMenu(e: MouseEvent, member: DevframeDockEntry) {
       <button
         v-for="member of items"
         :key="member.id"
+        :aria-current="selectedId === member.id ? 'page' : undefined"
         class="flex items-center gap-2 w-full px2 py1.5 rounded text-sm text-left transition"
         :class="selectedId === member.id || context.docks.getStateById(member.id)?.isActive ? 'text-primary bg-active' : 'op80 hover:op100 hover:bg-active'"
         @pointerenter="showTooltip($event, member)"

From f29aff7267d82ee8108634983e39ead52aaade8c Mon Sep 17 00:00:00 2001
From: Erkam Yaman <erkamyaman35@gmail.com>
Date: Sun, 1 Nov 2026 12:26:52 +0000
Subject: [PATCH 3/5] fix(hub-ui): mark only the shown dock view as current

`aria-current` now comes from one place, `getCurrentDockId()`: the
selected dock, but not an action, and not while the panel of an
embedded dock is closed. Only that dock's button gets
`aria-current="page"`, in the dock bar, the group sidebar or the group
and overflow popover. A group button is no longer marked, so a group
and its member are never both current, and `DockEntry` no longer reads
`dock.type`, which its prop type does not have.
---
 .../src/client/components/dock/DockEntries.vue   |  6 ++++--
 .../src/client/components/dock/DockEntry.vue     |  5 ++---
 .../client/components/dock/DockGroupButton.vue   | 12 ------------
 .../client/components/dock/DockGroupPopover.vue  |  5 ++++-
 .../client/components/dock/DockGroupSidebar.vue  |  5 ++++-
 packages/hub-ui/src/client/state/docks.ts        | 16 +++++++++++++++-
 6 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/packages/hub-ui/src/client/components/dock/DockEntries.vue b/packages/hub-ui/src/client/components/dock/DockEntries.vue
index 513154c92..a4b5f90ba 100644
--- a/packages/hub-ui/src/client/components/dock/DockEntries.vue
+++ b/packages/hub-ui/src/client/components/dock/DockEntries.vue
@@ -2,8 +2,9 @@
 import type { DevframeDockEntry } from '@devframes/hub'
 import type { DocksContext } from '@devframes/hub/client'
 import { evaluateWhen } from 'devframe/utils/when'
-import { toRefs } from 'vue'
+import { computed, toRefs } from 'vue'
 import { getGroupMembers, resolveGroupDefaultChild } from '../../state/dock-settings'
+import { getCurrentDockId } from '../../state/docks'
 import { useSettings } from '../../state/settings-defaults'
 import DockEntry from './DockEntry.vue'
 import DockGroupButton from './DockGroupButton.vue'
@@ -23,6 +24,7 @@ const emit = defineEmits<{
 }>()
 
 const { selected, isVertical, entries } = toRefs(props)
+const currentId = computed(() => getCurrentDockId(props.context))
 
 const settings = useSettings(props.context)
 
@@ -79,7 +81,7 @@ function toggleDockEntry(dock: DevframeDockEntry) {
         :dock
         :is-action="dock.type === 'action'"
         :is-selected="isDockActive(dock)"
-        :is-current="dock.type !== 'action' && selected?.id === dock.id"
+        :is-current="currentId === dock.id"
         :is-dimmed="dimInactive && selected ? !isDockActive(dock) : false"
         :is-vertical="isVertical"
         :badge="dock.badge"
diff --git a/packages/hub-ui/src/client/components/dock/DockEntry.vue b/packages/hub-ui/src/client/components/dock/DockEntry.vue
index edf023687..f19577660 100644
--- a/packages/hub-ui/src/client/components/dock/DockEntry.vue
+++ b/packages/hub-ui/src/client/components/dock/DockEntry.vue
@@ -15,8 +15,7 @@ const props = withDefaults(
     isSelected?: boolean
     /**
      * The dock is the one shown now. Unlike `isSelected`, which is also on
-     * while a group popover is open, this marks the button `aria-current`:
-     * `page` for a view, `true` for a group whose member is shown.
+     * while a group popover is open, this marks the button `aria-current`.
      */
     isCurrent?: boolean
     isDimmed?: boolean
@@ -104,7 +103,7 @@ useEventListener('pointerdown', () => {
     <button
       ref="button"
       :aria-label="dock.title"
-      :aria-current="isCurrent ? (dock.type === 'group' ? 'true' : 'page') : undefined"
+      :aria-current="isCurrent ? 'page' : undefined"
       :class="[
         isVertical ? 'rotate-270' : '',
         isDimmed ? 'op50 saturate-0' : '',
diff --git a/packages/hub-ui/src/client/components/dock/DockGroupButton.vue b/packages/hub-ui/src/client/components/dock/DockGroupButton.vue
index 5ff8ecdd6..2b2621209 100644
--- a/packages/hub-ui/src/client/components/dock/DockGroupButton.vue
+++ b/packages/hub-ui/src/client/components/dock/DockGroupButton.vue
@@ -47,17 +47,6 @@ const isActive = computed(() => {
   return !!id && members.value.some(m => m.id === id)
 })
 
-// A hidden member can own the panel too, so `aria-current` looks at every member.
-const ownsPanel = computed(() => {
-  const id = props.selected?.id
-  return !!id && getGroupMembers(
-    props.context.docks.entries,
-    props.group.id,
-    settings.value,
-    { includeHidden: true, whenContext: props.context.when.context },
-  ).some(m => m.id === id)
-})
-
 // A member toggle action that is on lights the button up too, without owning the panel.
 const hasActiveTool = computed(() => members.value.some(m => m.type === 'action' && props.context.docks.getStateById(m.id)?.isActive))
 
@@ -146,7 +135,6 @@ function onClick() {
       :dock="group"
       :is-vertical="isVertical"
       :is-selected="isActive || isPanelVisible || hasActiveTool"
-      :is-current="ownsPanel"
       :is-dimmed="dimInactive && selected ? !isActive && !hasActiveTool : false"
       :badge="group.badge"
       :badge-variant="group.badgeVariant"
diff --git a/packages/hub-ui/src/client/components/dock/DockGroupPopover.vue b/packages/hub-ui/src/client/components/dock/DockGroupPopover.vue
index 9872dfcc3..51f7209f5 100644
--- a/packages/hub-ui/src/client/components/dock/DockGroupPopover.vue
+++ b/packages/hub-ui/src/client/components/dock/DockGroupPopover.vue
@@ -3,6 +3,7 @@ import type { DevframeDockEntriesGrouped, DevframeDockEntry, DevframeViewGroup }
 import type { DocksContext } from '@devframes/hub/client'
 import { computed } from 'vue'
 import { t } from '../../i18n'
+import { getCurrentDockId } from '../../state/docks'
 import { dockTooltipContent, setFloatingTooltip } from '../../state/floating-tooltip'
 import { accentVarStyle } from '../../utils/accent-color'
 import { openDockContextMenu } from './DockContextMenu'
@@ -20,6 +21,8 @@ const emit = defineEmits<{
   (e: 'select', entry: DevframeDockEntry): void
 }>()
 
+const currentId = computed(() => getCurrentDockId(props.context))
+
 // A row already shows its title, so only a `description` is worth a tooltip.
 function showTooltip(event: PointerEvent, member: DevframeDockEntry) {
   if (member.description)
@@ -65,7 +68,7 @@ function openContextMenu(e: MouseEvent, member: DevframeDockEntry) {
       <button
         v-for="member of items"
         :key="member.id"
-        :aria-current="selectedId === member.id ? 'page' : undefined"
+        :aria-current="currentId === member.id ? 'page' : undefined"
         class="flex items-center gap-2 w-full px2 py1.5 rounded text-sm text-left transition"
         :class="selectedId === member.id || context.docks.getStateById(member.id)?.isActive ? 'text-primary bg-active' : 'op80 hover:op100 hover:bg-active'"
         @pointerenter="showTooltip($event, member)"
diff --git a/packages/hub-ui/src/client/components/dock/DockGroupSidebar.vue b/packages/hub-ui/src/client/components/dock/DockGroupSidebar.vue
index 51e61dfe3..506c0f829 100644
--- a/packages/hub-ui/src/client/components/dock/DockGroupSidebar.vue
+++ b/packages/hub-ui/src/client/components/dock/DockGroupSidebar.vue
@@ -5,6 +5,7 @@ import { watchDebounced } from '@vueuse/core'
 import { computed, h, ref, useTemplateRef, watch } from 'vue'
 import { t } from '../../i18n'
 import { deriveSidebarCapacity, docksSplitGroupsWithCapacity, getGroupMembersGrouped } from '../../state/dock-settings'
+import { getCurrentDockId } from '../../state/docks'
 import { dockTooltipContent, setDocksSidebarOverflowPanel, setFloatingTooltip, useDocksSidebarOverflowPanel } from '../../state/floating-tooltip'
 import { useSettings } from '../../state/settings-defaults'
 import { accentVarStyle } from '../../utils/accent-color'
@@ -18,6 +19,8 @@ const props = defineProps<{
   selectedId: string | null
 }>()
 
+const currentId = computed(() => getCurrentDockId(props.context))
+
 // Vertical rhythm of the rail, in px. Mirrors the Uno classes on the template:
 // each button is `w-8 h-8` (32) and children sit in a `gap-0.5` (2) flex column;
 // the root has `py1.5` (6+6) padding; dividers are `h-px my0.5` (1 + 2*2).
@@ -190,7 +193,7 @@ const moreButtonActive = computed(() => selectedInOverflow.value || isOverflowPa
         v-for="member of members"
         :key="member.id"
         :aria-label="member.title"
-        :aria-current="selectedId === member.id ? 'page' : undefined"
+        :aria-current="currentId === member.id ? 'page' : undefined"
         class="relative flex items-center justify-center w-8 h-8 rounded-lg transition"
         :class="selectedId === member.id ? 'text-primary bg-active' : 'op60 hover:op100 hover:bg-active'"
         @pointerenter="showTooltip($event, member)"
diff --git a/packages/hub-ui/src/client/state/docks.ts b/packages/hub-ui/src/client/state/docks.ts
index ded7c4dac..4039009fc 100644
--- a/packages/hub-ui/src/client/state/docks.ts
+++ b/packages/hub-ui/src/client/state/docks.ts
@@ -1,10 +1,24 @@
 import type { DevframeDockEntry } from '@devframes/hub'
-import type { DevframeRpcClient, DockEntryState, DockEntryStateEvents, DockPanelStorage, DockSessionStorage } from '@devframes/hub/client'
+import type { DevframeRpcClient, DockEntryState, DockEntryStateEvents, DockPanelStorage, DocksContext, DockSessionStorage } from '@devframes/hub/client'
 import type { SharedState } from 'devframe/utils/shared-state'
 import type { Ref, ShallowRef } from 'vue'
 import { createEventEmitter } from 'devframe/utils/events'
 import { markRaw, reactive, shallowRef, watch } from 'vue'
 
+/**
+ * The id of the dock whose view is shown now, which the dock marks
+ * `aria-current`: none for an action, and none while the panel of an
+ * embedded dock is closed.
+ */
+export function getCurrentDockId(context: DocksContext): string | undefined {
+  const entry = context.docks.selected
+  if (!entry || entry.type === 'action')
+    return undefined
+  if (context.clientType === 'embedded' && !context.panel.session.open)
+    return undefined
+  return entry.id
+}
+
 export function DEFAULT_DOCK_PANEL_STORE(): DockPanelStorage {
   return {
     mode: 'float',

From 6661e1434c90f4e461e441d16a32813e2a13e777 Mon Sep 17 00:00:00 2001
From: Erkam Yaman <erkamyaman35@gmail.com>
Date: Sun, 1 Nov 2026 12:36:44 +0000
Subject: [PATCH 4/5] fix(hub-ui): mark the button that holds a hidden current
 dock

The shown dock keeps `aria-current="page"`. When it is out of sight, the
button that holds it gets `aria-current="true"`: the group button of its
group, the overflow button of the dock bar, or the show-more button of
the group sidebar. `DockEntry` takes the value through a `current` prop.
---
 .../src/client/components/dock/DockEntries.vue       |  2 +-
 .../hub-ui/src/client/components/dock/DockEntry.vue  |  9 +++++----
 .../src/client/components/dock/DockGroupButton.vue   |  5 +++++
 .../src/client/components/dock/DockGroupSidebar.vue  |  5 +++++
 .../client/components/dock/DockOverflowButton.vue    |  8 ++++++++
 packages/hub-ui/src/client/state/docks.ts            | 12 ++++++++++++
 6 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/packages/hub-ui/src/client/components/dock/DockEntries.vue b/packages/hub-ui/src/client/components/dock/DockEntries.vue
index a4b5f90ba..d572c4c37 100644
--- a/packages/hub-ui/src/client/components/dock/DockEntries.vue
+++ b/packages/hub-ui/src/client/components/dock/DockEntries.vue
@@ -81,7 +81,7 @@ function toggleDockEntry(dock: DevframeDockEntry) {
         :dock
         :is-action="dock.type === 'action'"
         :is-selected="isDockActive(dock)"
-        :is-current="currentId === dock.id"
+        :current="currentId === dock.id ? 'page' : undefined"
         :is-dimmed="dimInactive && selected ? !isDockActive(dock) : false"
         :is-vertical="isVertical"
         :badge="dock.badge"
diff --git a/packages/hub-ui/src/client/components/dock/DockEntry.vue b/packages/hub-ui/src/client/components/dock/DockEntry.vue
index f19577660..c70c59f21 100644
--- a/packages/hub-ui/src/client/components/dock/DockEntry.vue
+++ b/packages/hub-ui/src/client/components/dock/DockEntry.vue
@@ -14,10 +14,11 @@ const props = withDefaults(
     isAction?: boolean
     isSelected?: boolean
     /**
-     * The dock is the one shown now. Unlike `isSelected`, which is also on
-     * while a group popover is open, this marks the button `aria-current`.
+     * The `aria-current` of the button: `page` for the dock shown now, `true`
+     * for a group or overflow button that holds it while it is out of sight.
+     * Unlike `isSelected`, which is also on while a group popover is open.
      */
-    isCurrent?: boolean
+    current?: 'page' | 'true'
     isDimmed?: boolean
     isVertical?: boolean
     badge?: string
@@ -103,7 +104,7 @@ useEventListener('pointerdown', () => {
     <button
       ref="button"
       :aria-label="dock.title"
-      :aria-current="isCurrent ? 'page' : undefined"
+      :aria-current="current"
       :class="[
         isVertical ? 'rotate-270' : '',
         isDimmed ? 'op50 saturate-0' : '',
diff --git a/packages/hub-ui/src/client/components/dock/DockGroupButton.vue b/packages/hub-ui/src/client/components/dock/DockGroupButton.vue
index 2b2621209..938b50bbf 100644
--- a/packages/hub-ui/src/client/components/dock/DockGroupButton.vue
+++ b/packages/hub-ui/src/client/components/dock/DockGroupButton.vue
@@ -4,6 +4,7 @@ import type { DocksContext } from '@devframes/hub/client'
 import { watchDebounced } from '@vueuse/core'
 import { computed, h, onBeforeUnmount, ref, useTemplateRef } from 'vue'
 import { getGroupMembers, getGroupMembersGrouped, resolveGroupPreferredChild } from '../../state/dock-settings'
+import { getCurrentDockId, holdsCurrentDock } from '../../state/docks'
 import { setDocksGroupPanel, useDocksGroupPanel } from '../../state/floating-tooltip'
 import { useSettings } from '../../state/settings-defaults'
 import { accentVarStyle } from '../../utils/accent-color'
@@ -47,6 +48,9 @@ const isActive = computed(() => {
   return !!id && members.value.some(m => m.id === id)
 })
 
+// The shown dock is one of this group's members, hidden or not.
+const holdsCurrent = computed(() => holdsCurrentDock(props.context, props.group, getCurrentDockId(props.context)))
+
 // A member toggle action that is on lights the button up too, without owning the panel.
 const hasActiveTool = computed(() => members.value.some(m => m.type === 'action' && props.context.docks.getStateById(m.id)?.isActive))
 
@@ -136,6 +140,7 @@ function onClick() {
       :is-vertical="isVertical"
       :is-selected="isActive || isPanelVisible || hasActiveTool"
       :is-dimmed="dimInactive && selected ? !isActive && !hasActiveTool : false"
+      :current="holdsCurrent ? 'true' : undefined"
       :badge="group.badge"
       :badge-variant="group.badgeVariant"
       @click="onClick"
diff --git a/packages/hub-ui/src/client/components/dock/DockGroupSidebar.vue b/packages/hub-ui/src/client/components/dock/DockGroupSidebar.vue
index 506c0f829..7789320a9 100644
--- a/packages/hub-ui/src/client/components/dock/DockGroupSidebar.vue
+++ b/packages/hub-ui/src/client/components/dock/DockGroupSidebar.vue
@@ -87,6 +87,10 @@ const overflowCount = computed(() => overflowGroups.value.reduce((acc, [, items]
 const hasOverflow = computed(() => overflowCount.value > 0)
 const overflowBadge = computed(() => (overflowCount.value > 9 ? '9+' : overflowCount.value.toString()))
 
+// The shown member is hidden inside the show-more popover.
+const currentInOverflow = computed(() =>
+  !!currentId.value && overflowGroups.value.some(([, items]) => items.some(m => m.id === currentId.value)))
+
 // The current selection is hidden inside the show-more popover.
 const selectedInOverflow = computed(() =>
   !!props.selectedId && overflowGroups.value.some(([, items]) => items.some(m => m.id === props.selectedId)))
@@ -217,6 +221,7 @@ const moreButtonActive = computed(() => selectedInOverflow.value || isOverflowPa
       v-if="hasOverflow"
       ref="moreButton"
       :aria-label="t('dock.showMore')"
+      :aria-current="currentInOverflow ? 'true' : undefined"
       class="relative flex items-center justify-center w-8 h-8 rounded-lg transition mt-auto flex-none"
       :class="moreButtonActive ? 'text-primary bg-active' : 'op60 hover:op100 hover:bg-active'"
       @pointerenter="showTooltip($event, t('dock.showMore'))"
diff --git a/packages/hub-ui/src/client/components/dock/DockOverflowButton.vue b/packages/hub-ui/src/client/components/dock/DockOverflowButton.vue
index b4ace98a8..64a261b00 100644
--- a/packages/hub-ui/src/client/components/dock/DockOverflowButton.vue
+++ b/packages/hub-ui/src/client/components/dock/DockOverflowButton.vue
@@ -6,6 +6,7 @@ import type { FloatingPopoverProps } from '../../state/floating-tooltip'
 import { watchDebounced } from '@vueuse/core'
 import { computed, h, onBeforeUnmount, ref, useTemplateRef } from 'vue'
 import { t } from '../../i18n'
+import { getCurrentDockId, holdsCurrentDock } from '../../state/docks'
 import { setDocksOverflowPanel, useDocksOverflowPanel } from '../../state/floating-tooltip'
 import DockEntriesWithCategories from './DockEntriesWithCategories.vue'
 import DockEntry from './DockEntry.vue'
@@ -31,6 +32,12 @@ const overflowBadge = computed(() => {
   return count.toString()
 })
 
+// The shown dock, or the group that holds it, is in the overflow.
+const holdsCurrent = computed(() => {
+  const currentId = getCurrentDockId(props.context)
+  return props.groups.some(([, items]) => items.some(entry => holdsCurrentDock(props.context, entry, currentId)))
+})
+
 const isOverflowPanelVisible = ref(false)
 const docksOverflowPanel = useDocksOverflowPanel()
 
@@ -110,6 +117,7 @@ onBeforeUnmount(() => {
       :is-vertical="isVertical"
       :is-selected="false"
       :is-dimmed="false"
+      :current="holdsCurrent ? 'true' : undefined"
       @click="toggleOverflowPanel"
     />
   </div>
diff --git a/packages/hub-ui/src/client/state/docks.ts b/packages/hub-ui/src/client/state/docks.ts
index 4039009fc..478b3d9a5 100644
--- a/packages/hub-ui/src/client/state/docks.ts
+++ b/packages/hub-ui/src/client/state/docks.ts
@@ -19,6 +19,18 @@ export function getCurrentDockId(context: DocksContext): string | undefined {
   return entry.id
 }
 
+/**
+ * Whether `entry` is the current dock, or a group whose member is the
+ * current dock. `currentId` is {@link getCurrentDockId}.
+ */
+export function holdsCurrentDock(context: DocksContext, entry: DevframeDockEntry, currentId: string | undefined): boolean {
+  if (!currentId)
+    return false
+  if (entry.id === currentId)
+    return true
+  return entry.type === 'group' && context.docks.entries.find(e => e.id === currentId)?.groupId === entry.id
+}
+
 export function DEFAULT_DOCK_PANEL_STORE(): DockPanelStorage {
   return {
     mode: 'float',

From 3a56edf266a8c641a8d16eed626946f163ca1446 Mon Sep 17 00:00:00 2001
From: Erkam Yaman <erkamyaman35@gmail.com>
Date: Sun, 1 Nov 2026 12:52:54 +0000
Subject: [PATCH 5/5] fix(hub-ui): skip the group when its current member has
 its own button

A group button was marked `aria-current="true"` even when its shown
member also had a pinned or recent button on the dock bar, so the bar
announced two current items. The group, and an overflow button through
it, now stands in for the member only when the member has no button of
its own. Tests cover `getCurrentDockId()` and `holdsCurrentDock()`.
---
 .../hub-ui/src/client/state/docks.test.ts     | 42 +++++++++++++++++++
 packages/hub-ui/src/client/state/docks.ts     | 16 ++++++-
 2 files changed, 56 insertions(+), 2 deletions(-)
 create mode 100644 packages/hub-ui/src/client/state/docks.test.ts

diff --git a/packages/hub-ui/src/client/state/docks.test.ts b/packages/hub-ui/src/client/state/docks.test.ts
new file mode 100644
index 000000000..d15e86cb5
--- /dev/null
+++ b/packages/hub-ui/src/client/state/docks.test.ts
@@ -0,0 +1,42 @@
+import type { DevframeDockEntry } from '@devframes/hub'
+import type { DocksContext } from '@devframes/hub/client'
+import { describe, expect, it } from 'vitest'
+import { getCurrentDockId, holdsCurrentDock } from './docks'
+
+const group = { type: 'group', id: 'tools', title: 'Tools', icon: 'i' } as DevframeDockEntry
+const member = { type: 'iframe', id: 'logs', title: 'Logs', icon: 'i', url: '/', groupId: 'tools' } as DevframeDockEntry
+const action = { type: 'action', id: 'reload', title: 'Reload', icon: 'i' } as DevframeDockEntry
+
+function contextWith(selected: DevframeDockEntry | null, options: { clientType?: 'embedded' | 'standalone', open?: boolean, recent?: string[], topLevel?: DevframeDockEntry[] } = {}): DocksContext {
+  // eslint-disable-next-line slop/no-chained-type-assertions -- this fixture supplies only the context fields the dock helpers read.
+  return {
+    clientType: options.clientType ?? 'standalone',
+    panel: { session: { open: options.open ?? true, recentDockIds: options.recent } },
+    docks: { selected, entries: [group, member, action], groupedEntries: [['default', options.topLevel ?? [group, action]]] },
+  } as unknown as DocksContext
+}
+
+describe('getCurrentDockId', () => {
+  it('is the selected view, never an action, and none while an embedded panel is closed', () => {
+    expect(getCurrentDockId(contextWith(member))).toBe('logs')
+    expect(getCurrentDockId(contextWith(action))).toBeUndefined()
+    expect(getCurrentDockId(contextWith(null))).toBeUndefined()
+    expect(getCurrentDockId(contextWith(member, { clientType: 'embedded', open: false }))).toBeUndefined()
+    expect(getCurrentDockId(contextWith(member, { clientType: 'embedded', open: true }))).toBe('logs')
+  })
+})
+
+describe('holdsCurrentDock', () => {
+  it('holds the current dock itself and the group of a current member', () => {
+    const context = contextWith(member)
+    expect(holdsCurrentDock(context, member, 'logs')).toBe(true)
+    expect(holdsCurrentDock(context, group, 'logs')).toBe(true)
+    expect(holdsCurrentDock(context, action, 'logs')).toBe(false)
+    expect(holdsCurrentDock(context, group, undefined)).toBe(false)
+  })
+
+  it('leaves the group out when the member has its own button on the bar', () => {
+    expect(holdsCurrentDock(contextWith(member, { recent: ['logs'] }), group, 'logs')).toBe(false)
+    expect(holdsCurrentDock(contextWith(member, { topLevel: [group, member] }), group, 'logs')).toBe(false)
+  })
+})
diff --git a/packages/hub-ui/src/client/state/docks.ts b/packages/hub-ui/src/client/state/docks.ts
index 478b3d9a5..f276f3a2c 100644
--- a/packages/hub-ui/src/client/state/docks.ts
+++ b/packages/hub-ui/src/client/state/docks.ts
@@ -21,14 +21,26 @@ export function getCurrentDockId(context: DocksContext): string | undefined {
 
 /**
  * Whether `entry` is the current dock, or a group whose member is the
- * current dock. `currentId` is {@link getCurrentDockId}.
+ * current dock and has no button of its own on the dock bar (a pinned or
+ * recent button), so the group button stands in for it. `currentId` is
+ * {@link getCurrentDockId}.
  */
 export function holdsCurrentDock(context: DocksContext, entry: DevframeDockEntry, currentId: string | undefined): boolean {
   if (!currentId)
     return false
   if (entry.id === currentId)
     return true
-  return entry.type === 'group' && context.docks.entries.find(e => e.id === currentId)?.groupId === entry.id
+  return entry.type === 'group'
+    && context.docks.entries.find(e => e.id === currentId)?.groupId === entry.id
+    && !hasOwnDockButton(context, currentId)
+}
+
+/** Whether the dock has its own button on the dock bar: pinned out of its group, or raised as a recent dock. */
+function hasOwnDockButton(context: DocksContext, id: string): boolean {
+  const session = context.panel.session
+  const recentIds = session.recentDockIds ?? (session.recentDockId ? [session.recentDockId] : [])
+  return recentIds.includes(id)
+    || context.docks.groupedEntries.some(([, items]) => items.some(entry => entry.id === id))
 }
 
 export function DEFAULT_DOCK_PANEL_STORE(): DockPanelStorage {