From eab6c34f4f3b0975213fa8b48a631de2fdfd439c Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 5 Oct 2026 09:31:19 +0100
Subject: [PATCH 1/3] Stop nesting interactive controls in login and tab strips

Remove positive login tabindexes so focus follows DOM order. Keep
blueprint tab actions and overflow menus outside TabTrigger/TabList,
and disable Draggable Focusable so sortable wrappers do not get
tabindex inside the tablist.
---
 resources/js/components/blueprints/Tab.vue  | 24 ++++---
 resources/js/components/blueprints/Tabs.vue | 79 +++++++++++----------
 resources/js/components/ui/Publish/Tabs.vue | 64 ++++++++---------
 resources/js/pages/auth/Login.vue           |  9 ++-
 4 files changed, 91 insertions(+), 85 deletions(-)

diff --git a/resources/js/components/blueprints/Tab.vue b/resources/js/components/blueprints/Tab.vue
index d867d7f1ffd..15ee4d31c07 100644
--- a/resources/js/components/blueprints/Tab.vue
+++ b/resources/js/components/blueprints/Tab.vue
@@ -1,13 +1,15 @@
 <template>
-    <TabTrigger :name="tab._id" class="blueprint-tab flex items-center">
-        <Icon
-            v-if="tab.icon"
-            :name="tab.icon"
-            :set="iconSet"
-            class="h-4 w-4 me-1"
-        />
-
-        <span class="block max-w-48 overflow-clip text-ellipsis whitespace-nowrap" v-tooltip="__(tab.display).length > 24 ? __(tab.display) : null">{{ __(tab.display) }}</span>
+    <div class="blueprint-tab relative flex items-center">
+        <TabTrigger :name="tab._id" class="flex items-center">
+            <Icon
+                v-if="tab.icon"
+                :name="tab.icon"
+                :set="iconSet"
+                class="h-4 w-4 me-1"
+            />
+
+            <span class="block max-w-48 overflow-clip text-ellipsis whitespace-nowrap" v-tooltip="__(tab.display).length > 24 ? __(tab.display) : null">{{ __(tab.display) }}</span>
+        </TabTrigger>
 
         <Dropdown v-if="isActive" placement="left-start" class="me-3">
             <template #trigger>
@@ -20,7 +22,7 @@
         </Dropdown>
 
         <Stack
-	        size="narrow"
+            size="narrow"
             :open="editing"
             @opened="() => $nextTick(() => $refs.title.select())"
             @update:open="editCancelled"
@@ -75,7 +77,7 @@
                 </div>
             </div>
         </Stack>
-    </TabTrigger>
+    </div>
 </template>
 
 <script>
diff --git a/resources/js/components/blueprints/Tabs.vue b/resources/js/components/blueprints/Tabs.vue
index 7d58aa4f4d9..fc96e4c1cbc 100644
--- a/resources/js/components/blueprints/Tabs.vue
+++ b/resources/js/components/blueprints/Tabs.vue
@@ -3,8 +3,8 @@
         <div>
             <Tabs v-model="currentTab" :unmount-on-hide="false">
                 <div v-if="!singleTab && tabs.length > 0" class="flex items-center justify-between gap-x-2 mb-6">
-                    <TabList class="flex-1 min-w-0 overflow-x-clip overflow-y-visible pe-0.25">
-                        <div ref="tabs" class="flex-1 flex items-center gap-x-2.5 min-w-0">
+                    <div ref="tabs" class="flex-1 flex items-center gap-x-2.5 min-w-0">
+                        <TabList class="flex-1 min-w-0 overflow-x-clip overflow-y-visible pe-0.25">
                             <div ref="tabWrapper" class="min-w-0 flex-1 flex overflow-clip px-0.25">
                                 <div ref="tabInner" class="flex items-center gap-x-2.5 shrink-0">
                                     <BlueprintTab
@@ -21,41 +21,41 @@
                                     />
                                 </div>
                             </div>
