[6.x] Improve focus on page load (#13357)

* When pages load through Inertia focus on the main content if the focus is not explicitly set

* Fix keyboard focus on search-type pages like entry indexes

* Try to fix

* Fix focusing on the main element

* Simplify focus management

* Simplify focus management

* Fix a few places where autofocus wasn't catching properly on an Inertia request such as "create" pages

* Trim whitespace

* Remove some focus outlines for elements that aren't focusable anyway

---------

Co-authored-by: Jack McDade <jack@jackmcdade.com>

Author: jaygeorge

resources/js/components/ui/Listing/Search.vue

@@ -17,7 +17,7 @@ defineExpose({ focus });
     <div class="flex-1 max-w-sm" :class="{ 'max-w-60!': activeFilterBadgeCount > 2 }">
         <label for="listings-search" class="sr-only">{{ __('Search entries') }}</label>
         <Input
-            autofocus
+            :focus="true"
             ref="input"
             icon="magnifying-glass"
             id="listings-search"

resources/js/pages/layout/Layout.vue

@@ -5,8 +5,8 @@ import { ConfigProvider } from 'reka-ui';
 import SessionExpiry from '@/components/SessionExpiry.vue';
 import LicensingAlert from '@/components/LicensingAlert.vue';
 import PortalTargets from '@/components/portals/PortalTargets.vue';
-import Tooltips from '@/components/Tooltips.vue';
-import { provide, watch, ref } from 'vue';
+import { provide, watch, ref, onMounted, onUnmounted, nextTick } from 'vue';
+import { router } from '@inertiajs/vue3';
 import useBodyClasses from './body-classes.js';
 import useStatamicPageProps from '@/composables/page-props.js';
 import useMaxWidthToggle from '@/composables/use-max-width-toggle.js';
@@ -27,6 +27,49 @@ provide('layout', {
     isMaxWidthEnabled,
     toggleMaxWidth: toggle,
 });
+
+// Focus management: focus main element if no input has auto-focus
+let navigationListener = null;
+
+function focusMain() {
+    // Wait for components to mount and autofocus to process
+    nextTick(() => {
+        requestAnimationFrame(() => {
+            setTimeout(() => {
+                // If an input is already focused, we're done
+                if (document.activeElement?.matches('input, textarea, select, [contenteditable]')) {
+                    return;
+                }
+
+                // Find any input with autofocus attribute (including nested in UI components)
+                const autofocusInput = document.querySelector('input[autofocus], textarea[autofocus], select[autofocus]') ||
+                                      document.querySelector('[data-ui-input] input[autofocus]');
+
+                // If autofocus input exists but isn't focused, focus it manually
+                if (autofocusInput && document.activeElement !== autofocusInput) {
+                    autofocusInput.focus();
+                    return;
+                }
+
+                // Otherwise, focus the content card
+                if (!autofocusInput) {
+                    document.querySelector('#content-card')?.focus();
+                }
+            }, 100);
+        });
+    });
+}
+
+onMounted(() => {
+    navigationListener = router.on('success', focusMain);
+    focusMain();
+});
+
+onUnmounted(() => {
+    if (navigationListener) {
+        navigationListener();
+    }
+});
 </script>
 
 <template>
@@ -38,8 +81,8 @@ provide('layout', {
         <main id="main" class="flex bg-body-bg dark:border-t dark:border-body-border rounded-t-2xl fixed top-14 inset-x-0 bottom-0 min-h-[calc(100vh-3.5rem)]">
             <Nav />
             <!-- The data attribute allows CSS to target elements when max-width is disabled. -->
-            <div id="main-content" class="main-content sm:p-2 h-full flex-1 overflow-y-auto rounded-t-2xl" :data-max-width-enabled="isMaxWidthEnabled">
-                <div id="content-card" class="relative content-card grid min-h-full mx-auto">
+            <div id="main-content" class="main-content sm:p-2 h-full flex-1 overflow-y-auto focus:outline-none rounded-t-2xl" :data-max-width-enabled="isMaxWidthEnabled">
+                <div id="content-card" tabindex="-1" class="focus:outline-none relative content-card grid min-h-full mx-auto">
                     <!-- Data attribute used by the CSS style tag below to override max-width when disabled.-->
                     <div class="w-full mx-auto max-w-page" data-max-width-wrapper>
                         <slot />
@@ -74,9 +117,9 @@ provide('layout', {
 </template>
 
 <style>
-/* 
+/*
     Max-width override CSS:
-    When max-width is disabled (data-max-width-enabled="false"), 
+    When max-width is disabled (data-max-width-enabled="false"),
     this rule removes the max-width constraint from elements tagged with data-max-width-wrapper.
 
     This allows the content to expand to full width when the toggle is disabled,