From e0339715cca4e73dd9c2088e0c93a13453650a5b Mon Sep 17 00:00:00 2001
From: Varun-Kolanu <kolanuvarun739@gmail.com>
Date: Wed, 14 Feb 2024 14:42:49 +0530
Subject: [PATCH] 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 |  2 +-
 templates/zerver/portico-header.html     |  3 ++
 web/src/portico/help.js                  | 20 +++++++++++++-
 web/styles/portico/portico.css           | 35 ++++++++++++++++++++++++
 4 files changed, 58 insertions(+), 2 deletions(-)

diff --git a/templates/zerver/documentation_main.html b/templates/zerver/documentation_main.html
index 3df74dd332..17bdcb6c9e 100644
--- a/templates/zerver/documentation_main.html
+++ b/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 %}
diff --git a/templates/zerver/portico-header.html b/templates/zerver/portico-header.html
index f0410c5b56..122765ff8d 100644
--- a/templates/zerver/portico-header.html
+++ b/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>
diff --git a/web/src/portico/help.js b/web/src/portico/help.js
index ec536c0468..58fc1cb42f 100644
--- a/web/src/portico/help.js
+++ b/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");
+        }
+    });
+}
diff --git a/web/styles/portico/portico.css b/web/styles/portico/portico.css
index 3e36a79519..7a03ab4f27 100644
--- a/web/styles/portico/portico.css
+++ b/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 {