From e84843d83a3c87f2c7853991d21dbb91432437a9 Mon Sep 17 00:00:00 2001
From: uzairr <uzairr@yahoo.com>
Date: Thu, 18 Mar 2021 03:48:25 +0500
Subject: [PATCH] add skipnav link in header

---
 src/DesktopHeader.jsx                  |  1 +
 src/Header.messages.jsx                |  5 +++++
 src/MobileHeader.jsx                   |  1 +
 src/__snapshots__/Header.test.jsx.snap | 24 ++++++++++++++++++++++++
 4 files changed, 31 insertions(+)

diff --git a/src/DesktopHeader.jsx b/src/DesktopHeader.jsx
index e583831..8da9977 100644
--- a/src/DesktopHeader.jsx
+++ b/src/DesktopHeader.jsx
@@ -108,6 +108,7 @@ class DesktopHeader extends React.Component {
 
     return (
       <header className="site-header-desktop">
+        <a className="nav-skip sr-only sr-only-focusable" href="#main">{intl.formatMessage(messages['header.label.skip.nav'])}</a>
         <div className={`container-fluid ${logoClasses}`}>
           <div className="nav-container position-relative d-flex align-items-center">
             {logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} />}
diff --git a/src/Header.messages.jsx b/src/Header.messages.jsx
index 8f5dc20..8f28c10 100644
--- a/src/Header.messages.jsx
+++ b/src/Header.messages.jsx
@@ -91,6 +91,11 @@ const messages = defineMessages({
     defaultMessage: 'Secondary',
     description: 'The aria label for the seconary nav',
   },
+  'header.label.skip.nav': {
+    id: 'header.label.skip.nav',
+    defaultMessage: 'Skip to main content',
+    description: 'A link used by screen readers to allow users to skip to the main content of the page.',
+  },
 });
 
 export default messages;
diff --git a/src/MobileHeader.jsx b/src/MobileHeader.jsx
index e8f7f6b..506deb3 100644
--- a/src/MobileHeader.jsx
+++ b/src/MobileHeader.jsx
@@ -104,6 +104,7 @@ class MobileHeader extends React.Component {
         aria-label={intl.formatMessage(messages['header.label.main.header'])}
         className={`site-header-mobile d-flex justify-content-between align-items-center shadow ${stickyClassName}`}
       >
+        <a className="nav-skip sr-only sr-only-focusable" href="#main">{intl.formatMessage(messages['header.label.skip.nav'])}</a>
         {mainMenu.length > 0 ? (
           <div className="w-100 d-flex justify-content-start">
 
diff --git a/src/__snapshots__/Header.test.jsx.snap b/src/__snapshots__/Header.test.jsx.snap
index 9c47d0b..f83161b 100644
--- a/src/__snapshots__/Header.test.jsx.snap
+++ b/src/__snapshots__/Header.test.jsx.snap
@@ -4,6 +4,12 @@ exports[`<Header /> renders correctly for anonymous desktop 1`] = `
 <header
   className="site-header-desktop"
 >
+  <a
+    className="nav-skip sr-only sr-only-focusable"
+    href="#main"
+  >
+    Skip to main content
+  </a>
   <div
     className="container-fluid null"
   >
@@ -58,6 +64,12 @@ exports[`<Header /> renders correctly for anonymous mobile 1`] = `
   aria-label="Main"
   className="site-header-mobile d-flex justify-content-between align-items-center shadow sticky-top"
 >
+  <a
+    className="nav-skip sr-only sr-only-focusable"
+    href="#main"
+  >
+    Skip to main content
+  </a>
   <div
     className="w-100 d-flex justify-content-start"
   >
@@ -188,6 +200,12 @@ exports[`<Header /> renders correctly for authenticated desktop 1`] = `
 <header
   className="site-header-desktop"
 >
+  <a
+    className="nav-skip sr-only sr-only-focusable"
+    href="#main"
+  >
+    Skip to main content
+  </a>
   <div
     className="container-fluid null"
   >
@@ -292,6 +310,12 @@ exports[`<Header /> renders correctly for authenticated mobile 1`] = `
   aria-label="Main"
   className="site-header-mobile d-flex justify-content-between align-items-center shadow sticky-top"
 >
+  <a
+    className="nav-skip sr-only sr-only-focusable"
+    href="#main"
+  >
+    Skip to main content
+  </a>
   <div
     className="w-100 d-flex justify-content-start"
   >