-                            <Dropdown
-                                v-if="overflowedTabs.length"
-                                align="end"
-                                side="bottom"
-                                class="shrink-0"
-                            >
-                                <template #trigger>
-                                    <Button
-                                        icon="dots"
-                                        variant="ghost"
-                                        size="sm"
-                                        :aria-label="__('Open dropdown menu')"
-                                    />
+                        </TabList>
+                        <Dropdown
+                            v-if="overflowedTabs.length"
+                            align="end"
+                            side="bottom"
+                            class="shrink-0"
+                        >
+                            <template #trigger>
+                                <Button
+                                    icon="dots"
+                                    variant="ghost"
+                                    size="sm"
+                                    :aria-label="__('Open dropdown menu')"
+                                />
+                            </template>
+                            <DropdownMenu>
+                                <DropdownItem
+                                    v-for="tab in overflowedTabs"
+                                    :key="tab._id"
+                                    :icon="tab.icon"
+                                    :class="{ 'bg-gray-100 dark:bg-gray-800': currentTab === tab._id }"
+                                    @click="selectTab(tab._id)"
+                                >
+                                    <span class="block max-w-48 overflow-hidden text-ellipsis whitespace-nowrap">
+                                        {{ __(tab.display) }}
+                                    </span>
+                                </DropdownItem>
+                                <template v-if="activeTabIsOverflowed">
+                                    <DropdownSeparator />
+                                    <DropdownItem :text="__('Edit')" icon="edit" @click="editActiveOverflowedTab" />
+                                    <DropdownItem :text="__('Delete')" icon="trash" variant="destructive" @click="removeActiveOverflowedTab" />
                                 </template>
-                                <DropdownMenu>
-                                    <DropdownItem
-                                        v-for="tab in overflowedTabs"
-                                        :key="tab._id"
-                                        :icon="tab.icon"
-                                        :class="{ 'bg-gray-100 dark:bg-gray-800': currentTab === tab._id }"
-                                        @click="selectTab(tab._id)"
-                                    >
-                                        <span class="block max-w-48 overflow-hidden text-ellipsis whitespace-nowrap">
-                                            {{ __(tab.display) }}
-                                        </span>
-                                    </DropdownItem>
-                                    <template v-if="activeTabIsOverflowed">
-                                        <DropdownSeparator />
-                                        <DropdownItem :text="__('Edit')" icon="edit" @click="editActiveOverflowedTab" />
-                                        <DropdownItem :text="__('Delete')" icon="trash" variant="destructive" @click="removeActiveOverflowedTab" />
-                                    </template>
-                                </DropdownMenu>
-                            </Dropdown>
-                        </div>
-                    </TabList>
+                            </DropdownMenu>
+                        </Dropdown>
+                    </div>
 
                     <Button icon="plus" size="sm" round v-tooltip="addTabText" @click="addAndEditTab" />
                 </div>
@@ -89,7 +89,7 @@
 </template>
 
 <script>
-import { Sortable, Plugins } from '@shopify/draggable';
+import { Sortable, Plugins, Draggable } from '@shopify/draggable';
 import { nanoid as uniqid } from 'nanoid';
 import { createTabsOverflowTracker } from '@/util/tabs-overflow.js';
 import BlueprintTab from './Tab.vue';
@@ -259,6 +259,11 @@ export default {
                 swapAnimation: { horizontal: true },
                 plugins: [Plugins.SwapAnimation],
                 distance: 10,
+                // Focusable adds tabindex to sortable wrappers, which puts non-tab
+                // focusables inside the tablist and fails aria-required-children.
+                exclude: {
+                    plugins: [Draggable.Plugins.Focusable],
+                },
             })
                 .on('sortable:stop', (e) => {
                     this.tabs.splice(e.newIndex, 0, this.tabs.splice(e.oldIndex, 1)[0]);
diff --git a/resources/js/components/ui/Publish/Tabs.vue b/resources/js/components/ui/Publish/Tabs.vue
index 62850cdfe54..9be4d86d1c8 100644
--- a/resources/js/components/ui/Publish/Tabs.vue
+++ b/resources/js/components/ui/Publish/Tabs.vue
@@ -148,8 +148,8 @@ onUnmounted(() => {
         <div>
             <Tabs v-if="width" v-model:modelValue="activeTab">
                 <div v-if="hasMultipleVisibleMainTabs" class="flex items-center gap-x-2 -mt-2 mb-6">
-                    <TabList class="flex-1 min-w-0 overflow-x-clip overflow-y-visible pe-0.25">
-                        <div class="flex-1 flex items-center gap-x-2.5 min-w-0">
+                    <div class="flex-1 flex items-center gap-x-2.5 min-w-0">
+                        <TabList class="flex-1 min-w-0 overflow-x-clip overflow-y-visible pe-0.25">
                             <div ref="tabWrapper" class="min-w-0 flex-1 flex overflow-clip px-0.25">
                                 <div ref="tabInner" class="flex items-center gap-x-2.5 shrink-0">
                                     <TabTrigger
@@ -162,36 +162,36 @@ onUnmounted(() => {
                                     </TabTrigger>
                                 </div>
                             </div>
-                            <Dropdown
-                                v-if="overflowedTabs.length"
-                                align="end"
-                                side="bottom"
-                                class="shrink-0"
-                            >
-                                <template #trigger>
-                                    <Button
-                                        icon="dots"
-                                        variant="ghost"
-                                        size="sm"
-                                        :aria-label="__('Open dropdown menu')"
-                                    />
-                                </template>
-                                <DropdownMenu>
-                                    <DropdownItem
-                                        v-for="tab in overflowedTabs"
-                                        :key="tab.handle"
-                                        :icon="tab.icon"
-                                        :class="{ 'bg-gray-100 dark:bg-gray-800': activeTab === tab.handle }"
-                                        @click="setActive(tab.handle)"
-                                    >
-                                        <span class="block max-w-48 overflow-hidden text-ellipsis whitespace-nowrap">
-                                            {{ __(tab.display) }}
-                                        </span>
-                                    </DropdownItem>
-                                </DropdownMenu>
-                            </Dropdown>
-                        </div>
-                    </TabList>
+                        </TabList>
+                        <Dropdown
+                            v-if="overflowedTabs.length"
+                            align="end"
+                            side="bottom"
+                            class="shrink-0"
+                        >
+                            <template #trigger>
+                                <Button
+                                    icon="dots"
+                                    variant="ghost"
+                                    size="sm"
+                                    :aria-label="__('Open dropdown menu')"
+                                />
+                            </template>
+                            <DropdownMenu>
+                                <DropdownItem
+                                    v-for="tab in overflowedTabs"
+                                    :key="tab.handle"
+                                    :icon="tab.icon"
+                                    :class="{ 'bg-gray-100 dark:bg-gray-800': activeTab === tab.handle }"
+                                    @click="setActive(tab.handle)"
+                                >
+                                    <span class="block max-w-48 overflow-hidden text-ellipsis whitespace-nowrap">
+                                        {{ __(tab.display) }}
+                                    </span>
+                                </DropdownItem>
+                            </DropdownMenu>
+                        </Dropdown>
+                    </div>
                 </div>
 
                 <div :class="{ 'grid grid-cols-[1fr_320px] gap-8': shouldShowSidebar }">
diff --git a/resources/js/pages/auth/Login.vue b/resources/js/pages/auth/Login.vue
index 0a910807bd4..885f705af3d 100644
--- a/resources/js/pages/auth/Login.vue
+++ b/resources/js/pages/auth/Login.vue
@@ -97,24 +97,23 @@ onUnmounted(() => passkey.cancel());
                 class="flex flex-col gap-6"
             >
                 <Field :label="__('Email')" :error="errors?.email">
-                    <Input v-model="email" name="email" autofocus tabindex="1" :autocomplete="emailAutocomplete" />
+                    <Input v-model="email" name="email" autofocus :autocomplete="emailAutocomplete" />
                 </Field>
 
                 <Field :label="__('Password')" :error="errors?.password">
-                    <Input v-model="password" name="password" type="password" :autocomplete="passwordAutocomplete" tabindex="2" />
+                    <Input v-model="password" name="password" type="password" :autocomplete="passwordAutocomplete" />
                     <template #actions>
                         <Link
                             :href="forgotPasswordUrl"
                             class="text-ui-accent-text mb-1.5 text-sm hover:text-ui-accent-text/80"
-                            tabindex="6"
                             v-text="__('Forgot password?')"
                         />
                     </template>
                 </Field>
 
-                <Checkbox v-model="remember" name="remember" :label="__('Remember me')" tabindex="4" />
+                <Checkbox v-model="remember" name="remember" :label="__('Remember me')" />
 
-                <Button type="submit" variant="primary" :disabled="processing" :text="__('Continue')" tabindex="5" />
+                <Button type="submit" variant="primary" :disabled="processing" :text="__('Continue')" />
             </form>
 
             <template v-if="showOAuth || showPasskeyLogin">

From 886510a25213a663106f787700c64914ba2ff7a8 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 5 Oct 2026 09:55:07 +0100
Subject: [PATCH 2/3] Restore the tab order but position "forgot password" with
 CSS rather than use tab order

---
 resources/js/pages/auth/Login.vue | 32 +++++++++++++++++--------------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/resources/js/pages/auth/Login.vue b/resources/js/pages/auth/Login.vue
index 885f705af3d..ec7592a9af7 100644
--- a/resources/js/pages/auth/Login.vue
+++ b/resources/js/pages/auth/Login.vue
@@ -100,20 +100,24 @@ onUnmounted(() => passkey.cancel());
                     <Input v-model="email" name="email" autofocus :autocomplete="emailAutocomplete" />
                 </Field>
 
-                <Field :label="__('Password')" :error="errors?.password">
-                    <Input v-model="password" name="password" type="password" :autocomplete="passwordAutocomplete" />
-                    <template #actions>
-                        <Link
-                            :href="forgotPasswordUrl"
-                            class="text-ui-accent-text mb-1.5 text-sm hover:text-ui-accent-text/80"
-                            v-text="__('Forgot password?')"
-                        />
-                    </template>
-                </Field>
-
-                <Checkbox v-model="remember" name="remember" :label="__('Remember me')" />
-
-                <Button type="submit" variant="primary" :disabled="processing" :text="__('Continue')" />
+                <div class="relative flex flex-col gap-6">
+                    <Field :label="__('Password')" :error="errors?.password">
+                        <template #actions>
+                            <span class="invisible mb-1.5 text-sm" aria-hidden="true">{{ __('Forgot password?') }}</span>
+                        </template>
+                        <Input v-model="password" name="password" type="password" :autocomplete="passwordAutocomplete" />
+                    </Field>
+
+                    <Checkbox v-model="remember" name="remember" :label="__('Remember me')" />
+
+                    <Button type="submit" variant="primary" :disabled="processing" :text="__('Continue')" />
+
+                    <Link
+                        :href="forgotPasswordUrl"
+                        class="absolute top-0 end-0 z-(--z-index-above) text-ui-accent-text text-sm hover:text-ui-accent-text/80"
+                        v-text="__('Forgot password?')"
+                    />
+                </div>
             </form>
 
             <template v-if="showOAuth || showPasskeyLogin">

From 280b087aea4b5fad8ff558a92ce2aa34e7f931d5 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 5 Oct 2026 10:13:48 +0100
Subject: [PATCH 3/3] Use anchor positioning instead, and shift Forgot Password
 to last in the tab order, because it's more likely people will want to tab to
 Passkey or other login options

---
 resources/js/pages/auth/Login.vue | 40 +++++++++++++++++--------------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/resources/js/pages/auth/Login.vue b/resources/js/pages/auth/Login.vue
index ec7592a9af7..e1eb3b89762 100644
--- a/resources/js/pages/auth/Login.vue
+++ b/resources/js/pages/auth/Login.vue
@@ -100,24 +100,20 @@ onUnmounted(() => passkey.cancel());
                     <Input v-model="email" name="email" autofocus :autocomplete="emailAutocomplete" />
                 </Field>
 
-                <div class="relative flex flex-col gap-6">
-                    <Field :label="__('Password')" :error="errors?.password">
-                        <template #actions>
-                            <span class="invisible mb-1.5 text-sm" aria-hidden="true">{{ __('Forgot password?') }}</span>
-                        </template>
-                        <Input v-model="password" name="password" type="password" :autocomplete="passwordAutocomplete" />
-                    </Field>
-
-                    <Checkbox v-model="remember" name="remember" :label="__('Remember me')" />
-
-                    <Button type="submit" variant="primary" :disabled="processing" :text="__('Continue')" />
-
-                    <Link
-                        :href="forgotPasswordUrl"
-                        class="absolute top-0 end-0 z-(--z-index-above) text-ui-accent-text text-sm hover:text-ui-accent-text/80"
-                        v-text="__('Forgot password?')"
-                    />
-                </div>
+                <Field :label="__('Password')" :error="errors?.password">
+                    <template #actions>
+                        <span
+                            class="mb-1.5 text-sm text-transparent select-none pointer-events-none"
+                            style="anchor-name: --login-forgot-password"
+                            aria-hidden="true"
+                        >{{ __('Forgot password?') }}</span>
+                    </template>
+                    <Input v-model="password" name="password" type="password" :autocomplete="passwordAutocomplete" />
+                </Field>
+
+                <Checkbox v-model="remember" name="remember" :label="__('Remember me')" />
+
+                <Button type="submit" variant="primary" :disabled="processing" :text="__('Continue')" />
             </form>
 
             <template v-if="showOAuth || showPasskeyLogin">
@@ -151,6 +147,14 @@ onUnmounted(() => passkey.cancel());
                     </div>
                 </div>
             </template>
+
+            <Link
+                v-if="emailLoginEnabled"
+                :href="forgotPasswordUrl"
+                class="absolute z-(--z-index-above) text-ui-accent-text mb-1.5 text-sm hover:text-ui-accent-text/80"
+                style="position-anchor: --login-forgot-password; top: anchor(top); left: anchor(left); position-visibility: always"
+                v-text="__('Forgot password?')"
+            />
         </div>
     </AuthCard>
 </template>