Merge pull request #97 from edx/van-379/add-skipnav-link

fix: add skipnav link in header

package-lock.json

@@ -1660,9 +1660,9 @@
       }
     },
     "@edx/frontend-platform": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-1.8.1.tgz",
-      "integrity": "sha512-oHLSamyIDuCtdS7eDzLcYs4zsAOGf4uuywnnIKg1CnlEHzUrXnfmcajbNM3Wre5jJocGH+1qACuaGLELO+3sAQ==",
+      "version": "1.8.4",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-1.8.4.tgz",
+      "integrity": "sha512-Xjl5VYFK+OrOY8TaMMGfDK45+dkxr0ai/6SsNDt3KCLTqIqsNLY19mPGsHHpZD8B3H5unQuWTn6VoRZ7q+Ovxg==",
       "dev": true,
       "requires": {
         "@cospired/i18n-iso-languages": "2.1.2",
@@ -2734,50 +2734,50 @@
       "dev": true
     },
     "@redux-saga/core": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@redux-saga/core/-/core-1.1.1.tgz",
-      "integrity": "sha512-WKXfj2cYkP0eh74dE1ueMjVDoGJIkppXiMFgx0buVRkXENeZmRxIjM4lh9LEWWFqay7I/Qkw7+cMossa7xXoAQ==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@redux-saga/core/-/core-1.1.3.tgz",
+      "integrity": "sha512-8tInBftak8TPzE6X13ABmEtRJGjtK17w7VUs7qV17S8hCO5S3+aUTWZ/DBsBJPdE8Z5jOPwYALyvofgq1Ws+kg==",
       "dev": true,
       "requires": {
-        "@babel/runtime": "^7.6.0",
-        "@redux-saga/deferred": "^1.1.0",
-        "@redux-saga/delay-p": "^1.1.0",
-        "@redux-saga/is": "^1.1.0",
-        "@redux-saga/symbols": "^1.1.0",
+        "@babel/runtime": "^7.6.3",
+        "@redux-saga/deferred": "^1.1.2",
+        "@redux-saga/delay-p": "^1.1.2",
+        "@redux-saga/is": "^1.1.2",
+        "@redux-saga/symbols": "^1.1.2",
         "@redux-saga/types": "^1.1.0",
         "redux": "^4.0.4",
         "typescript-tuple": "^2.2.1"
       }
     },
     "@redux-saga/deferred": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@redux-saga/deferred/-/deferred-1.1.0.tgz",
-      "integrity": "sha512-wOCJCby3hx14bvrEeFLJ1JJTjJdXDJyC+B3JQ6eiqgzNghylbf969lIYmS2Arf2QuALfUtRBNPXBIMDKG9km4g==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@redux-saga/deferred/-/deferred-1.1.2.tgz",
+      "integrity": "sha512-908rDLHFN2UUzt2jb4uOzj6afpjgJe3MjICaUNO3bvkV/kN/cNeI9PMr8BsFXB/MR8WTAZQq/PlTq8Kww3TBSQ==",
       "dev": true
     },
     "@redux-saga/delay-p": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@redux-saga/delay-p/-/delay-p-1.1.0.tgz",
-      "integrity": "sha512-BcRwXs20kKjgiYEwZARkpVoRIe/hHftW3iwPhdeW4/jPyR9gLv/vG8VsJMF5NDEch+/w/mJtdgSubq+wtOS47g==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@redux-saga/delay-p/-/delay-p-1.1.2.tgz",
+      "integrity": "sha512-ojc+1IoC6OP65Ts5+ZHbEYdrohmIw1j9P7HS9MOJezqMYtCDgpkoqB5enAAZrNtnbSL6gVCWPHaoaTY5KeO0/g==",
       "dev": true,
       "requires": {
-        "@redux-saga/symbols": "^1.1.0"
+        "@redux-saga/symbols": "^1.1.2"
       }
     },
     "@redux-saga/is": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@redux-saga/is/-/is-1.1.0.tgz",
-      "integrity": "sha512-0uFXWGSvDCfNBdROHwEVixNhFbI3S+UGBQfcPXQiYL+CjIjyR3DTg2Z+NFH9xzP+H4Oh/yGtTHDhC0GxYp7HQQ==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@redux-saga/is/-/is-1.1.2.tgz",
+      "integrity": "sha512-OLbunKVsCVNTKEf2cH4TYyNbbPgvmZ52iaxBD4I1fTif4+MTXMa4/Z07L83zW/hTCXwpSZvXogqMqLfex2Tg6w==",
       "dev": true,
       "requires": {
-        "@redux-saga/symbols": "^1.1.0",
+        "@redux-saga/symbols": "^1.1.2",
         "@redux-saga/types": "^1.1.0"
       }
     },
     "@redux-saga/symbols": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@redux-saga/symbols/-/symbols-1.1.0.tgz",
