Fixes #7001: Focus the main content container when the page loads

netbox/project-static/src/netbox.ts

@@ -13,7 +13,7 @@ import { initSideNav } from './sidenav';
 import { initRackElevation } from './racks';
 import { initLinks } from './links';
 
-function initAll() {
+function initDocument() {
   for (const init of [
     initBootstrap,
     initColorMode,
@@ -34,8 +34,18 @@ function initAll() {
   }
 }
 
+function initWindow() {
+  const contentContainer = document.querySelector<HTMLElement>('.content-container');
+  if (contentContainer !== null) {
+    // Focus the content container for accessible navigation.
+    contentContainer.focus();
+  }
+}
+
+window.addEventListener('load', initWindow);
+
 if (document.readyState !== 'loading') {
-  initAll();
+  initDocument();
 } else {
-  document.addEventListener('DOMContentLoaded', initAll);
+  document.addEventListener('DOMContentLoaded', initDocument);
 }

netbox/project-static/styles/netbox.scss

@@ -529,14 +529,20 @@ div.content-container {
   overflow-x: hidden;
   overflow-y: auto;
 
-  @include media-breakpoint-down(lg) {
-    width: 100%;
+  // Don't show an outline when the content container is focused.
+  &:focus,
+  &:focus-visible {
+    outline: 0;
   }
 
   div.content {
     flex: 1;
   }
 
+  @include media-breakpoint-down(lg) {
+    width: 100%;
+  }
+
   // Make the content full-width when printing.
   @media print {
     width: 100% !important;

netbox/templates/base/layout.html

@@ -13,7 +13,7 @@
     {% include 'base/sidenav.html' %}
 
       {# Body #}
-      <div class="content-container">
+      <div class="content-container" tabindex="-2">
 
         {# Netbox Logo, only visible when printing #}
         <div class="p-2 printonly">