@docusaurus/theme-classic 2.0.0-beta.1ec2c95e3 → 2.0.0-beta.2

package/lib/theme/DocPage/styles.module.css

@@ -78,3 +78,9 @@
     ) !important;
   }
 }
+
+@media (max-width: 996px) {
+  .docSidebarContainer {
+    display: none;
+  }
+}

package/lib/theme/DocSidebar/index.js

@@ -137,14 +137,11 @@ function DocSidebarItemCategory({
   return <li className={(0, _clsx.default)('menu__list-item', {
     'menu__list-item--collapsed': collapsed
   })}>
-      {
-      /* eslint-disable-next-line jsx-a11y/anchor-is-valid */
-    }
       <a className={(0, _clsx.default)('menu__link', {
       'menu__link--sublist': collapsible,
       'menu__link--active': collapsible && isActive,
       [_stylesModule.default.menuLinkText]: !collapsible
-    })} onClick={collapsible ? handleItemClick : undefined} href={collapsible ? '#' : undefined} {...props}>
+    })} onClick={collapsible ? handleItemClick : undefined} href={collapsible ? '#!' : undefined} {...props}>
         {label}
       </a>
       <ul className="menu__list" ref={menuListRef} style={{

package/lib/theme/DocVersionSuggestions/index.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useDocusaurusContext = _interopRequireDefault(require("@docusaurus/useDocusaurusContext"));
+
+var _Link = _interopRequireDefault(require("@docusaurus/Link"));
+
+var _Translate = _interopRequireDefault(require("@docusaurus/Translate"));
+
+var _useDocs = require("@theme/hooks/useDocs");
+
+var _themeCommon = require("@docusaurus/theme-common");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+function UnreleasedVersionLabel({
+  siteTitle,
+  versionLabel
+}) {
+  return <_Translate.default id="theme.docs.versions.unreleasedVersionLabel" description="The label used to tell the user that he's browsing an unreleased doc version" values={{
+    siteTitle,
+    versionLabel: <b>{versionLabel}</b>
+  }}>
+      {'This is unreleased documentation for {siteTitle} {versionLabel} version.'}
+    </_Translate.default>;
+}
+
+function UnmaintainedVersionLabel({
+  siteTitle,
+  versionLabel
+}) {
+  return <_Translate.default id="theme.docs.versions.unmaintainedVersionLabel" description="The label used to tell the user that he's browsing an unmaintained doc version" values={{
+    siteTitle,
+    versionLabel: <b>{versionLabel}</b>
+  }}>
+      {'This is documentation for {siteTitle} {versionLabel}, which is no longer actively maintained.'}
+    </_Translate.default>;
+}
+
+function LatestVersionSuggestionLabel({
+  versionLabel,
+  to,
+  onClick
+}) {
+  return <_Translate.default id="theme.docs.versions.latestVersionSuggestionLabel" description="The label userd to tell the user that he's browsing an unmaintained doc version" values={{
+    versionLabel,
+    latestVersionLink: <b>
+            <_Link.default to={to} onClick={onClick}>
+              <_Translate.default id="theme.docs.versions.latestVersionLinkLabel" description="The label used for the latest version suggestion link label">
+                latest version
+              </_Translate.default>
+            </_Link.default>
+          </b>
+  }}>
+      {'For up-to-date documentation, see the {latestVersionLink} ({versionLabel}).'}
+    </_Translate.default>;
+}
+
+const getVersionMainDoc = version => version.docs.find(doc => doc.id === version.mainDocId);
+
+function DocVersionSuggestions() {
+  const {
+    siteConfig: {
+      title: siteTitle
+    }
+  } = (0, _useDocusaurusContext.default)();
+  const {
+    pluginId
+  } = (0, _useDocs.useActivePlugin)({
+    failfast: true
+  });
+  const {
+    savePreferredVersionName
+  } = (0, _themeCommon.useDocsPreferredVersion)(pluginId);
+  const activeVersion = (0, _useDocs.useActiveVersion)(pluginId);
+  const {
+    latestDocSuggestion,
+    latestVersionSuggestion
+  } = (0, _useDocs.useDocVersionSuggestions)(pluginId); // No suggestion to be made
+
+  if (!latestVersionSuggestion) {
+    return <></>;
+  } // try to link to same doc in latest version (not always possible)
+  // fallback to main doc of latest version
+
+
+  const latestVersionSuggestedDoc = latestDocSuggestion !== null && latestDocSuggestion !== void 0 ? latestDocSuggestion : getVersionMainDoc(latestVersionSuggestion);
+  return <div className="alert alert--warning margin-bottom--md" role="alert">
+      <div>
+        {activeVersion.name === 'current' ? <UnreleasedVersionLabel siteTitle={siteTitle} versionLabel={activeVersion.label} /> : <UnmaintainedVersionLabel siteTitle={siteTitle} versionLabel={activeVersion.label} />}
+      </div>
+      <div className="margin-top--md">
+        <LatestVersionSuggestionLabel versionLabel={latestVersionSuggestion.label} to={latestVersionSuggestedDoc.path} onClick={() => savePreferredVersionName(latestVersionSuggestion.name)} />
+      </div>
+    </div>;
+}
+
+var _default = DocVersionSuggestions;
+exports.default = _default;

package/lib/theme/Footer/index.js

@@ -15,14 +15,10 @@ var _themeCommon = require("@docusaurus/theme-common");
 
 var _useBaseUrl = _interopRequireDefault(require("@docusaurus/useBaseUrl"));
 
-var _isInternalUrl = _interopRequireDefault(require("@docusaurus/isInternalUrl"));
-
 var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 
 var _ThemedImage = _interopRequireDefault(require("@theme/ThemedImage"));
 
-var _IconExternalLink = _interopRequireDefault(require("@theme/IconExternalLink"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
@@ -47,10 +43,7 @@ function FooterLink({
   } : {
     to: toUrl
   }} {...props}>
-      {href && !(0, _isInternalUrl.default)(href) ? <span>
-          {label}
-          <_IconExternalLink.default />
-        </span> : label}
+      {label}
     </_Link.default>;
 }
 

package/lib/theme/SkipToContent/index.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _router = require("@docusaurus/router");
-
 var _Translate = _interopRequireDefault(require("@docusaurus/Translate"));
 
 var _themeCommon = require("@docusaurus/theme-common");
@@ -35,9 +33,6 @@ function programmaticFocus(el) {
 
 function SkipToContent() {
   const containerRef = (0, _react.useRef)(null);
-  const {
-    action
-  } = (0, _router.useHistory)();
 
   const handleSkip = e => {
     e.preventDefault();
@@ -51,15 +46,12 @@ function SkipToContent() {
   (0, _themeCommon.useLocationChange)(({
     location
   }) => {
-    if (containerRef.current && !location.hash && action !== 'POP') {
+    if (containerRef.current && !location.hash) {
       programmaticFocus(containerRef.current);
     }
   });
   return <div ref={containerRef}>
-      {
-      /* eslint-disable-next-line jsx-a11y/anchor-is-valid */
-    }
-      <a href="#" className={_stylesModule.default.skipToContent} onClick={handleSkip}>
+      <a href="#main" className={_stylesModule.default.skipToContent} onClick={handleSkip}>
         <_Translate.default id="theme.common.skipToMainContent" description="The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation">
           Skip to main content
         </_Translate.default>

package/lib/theme/hooks/useAnnouncementBar.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _themeCommon = require("@docusaurus/theme-common");
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const DismissStorage = (0, _themeCommon.createStorageSlot)('docusaurus.announcement.dismiss');
+const IdStorage = (0, _themeCommon.createStorageSlot)('docusaurus.announcement.id');
+
+const useAnnouncementBar = () => {
+  const {
+    announcementBar
+  } = (0, _themeCommon.useThemeConfig)();
+  const [isClosed, setClosed] = (0, _react.useState)(true);
+  const handleClose = (0, _react.useCallback)(() => {
+    DismissStorage.set('true');
+    setClosed(true);
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (!announcementBar) {
+      return;
+    }
+
+    const {
+      id
+    } = announcementBar;
+    let viewedId = IdStorage.get(); // retrocompatibility due to spelling mistake of default id
+    // see https://github.com/facebook/docusaurus/issues/3338
+
+    if (viewedId === 'annoucement-bar') {
+      viewedId = 'announcement-bar';
+    }
+
+    const isNewAnnouncement = id !== viewedId;
+    IdStorage.set(id);
+
+    if (isNewAnnouncement) {
+      DismissStorage.set('false');
+    }
+
+    if (isNewAnnouncement || DismissStorage.get() === 'false') {
+      setClosed(false);
+    }
+  }, []);
+  return {
+    isAnnouncementBarClosed: isClosed,
+    closeAnnouncementBar: handleClose
+  };
+};
+
+var _default = useAnnouncementBar;
+exports.default = _default;

package/lib-next/theme/DocPage/styles.module.css

@@ -78,3 +78,9 @@
     ) !important;
   }
 }
+
+@media (max-width: 996px) {
+  .docSidebarContainer {
+    display: none;
+  }
+}

package/lib-next/theme/DocSidebar/index.js

@@ -119,7 +119,6 @@ function DocSidebarItemCategory({
       className={clsx('menu__list-item', {
         'menu__list-item--collapsed': collapsed,
       })}>
-      {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
       <a
         className={clsx('menu__link', {
           'menu__link--sublist': collapsible,
@@ -127,7 +126,7 @@ function DocSidebarItemCategory({
           [styles.menuLinkText]: !collapsible,
         })}
         onClick={collapsible ? handleItemClick : undefined}
-        href={collapsible ? '#' : undefined}
+        href={collapsible ? '#!' : undefined}
         {...props}>
         {label}
       </a>

package/lib-next/theme/DocVersionSuggestions/index.js

@@ -0,0 +1,126 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Link from '@docusaurus/Link';
+import Translate from '@docusaurus/Translate';
+import {
+  useActivePlugin,
+  useActiveVersion,
+  useDocVersionSuggestions,
+} from '@theme/hooks/useDocs';
+import {useDocsPreferredVersion} from '@docusaurus/theme-common';
+
+function UnreleasedVersionLabel({siteTitle, versionLabel}) {
+  return (
+    <Translate
+      id="theme.docs.versions.unreleasedVersionLabel"
+      description="The label used to tell the user that he's browsing an unreleased doc version"
+      values={{
+        siteTitle,
+        versionLabel: <b>{versionLabel}</b>,
+      }}>
+      {
+        'This is unreleased documentation for {siteTitle} {versionLabel} version.'
+      }
+    </Translate>
+  );
+}
+
+function UnmaintainedVersionLabel({siteTitle, versionLabel}) {
+  return (
+    <Translate
+      id="theme.docs.versions.unmaintainedVersionLabel"
+      description="The label used to tell the user that he's browsing an unmaintained doc version"
+      values={{
+        siteTitle,
+        versionLabel: <b>{versionLabel}</b>,
+      }}>
+      {
+        'This is documentation for {siteTitle} {versionLabel}, which is no longer actively maintained.'
+      }
+    </Translate>
+  );
+}
+
+function LatestVersionSuggestionLabel({versionLabel, to, onClick}) {
+  return (
+    <Translate
+      id="theme.docs.versions.latestVersionSuggestionLabel"
+      description="The label userd to tell the user that he's browsing an unmaintained doc version"
+      values={{
+        versionLabel,
+        latestVersionLink: (
+          <b>
+            <Link to={to} onClick={onClick}>
+              <Translate
+                id="theme.docs.versions.latestVersionLinkLabel"
+                description="The label used for the latest version suggestion link label">
+                latest version
+              </Translate>
+            </Link>
+          </b>
+        ),
+      }}>
+      {
+        'For up-to-date documentation, see the {latestVersionLink} ({versionLabel}).'
+      }
+    </Translate>
+  );
+}
+
+const getVersionMainDoc = (version) =>
+  version.docs.find((doc) => doc.id === version.mainDocId);
+
+function DocVersionSuggestions() {
+  const {
+    siteConfig: {title: siteTitle},
+  } = useDocusaurusContext();
+  const {pluginId} = useActivePlugin({
+    failfast: true,
+  });
+  const {savePreferredVersionName} = useDocsPreferredVersion(pluginId);
+  const activeVersion = useActiveVersion(pluginId);
+  const {
+    latestDocSuggestion,
+    latestVersionSuggestion,
+  } = useDocVersionSuggestions(pluginId); // No suggestion to be made
+
+  if (!latestVersionSuggestion) {
+    return <></>;
+  } // try to link to same doc in latest version (not always possible)
+  // fallback to main doc of latest version
+
+  const latestVersionSuggestedDoc =
+    latestDocSuggestion ?? getVersionMainDoc(latestVersionSuggestion);
+  return (
+    <div className="alert alert--warning margin-bottom--md" role="alert">
+      <div>
+        {activeVersion.name === 'current' ? (
+          <UnreleasedVersionLabel
+            siteTitle={siteTitle}
+            versionLabel={activeVersion.label}
+          />
+        ) : (
+          <UnmaintainedVersionLabel
+            siteTitle={siteTitle}
+            versionLabel={activeVersion.label}
+          />
+        )}
+      </div>
+      <div className="margin-top--md">
+        <LatestVersionSuggestionLabel
+          versionLabel={latestVersionSuggestion.label}
+          to={latestVersionSuggestedDoc.path}
+          onClick={() => savePreferredVersionName(latestVersionSuggestion.name)}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default DocVersionSuggestions;

package/lib-next/theme/Footer/index.js

@@ -9,10 +9,8 @@ import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import {useThemeConfig} from '@docusaurus/theme-common';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import isInternalUrl from '@docusaurus/isInternalUrl';
 import styles from './styles.module.css';
 import ThemedImage from '@theme/ThemedImage';
-import IconExternalLink from '@theme/IconExternalLink';
 
 function FooterLink({to, href, label, prependBaseUrlToHref, ...props}) {
   const toUrl = useBaseUrl(to);
@@ -30,14 +28,7 @@ function FooterLink({to, href, label, prependBaseUrlToHref, ...props}) {
             to: toUrl,
           })}
       {...props}>
-      {href && !isInternalUrl(href) ? (
-        <span>
-          {label}
-          <IconExternalLink />
-        </span>
-      ) : (
-        label
-      )}
+      {label}
     </Link>
   );
 }

package/lib-next/theme/SkipToContent/index.js

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, {useRef} from 'react';
-import {useHistory} from '@docusaurus/router';
 import Translate from '@docusaurus/Translate';
 import {useLocationChange} from '@docusaurus/theme-common';
 import styles from './styles.module.css';
@@ -18,7 +17,6 @@ function programmaticFocus(el) {
 
 function SkipToContent() {
   const containerRef = useRef(null);
-  const {action} = useHistory();
 
   const handleSkip = (e) => {
     e.preventDefault();
@@ -32,14 +30,13 @@ function SkipToContent() {
   };
 
   useLocationChange(({location}) => {
-    if (containerRef.current && !location.hash && action !== 'POP') {
+    if (containerRef.current && !location.hash) {
       programmaticFocus(containerRef.current);
     }
   });
   return (
     <div ref={containerRef}>
-      {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-      <a href="#" className={styles.skipToContent} onClick={handleSkip}>
+      <a href="#main" className={styles.skipToContent} onClick={handleSkip}>
         <Translate
           id="theme.common.skipToMainContent"
           description="The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation">

package/lib-next/theme/hooks/useAnnouncementBar.js

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import {useState, useEffect, useCallback} from 'react';
+import {useThemeConfig, createStorageSlot} from '@docusaurus/theme-common';
+const DismissStorage = createStorageSlot('docusaurus.announcement.dismiss');
+const IdStorage = createStorageSlot('docusaurus.announcement.id');
+
+const useAnnouncementBar = () => {
+  const {announcementBar} = useThemeConfig();
+  const [isClosed, setClosed] = useState(true);
+  const handleClose = useCallback(() => {
+    DismissStorage.set('true');
+    setClosed(true);
+  }, []);
+  useEffect(() => {
+    if (!announcementBar) {
+      return;
+    }
+
+    const {id} = announcementBar;
+    let viewedId = IdStorage.get(); // retrocompatibility due to spelling mistake of default id
+    // see https://github.com/facebook/docusaurus/issues/3338
+
+    if (viewedId === 'annoucement-bar') {
+      viewedId = 'announcement-bar';
+    }
+
+    const isNewAnnouncement = id !== viewedId;
+    IdStorage.set(id);
+
+    if (isNewAnnouncement) {
+      DismissStorage.set('false');
+    }
+
+    if (isNewAnnouncement || DismissStorage.get() === 'false') {
+      setClosed(false);
+    }
+  }, []);
+  return {
+    isAnnouncementBarClosed: isClosed,
+    closeAnnouncementBar: handleClose,
+  };
+};
+
+export default useAnnouncementBar;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "2.0.0-beta.1ec2c95e3",
+  "version": "2.0.0-beta.2",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/types.d.ts",
@@ -23,15 +23,15 @@
     "update-code-translations": "node -e 'require(\"./update-code-translations.js\").run()'"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.1ec2c95e3",
-    "@docusaurus/plugin-content-blog": "2.0.0-beta.1ec2c95e3",
-    "@docusaurus/plugin-content-docs": "2.0.0-beta.1ec2c95e3",
-    "@docusaurus/plugin-content-pages": "2.0.0-beta.1ec2c95e3",
-    "@docusaurus/theme-common": "2.0.0-beta.1ec2c95e3",
-    "@docusaurus/types": "2.0.0-beta.1ec2c95e3",
-    "@docusaurus/utils": "2.0.0-beta.1ec2c95e3",
-    "@docusaurus/utils-common": "2.0.0-beta.1ec2c95e3",
-    "@docusaurus/utils-validation": "2.0.0-beta.1ec2c95e3",
+    "@docusaurus/core": "2.0.0-beta.2",
+    "@docusaurus/plugin-content-blog": "2.0.0-beta.2",
+    "@docusaurus/plugin-content-docs": "2.0.0-beta.2",
+    "@docusaurus/plugin-content-pages": "2.0.0-beta.2",
+    "@docusaurus/theme-common": "2.0.0-beta.2",
+    "@docusaurus/types": "2.0.0-beta.2",
+    "@docusaurus/utils": "2.0.0-beta.2",
+    "@docusaurus/utils-common": "2.0.0-beta.2",
+    "@docusaurus/utils-validation": "2.0.0-beta.2",
     "@mdx-js/mdx": "^1.6.21",
     "@mdx-js/react": "^1.6.21",
     "chalk": "^4.1.1",
@@ -50,7 +50,7 @@
     "rtlcss": "^3.1.2"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.0-beta.1ec2c95e3"
+    "@docusaurus/module-type-aliases": "2.0.0-beta.2"
   },
   "peerDependencies": {
     "react": "^16.8.4 || ^17.0.0",
@@ -59,5 +59,5 @@
   "engines": {
     "node": ">=12.13.0"
   },
-  "gitHead": "05c1ed75bb06738f274fe71baf71749a05b2db24"
+  "gitHead": "883f07fddffaf1657407c8e202e370cc436e25f7"
 }

package/src/theme/DocPage/styles.module.css

@@ -78,3 +78,9 @@
     ) !important;
   }
 }
+
+@media (max-width: 996px) {
+  .docSidebarContainer {
+    display: none;
+  }
+}

package/src/theme/DocSidebar/index.tsx

@@ -128,7 +128,6 @@ function DocSidebarItemCategory({
       className={clsx('menu__list-item', {
         'menu__list-item--collapsed': collapsed,
       })}>
-      {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
       <a
         className={clsx('menu__link', {
           'menu__link--sublist': collapsible,
@@ -136,7 +135,7 @@ function DocSidebarItemCategory({
           [styles.menuLinkText]: !collapsible,
         })}
         onClick={collapsible ? handleItemClick : undefined}
-        href={collapsible ? '#' : undefined}
+        href={collapsible ? '#!' : undefined}
         {...props}>
         {label}
       </a>

package/src/theme/Footer/index.tsx

@@ -11,10 +11,8 @@ import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import {FooterLinkItem, useThemeConfig} from '@docusaurus/theme-common';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import isInternalUrl from '@docusaurus/isInternalUrl';
 import styles from './styles.module.css';
 import ThemedImage, {Props as ThemedImageProps} from '@theme/ThemedImage';
-import IconExternalLink from '@theme/IconExternalLink';
 
 function FooterLink({
   to,
@@ -37,14 +35,7 @@ function FooterLink({
             to: toUrl,
           })}
       {...props}>
-      {href && !isInternalUrl(href) ? (
-        <span>
-          {label}
-          <IconExternalLink />
-        </span>
-      ) : (
-        label
-      )}
+      {label}
     </Link>
   );
 }

package/src/theme/SkipToContent/index.tsx

@@ -6,7 +6,6 @@
  */
 
 import React, {useRef} from 'react';
-import {useHistory} from '@docusaurus/router';
 import Translate from '@docusaurus/Translate';
 import {useLocationChange} from '@docusaurus/theme-common';
 
@@ -20,7 +19,6 @@ function programmaticFocus(el: HTMLElement) {
 
 function SkipToContent(): JSX.Element {
   const containerRef = useRef<HTMLDivElement>(null);
-  const {action} = useHistory();
   const handleSkip = (e: React.MouseEvent<HTMLAnchorElement>) => {
     e.preventDefault();
 
@@ -34,15 +32,14 @@ function SkipToContent(): JSX.Element {
   };
 
   useLocationChange(({location}) => {
-    if (containerRef.current && !location.hash && action !== 'POP') {
+    if (containerRef.current && !location.hash) {
       programmaticFocus(containerRef.current);
     }
   });
 
   return (
     <div ref={containerRef}>
-      {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-      <a href="#" className={styles.skipToContent} onClick={handleSkip}>
+      <a href="#main" className={styles.skipToContent} onClick={handleSkip}>
         <Translate
           id="theme.common.skipToMainContent"
           description="The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation">