Add 'skip to main content' feature

Author: Gnito

src/components/LayoutComposer/LayoutSideNavigation/LayoutSideNavigation.js

@@ -73,7 +73,9 @@ const LayoutSideNavigation = props => {
                 ) : null}
                 {sideNavContent}
               </aside>
-              <main className={classNames(css.main, mainColumnClassName)}>{children}</main>
+              <main id="main-content" className={classNames(css.main, mainColumnClassName)}>
+                {children}
+              </main>
             </Main>
             <Footer>{footerContent}</Footer>
           </>

src/components/LayoutComposer/LayoutSideNavigation/LayoutSideNavigation.module.css

@@ -40,6 +40,7 @@
   flex-direction: column;
 
   padding: 24px;
+  scroll-margin-top: var(--topbarHeight);
 
   @media (--viewportLarge) {
     /**
@@ -51,6 +52,8 @@
     border-left-width: 1px;
     border-left-style: solid;
     border-left-color: var(--colorGrey100);
+
+    scroll-margin-top: var(--topbarHeightDesktop);
   }
 
   @media (--viewportLargeWithPaddings) {

src/components/LayoutComposer/LayoutSingleColumn/LayoutSingleColumn.js

@@ -45,7 +45,7 @@ const LayoutSingleColumn = props => {
             <Topbar as="header" className={css.topbar}>
               {topbarContent}
             </Topbar>
-            <Main as="main" className={classNames(css.main, mainColumnClassName)}>
+            <Main as="main" id="main-content" className={classNames(css.main, mainColumnClassName)}>
               {children}
             </Main>
             <Footer>{footerContent}</Footer>

src/components/LayoutComposer/LayoutSingleColumn/LayoutSingleColumn.module.css

@@ -1,3 +1,4 @@
+@import '../../../styles/customMediaQueries.css';
 .root {
   grid-template-rows: auto 1fr auto;
   min-height: 100vh;
@@ -11,4 +12,9 @@
 
 .main {
   display: grid;
+  scroll-margin-top: var(--topbarHeight);
+
+  @media (--viewportMedium) {
+    scroll-margin-top: var(--topbarHeightDesktop);
+  }
 }

src/containers/PageBuilder/PageBuilder.js

@@ -136,7 +136,7 @@ const PageBuilder = props => {
               <Topbar as="header" className={css.topbar}>
                 <TopbarContainer currentPage={currentPage} />
               </Topbar>
-              <Main as="main" className={css.main}>
+              <Main as="main" id="main-content" className={css.main}>
                 {sections.length === 0 && inProgress ? (
                   <LoadingSpinner />
                 ) : (

src/containers/PageBuilder/PageBuilder.module.css

@@ -11,6 +11,10 @@
 
 .main {
   display: grid;
+  scroll-margin-top: var(--topbarHeight);
+  @media (--viewportMedium) {
+    scroll-margin-top: var(--topbarHeightDesktop);
+  }
 }
 
 .loading {

src/containers/SearchPage/SearchPage.module.css

@@ -32,6 +32,7 @@
     position: relative;
     padding-top: var(--topbarHeightDesktop);
     min-height: calc(100vh - var(--topbarHeightDesktop));
+    scroll-margin-top: var(--topbarHeightDesktop);
   }
 }
 
@@ -151,6 +152,8 @@
     border-left-width: 1px;
     border-left-style: solid;
     border-left-color: var(--colorGrey100);
+
+    scroll-margin-top: var(--topbarHeightDesktop);
   }
 
   @media (--viewportLarge) {

src/containers/SearchPage/SearchPageWithGrid.js

@@ -420,7 +420,7 @@ export class SearchPageComponent extends Component {
             </div>
           </aside>
 
-          <div className={css.layoutWrapperMain} role="main">
+          <div id="main-content" className={css.layoutWrapperMain} role="main">
             <div className={css.searchResultContainer}>
               <SearchFiltersMobile
                 className={css.searchFiltersMobileList}

src/containers/SearchPage/SearchPageWithMap.js

@@ -533,7 +533,7 @@ export class SearchPageComponent extends Component {
         schema={schema}
       >
         <TopbarContainer rootClassName={topbarClasses} currentSearchParams={validQueryParams} />
-        <div className={css.container} role="main">
+        <div id="main-content" className={css.container} role="main">
           <div className={css.searchResultContainer}>
             <SearchFiltersMobile
               className={css.searchFiltersMobileMap}

src/containers/TopbarContainer/Topbar/Topbar.js

@@ -12,6 +12,7 @@ import { parse, stringify } from '../../../util/urlHelpers';
 import { createResourceLocatorString, matchPathname, pathByRouteName } from '../../../util/routes';
 import {
   Button,
+  IconArrowHead,
   LimitedAccessBanner,
   LinkedLogo,
   Modal,
@@ -311,8 +312,31 @@ const TopbarComponent = props => {
     <div className={css.searchMenu} />
   );
 
+  const handleSkipToMainContent = e => {
+    e.preventDefault();
+    const mainContent = document.getElementById('main-content');
+    if (mainContent) {
+      mainContent.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      // Focus the main content for screen readers
+      mainContent.setAttribute('tabindex', '-1');
+      mainContent.focus();
+      // Remove tabindex after blur to avoid tabbing into it later
+      mainContent.addEventListener(
+        'blur',
+        () => {
+          mainContent.removeAttribute('tabindex');
+        },
+        { once: true }
+      );
+    }
+  };
+
   return (
     <div className={classes}>
+      <Button onClick={handleSkipToMainContent} className={css.skipToMainContent}>
+        <FormattedMessage id="Topbar.skipToMainContent" />
+        <IconArrowHead direction="right" size="small" rootClassName={css.skiptoMainArrow} />
+      </Button>
       <LimitedAccessBanner
         isAuthenticated={isAuthenticated}
         isLoggedInAs={isLoggedInAs}