From 8f06528bb2e37bd5d9bb89818268e1097a8319b6 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Tue, 31 Aug 2021 13:43:30 -0400
Subject: [PATCH] A11Y: Add "skip to main content" link (#14190)

---
 .../discourse/app/templates/application.hbs       |  3 ++-
 app/assets/stylesheets/common/base/discourse.scss | 15 +++++++++++++++
 config/locales/client.en.yml                      |  1 +
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/discourse/app/templates/application.hbs b/app/assets/javascripts/discourse/app/templates/application.hbs
index 9296b8b8b9c..d93102a9173 100644
--- a/app/assets/javascripts/discourse/app/templates/application.hbs
+++ b/app/assets/javascripts/discourse/app/templates/application.hbs
@@ -1,4 +1,5 @@
 {{#discourse-root}}
+  <a href="#main-container" id="skip-link">{{i18n "skip_to_main_content"}}</a>
   {{d-document}}
   {{plugin-outlet name="above-site-header" tagName=""}}
   {{site-header canSignUp=canSignUp
@@ -14,7 +15,7 @@
 
   <div id="main-outlet" class="wrap" role="main">
     {{plugin-outlet name="above-main-container" tagName=""}}
-    <div class="container">
+    <div class="container" id="main-container">
       {{#if showTop}}
         {{custom-html name="top"}}
       {{/if}}
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index 1709bcc56aa..f65fe7b15a8 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -880,3 +880,18 @@ table {
     }
   }
 }
+
+a#skip-link {
+  padding: 0.25em 0.5em;
+  position: absolute;
+  top: -40px;
+  left: 1em;
+  color: var(--secondary);
+  background: var(--tertiary);
+  transition: top 0.3s ease-out;
+  z-index: z("header") + 1;
+  &:focus {
+    top: 0px;
+    transition: top 0.15s ease-in;
+  }
+}
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index fd0ff5eb290..06ce6dc9f17 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -175,6 +175,7 @@ en:
       forwarded: "forwarded the above email"
 
     topic_admin_menu: "topic actions"
+    skip_to_main_content: "Skip to main content"
 
     wizard_required: "Welcome to your new Discourse! Let’s get started with <a href='%{url}' data-auto-route='true'>the setup wizard</a> ✨"
     emails_are_disabled: "All outgoing email has been globally disabled by an administrator. No email notifications of any kind will be sent."