skip_navigation: Add skip navigation link to /help and /api sites.

Skip navigation links added in /help and /api sites for accessibility
Fixes #28564.

templates/zerver/documentation_main.html

@@ -27,7 +27,7 @@
     </svg>
 
     <div class="markdown">
-        <div class="content">
+        <div class="content" id="main-content">
             {% if page_is_policy_center %}
             {{ render_markdown_path(article) }}
             {% elif page_is_help_center %}

templates/zerver/portico-header.html

@@ -1,5 +1,8 @@
 <div class="header portico-header">
     <div class="header-main" id="top_navbar">
+        {% if page_is_help_center or page_is_api_center %}
+        <a id="skip-navigation" href="#main-content">{{ _('Skip to main content') }}</a>
+        {% endif %}
         <div class="float-left">
             {% if custom_logo_url %}
             <a class="brand logo" href="{{ root_domain_url }}/"><img draggable="false" src="{{ custom_logo_url }}" class="portico-logo" alt="{{ _('Zulip') }}" content="Zulip" /></a>

web/src/portico/help.js

@@ -121,4 +121,22 @@ $(".markdown").on("click", () => {
 
 render_tabbed_sections();
 
-$(".highlighted")[0]?.scrollIntoView({block: "center"});
+if ($(window).width() > 800) {
+    $(".highlighted")[0]?.scrollIntoView({block: "center"});
+    $(".highlighted").eq(0).trigger("focus");
+    $(".highlighted")
+        .eq(0)
+        .on("keydown", (e) => {
+            if (e.key === "Tab" && !e.shiftKey && !$("#skip-navigation").hasClass("tabbed")) {
+                e.preventDefault();
+                $("#skip-navigation").trigger("focus");
+            }
+        });
+    $("#skip-navigation").on("keydown", function (e) {
+        if (e.key === "Tab" && !e.shiftKey) {
+            e.preventDefault();
+            $(".highlighted").eq(0).trigger("focus");
+            $(this).addClass("tabbed");
+        }
+    });
+}

web/styles/portico/portico.css

@@ -1050,6 +1050,25 @@ input.new-organization-button {
     margin-bottom: 25px !important;
 }
 
+#skip-navigation {
+    background-color: hsl(170deg 47% 33%);
+    color: hsl(0deg 0% 100%);
+    border-radius: 4px;
+    display: inline-block;
+    font-weight: 600;
+    left: 330px;
+    outline: none;
+    padding: 5px 12px;
+    position: absolute;
+    top: -1000px;
+    z-index: 100;
+}
+
+#skip-navigation:focus-visible {
+    text-underline-offset: 2px;
+    top: 25px;
+}
+
 @media (width <= 800px) {
     .app.help {
         .markdown {
@@ -1123,6 +1142,14 @@ input.new-organization-button {
             background-color: transparent;
         }
     }
+
+    #skip-navigation {
+        left: 80px;
+    }
+
+    #skip-navigation:focus-visible {
+        top: 30px;
+    }
 }
 
 @media (width <= 767px) {
@@ -1214,6 +1241,14 @@ input.new-organization-button {
         max-width: 100vw;
         padding: 0 10px;
     }
+
+    #skip-navigation {
+        left: 60px;
+    }
+
+    #skip-navigation:focus-visible {
+        top: 10px;
+    }
 }
 
 .emoji {