From 197391f7112be2f22d2fcac6c7d4e3df9bcb203e Mon Sep 17 00:00:00 2001
From: MykolaGolubyev <golubev.nikolay@gmail.com>
Date: Mon, 4 Aug 2025 20:27:51 -0400
Subject: [PATCH] ux: auto focus page content

---
 .../1.78/add-2025-08-04-page-auto-focus.md            |  1 +
 znai-reactjs/src/layout/DocumentationLayout.css       |  4 ++++
 znai-reactjs/src/layout/DocumentationLayout.tsx       | 11 +++++++++--
 3 files changed, 14 insertions(+), 2 deletions(-)
 create mode 100644 znai-docs/znai/release-notes/1.78/add-2025-08-04-page-auto-focus.md

diff --git a/znai-docs/znai/release-notes/1.78/add-2025-08-04-page-auto-focus.md b/znai-docs/znai/release-notes/1.78/add-2025-08-04-page-auto-focus.md
new file mode 100644
index 000000000..e10a22a88
--- /dev/null
+++ b/znai-docs/znai/release-notes/1.78/add-2025-08-04-page-auto-focus.md
@@ -0,0 +1 @@
+* Add: Focus the main page content on-load, navigation, and search
\ No newline at end of file
diff --git a/znai-reactjs/src/layout/DocumentationLayout.css b/znai-reactjs/src/layout/DocumentationLayout.css
index 752d74da5..3cfb4fc2d 100644
--- a/znai-reactjs/src/layout/DocumentationLayout.css
+++ b/znai-reactjs/src/layout/DocumentationLayout.css
@@ -52,6 +52,10 @@
     -webkit-overflow-scrolling: touch;
 }
 
+.znai-main-panel:focus {
+    outline: none;
+}
+
 ::-webkit-scrollbar {
     width: var(--znai-scrollbar-width);
     height: var(--znai-scrollbar-height);
diff --git a/znai-reactjs/src/layout/DocumentationLayout.tsx b/znai-reactjs/src/layout/DocumentationLayout.tsx
index 8486e0b5a..3967682be 100644
--- a/znai-reactjs/src/layout/DocumentationLayout.tsx
+++ b/znai-reactjs/src/layout/DocumentationLayout.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useState } from "react";
+import React, { useState, useRef, useEffect } from "react";
 
 import TocPanel from "./TocPanel";
 import { PageGenError } from "../doc-elements/page-gen-error/PageGenError";
@@ -82,16 +82,23 @@ export function DocumentationLayout({
 }: Props) {
   const [isMobileTocVisible, setMobileTocVisible] = useState(false);
   const isMobile = useIsMobile();
+  const pageContentRef = useRef<HTMLDivElement>(null);
 
   const pageGenErrorPanel = pageGenError ? <PageGenError error={pageGenError} /> : null;
 
   const panelFullClassName = mainPanelClassName + (isMobile ? " mobile" : "");
 
+  useEffect(() => {
+    if (pageContentRef.current) {
+      pageContentRef.current.focus();
+    }
+  }, [selectedTocItem]);
+
   return isMobile ? renderMobile() : renderDesktop();
 
   function renderPageContent() {
     return (
-      <div className={panelFullClassName}>
+      <div ref={pageContentRef} className={panelFullClassName} tabIndex={1}>
         {renderedPage}
 
         <div className="page-bottom">