VADC-1438: add skip navigation link to data portal

uc-cdis · Oct 8, 2024 · 8e1ce49 · 8e1ce49
1 parent 7d2411a
commit 8e1ce49
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 5 deletions.
diff --git a/src/components/layout/TopBar.jsx b/src/components/layout/TopBar.jsx
@@ -38,6 +38,12 @@ class TopBar extends Component {
       <div className='top-bar'>
         <header className='top-bar__header'>
           <nav className='top-bar__nav'>
+            <a
+              href='#main-content'
+              className='top-bar__link g3-ring-on-focus top-bar__link_skip'
+            >
+              Skip Navigation
+            </a>
             {
               this.props.topItems.filter(
                 (item) => {

diff --git a/src/components/layout/TopBar.less b/src/components/layout/TopBar.less
@@ -16,6 +16,7 @@
   justify-content: flex-end;
   color: white;
   overflow: hidden;
+  position: relative;
 }
 
 @media screen and (max-width: 1090px) {
@@ -42,6 +43,23 @@
   margin-bottom: 10px;
 }
 
+.top-bar__link_skip {
+  border: 0;
+  background-color: var(--g3-color__base-blue);
+  color: var(--g3-color__white);
+  margin: 10px auto 5px 30px;
+  width: auto;
+  height: 1.7em;
+  display: block;
+  border-bottom: 1px solid var(--g3-color__white);
+  position: absolute;
+  left: -9999px;
+}
+
+.top-bar__link_skip:focus {
+  left: 0;
+}
+
 .top-bar__link:hover .top-icon-button,
 .top-bar__link:focus .top-icon-button {
   border-bottom: 1px solid var(--g3-color__white);

diff --git a/src/covid19Index.jsx b/src/covid19Index.jsx
@@ -168,7 +168,7 @@ async function init() {
                 : null}
               <ReduxTopBar />
               <ReduxNavBar />
-              <div className='main-content'>
+              <div className='main-content' id='main-content'>
                 <ReduxWorkspaceShutdownBanner />
                 <ReduxWorkspaceShutdownPopup />
                 <Switch>

diff --git a/src/ecosystemIndex.jsx b/src/ecosystemIndex.jsx
@@ -171,7 +171,7 @@ async function init() {
                 : null}
               <ReduxTopBar />
               <ReduxNavBar />
-              <div className='main-content'>
+              <div className='main-content' id='main-content'>
                 <ReduxWorkspaceShutdownBanner />
                 <ReduxWorkspaceShutdownPopup />
                 <Switch>

diff --git a/src/index.jsx b/src/index.jsx
@@ -180,7 +180,7 @@ async function init() {
                 : null}
               <ReduxTopBar />
               <ReduxNavBar />
-              <div className='main-content'>
+              <div className='main-content' id='main-content'>
                 <ReduxWorkspaceShutdownBanner />
                 <ReduxWorkspaceShutdownPopup />
                 <Switch>

diff --git a/src/nctIndex.jsx b/src/nctIndex.jsx
@@ -194,7 +194,7 @@ async function init() {
                 : null}
               <ReduxTopBar />
               <ReduxNavBar />
-              <div className='main-content'>
+              <div className='main-content' id='main-content'>
                 <ReduxWorkspaceShutdownBanner />
                 <ReduxWorkspaceShutdownPopup />
                 <Switch>

diff --git a/src/workspaceIndex.jsx b/src/workspaceIndex.jsx
@@ -143,7 +143,7 @@ async function init() {
                 : null}
               <ReduxTopBar />
               <ReduxNavBar />
-              <div className='main-content'>
+              <div className='main-content' id='main-content'>
                 <ReduxWorkspaceShutdownBanner />
                 <ReduxWorkspaceShutdownPopup />
                 <Switch>