ux: auto focus page content (#1335)

Author: MykolaGolubyev

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

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);

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">