-      "integrity": "sha512-Fzw1wV3j4hbac3MYmgNE18Z53URmQZeilTHZLF7Lm4SQ1jG4fcU47v2kElsEbQXUSaFqj+uJqdRzmDGNb6pRwQ==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@redux-saga/symbols/-/symbols-1.1.2.tgz",
+      "integrity": "sha512-EfdGnF423glv3uMwLsGAtE6bg+R9MdqlHEzExnfagXPrIiuxwr3bdiAwz3gi+PsrQ3yBlaBpfGLtDG8rf3LgQQ==",
       "dev": true
     },
     "@redux-saga/types": {
@@ -4303,21 +4303,21 @@
       },
       "dependencies": {
         "follow-redirects": {
-          "version": "1.13.1",
-          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.1.tgz",
-          "integrity": "sha512-SSG5xmZh1mkPGyKzjZP8zLjltIfpW32Y5QpdNJyjcfGxK3qo3NDDkZOZSFiGn1A6SclQxY9GzEwAHQ3dmYRWpg==",
+          "version": "1.13.2",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.2.tgz",
+          "integrity": "sha512-6mPTgLxYm3r6Bkkg0vNM0HTjfGrOEtsfbhagQvbxDEsEkpNhw582upBaoRZylzen6krEmxXJgt9Ju6HiI4O7BA==",
           "dev": true
         }
       }
     },
     "axios-cache-adapter": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/axios-cache-adapter/-/axios-cache-adapter-2.5.0.tgz",
-      "integrity": "sha512-YcMPdMoqmSLoZx7A5YD/PdYGuX6/Y9M2tHBhaIXvXrPeGgNnbW7nb3+uArWlT53WGHLfclnu2voMmS7jGXVg6A==",
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/axios-cache-adapter/-/axios-cache-adapter-2.7.0.tgz",
+      "integrity": "sha512-itggIo9i8tnsBFnniNh8+7RxXfdCKZT+cEvyjzBdU8IIyudpj4WyrY7288KE8MICs6+u7YFRVlLZi3vvXufz8w==",
       "dev": true,
       "requires": {
         "cache-control-esm": "1.0.0",
-        "lodash": "^4.17.11"
+        "md5": "^2.2.1"
       }
     },
     "axobject-query": {
@@ -5693,6 +5693,12 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "charenc": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
+      "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc=",
+      "dev": true
+    },
     "check-types": {
       "version": "8.0.3",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz",
@@ -6479,6 +6485,12 @@
         }
       }
     },
+    "crypt": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
+      "integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs=",
+      "dev": true
+    },
     "crypto-browserify": {
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
@@ -11694,6 +11706,12 @@
       "integrity": "sha1-mPiygDBoQhmpXzdc+9iM40Bd/5M=",
       "dev": true
     },
+    "is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+      "dev": true
+    },
     "is-callable": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.4.tgz",
@@ -14744,6 +14762,17 @@
         "css-mediaquery": "^0.1.2"
       }
     },
+    "md5": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
+      "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
+      "dev": true,
+      "requires": {
+        "charenc": "0.0.2",
+        "crypt": "0.0.2",
+        "is-buffer": "~1.1.6"
+      }
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -18147,9 +18176,9 @@
       }
     },
     "redux": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.4.tgz",
-      "integrity": "sha512-vKv4WdiJxOWKxK0yRoaK3Y4pxxB0ilzVx6dszU2W8wLxlb2yikRph4iV/ymtdJ6ZxpBLFbyrxklnT5yBbQSl3Q==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz",
+      "integrity": "sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==",
       "dev": true,
       "requires": {
         "loose-envify": "^1.4.0",
@@ -18157,12 +18186,12 @@
       }
     },
     "redux-saga": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/redux-saga/-/redux-saga-1.1.1.tgz",
-      "integrity": "sha512-guSnGJ/uEF8yL8Mn4aNa7HxRGCpVUALCkec9iTTD0fOhQqkF6bRQkBLeS+7/cAH3nFnr299bi/DOurTi1apcCA==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/redux-saga/-/redux-saga-1.1.3.tgz",
+      "integrity": "sha512-RkSn/z0mwaSa5/xH/hQLo8gNf4tlvT18qXDNvedihLcfzh+jMchDgaariQoehCpgRltEm4zHKJyINEz6aqswTw==",
       "dev": true,
       "requires": {
-        "@redux-saga/core": "^1.1.1"
+        "@redux-saga/core": "^1.1.3"
       }
     },
     "reflect.ownkeys": {

package.json

@@ -40,7 +40,7 @@
     "@commitlint/prompt-cli": "8.2.0",
     "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
     "@edx/frontend-build": "5.4.0",
-    "@edx/frontend-platform": "1.8.1",
+    "@edx/frontend-platform": "1.8.4",
     "@edx/paragon": "12.0.5",
     "codecov": "3.7.2",
     "enzyme": "3.10.0",
@@ -53,8 +53,8 @@
     "react-router-dom": "5.1.2",
     "react-test-renderer": "16.9.0",
     "reactifex": "1.1.1",
-    "redux": "4.0.4",
-    "redux-saga": "1.1.1"
+    "redux": "4.0.5",
+    "redux-saga": "1.1.3"
   },
   "dependencies": {
     "babel-polyfill": "6.26.0",

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} />}

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;

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">
 

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"
   >