gatsby-core-theme 1.6.6 → 1.6.10

package/CHANGELOG.md

@@ -1,3 +1,56 @@
+## [1.6.10](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.6.9...v1.6.10) (2021-11-25)
+
+
+### Bug Fixes
+
+* sitemap changed to a page from hercules ([a0e90e4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a0e90e4916fcc0a2918dde39971265cc48fe89da))
+* sitemap fixes ([7c35ba4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7c35ba42cf54a937800140387b84278479caad92))
+
+
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/gatsby-themes ([a75119b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a75119b9e50cf2f5143242dcedc49b54abcfb6ce))
+
+## [1.6.9](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.6.8...v1.6.9) (2021-11-24)
+
+
+### Bug Fixes
+
+* scroll-to-top fix ([8f7264c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/8f7264cac3d4c0b11daaf1ddf5f08539e1bc5473))
+
+
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/gatsby-themes ([3d4fc0d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/3d4fc0d86f199761b32785f0ced0ae1c8c3c5ebb))
+
+## [1.6.8](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.6.7...v1.6.8) (2021-11-24)
+
+
+### Bug Fixes
+
+* non main trackers ([adb1c71](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/adb1c71f34e7bc552696b358ea1cbbccf7b3d2e3))
+
+## [1.6.7](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.6.6...v1.6.7) (2021-11-24)
+
+
+### Bug Fixes
+
+* added translations to the archive page and fixes for link list ([69ebe2e](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/69ebe2ef1fea637a093436ab015aa26058f9fde1))
+* fix some more links without accessible name ([2e8f905](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/2e8f9053369a69c67935e45490f3c5cafdebd4c1))
+* fixes on accesibility ([6689ff1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6689ff182b750ef70143bdce779889805d88be02))
+* tab change lazyload issue ([a1c30c2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a1c30c2a98a23048f653cd0d56f9a17d0e7affbd))
+
+
+### Code Refactoring
+
+* fixes on accessbility ([de7482a](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/de7482ae746bc60e8939ed6031a6b883f61e2954))
+
+
+### Config
+
+* changing sitename for testing purposes ([391c01c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/391c01c7668771feacb551c4ae4e022c7c90db93))
+
+
+* Merge branch 'tm-2605-translations-in-archive' into 'master' ([9be0770](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/9be07704de3e011af549f76ff67e570264766dc0))
+* Merge branch 'tm-2595-accessibility-scores' into 'master' ([c63653f](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c63653f1bdac5e6abfa5a49d9029b7de8cd23e33))
+* Merge branch 'tm-2478-search' into 'master' ([a4fbd15](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a4fbd1528bcf9cde03dc2097e9b79c618a0f544a))
+
 ## [1.6.6](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.6.5...v1.6.6) (2021-11-23)
 
 

package/gatsby-node.esm.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 /* eslint no-console: ["error", { allow: ["log"] }], no-shadow: ["error", { "allow": ["marketSections", "prefilledModules"] }] */
 /* eslint-disable dot-notation */
 
@@ -72,7 +73,7 @@ function createArchivePage(pageObject, marketSections, prefilledModules, createP
       createPage({
         path: page.path,
         component: require.resolve(appName),
-        context: { page, marketSections, prefilledModules, siteInfo },
+        context: { page, marketSections, prefilledModules, siteInfo, translations },
       });
     });
   } else {
@@ -84,7 +85,7 @@ function createArchivePage(pageObject, marketSections, prefilledModules, createP
     createPage({
       path: page.path,
       component: require.resolve(appName),
-      context: { page, marketSections, prefilledModules, siteInfo },
+      context: { page, marketSections, prefilledModules, siteInfo, translations },
     });
   }
 }
@@ -233,6 +234,12 @@ exports.createPages = async ({ actions: { createPage } }, themeOptions) => {
           });
         } else if (page.path === '404') {
           context404 = contextData;
+        } else if (page.path === 'sitemap') {
+          createPage({
+            path: `/${page.path}`,
+            component: require.resolve('./src/components/app.js'),
+            context: { ...contextData, sitemapData: { ...htmlSitemapPages }, templates },
+          });
         } else {
           createPage({
             path: page.path.charAt(0) === '/' ? page.path : `/${page.path}`,
@@ -297,31 +304,7 @@ exports.createPages = async ({ actions: { createPage } }, themeOptions) => {
 exports.onCreatePage = ({ page, actions }) => {
   const { createPage } = actions;
 
-  if (page.path.includes('sitemap')) {
-    const pageNotFoundData = {
-      meta_title: 'Sitemap',
-      template: 'sitemap',
-      title: 'Site Map',
-      type: 'page',
-      sections: {
-        main: null,
-        navigation: null,
-        sidebar: null,
-        footer: null,
-      },
-      language: languageKey,
-      translations,
-      relation: {
-        sports,
-      },
-    };
-    page = Object.assign(pageNotFoundData, page); // eslint-disable-line no-param-reassign
-    createPage({
-      path: page.path,
-      component: require.resolve('./src/pages/sitemap/'),
-      context: { page, siteInfo, marketSections, sitemapData: { ...htmlSitemapPages }, templates },
-    });
-  } else if (page.path.includes('404')) {
+  if (page.path.includes('404')) {
     createPage({
       path: page.path,
       component: require.resolve('./src/pages/404/'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "1.6.6",
+  "version": "1.6.10",
   "description": "Gatsby Theme NPM Package",
   "main": "index.js",
   "GATSBY_RECAPTCHA_SITEKEY": "6LfoyvMUAAAAAO4nl_MQnqHb4XdHxEiu5cXgIqeB",
@@ -60,7 +60,8 @@
     "react-google-recaptcha": "^2.1.0",
     "react-helmet": "^6.0.0",
     "react-icons": "^4.2.0",
-    "react-lazyload": "^2.6.5"
+    "react-lazyload": "^2.6.5",
+    "react-masonry-css": "^1.0.16"
   },
   "devDependencies": {
     "@babel/core": "^7.13.1",

package/src/components/atoms/author/index.js

@@ -20,7 +20,13 @@ const Author = ({
     <>
       {link && icon && (
         <div className={styles.authorIcon}>
-          <a href={link} target="_blank" rel="noreferrer" className="author-gtm">
+          <a
+            href={link}
+            target="_blank"
+            rel="noreferrer"
+            aria-label={`${name} Link`}
+            className="author-gtm"
+          >
             {icon}
           </a>
         </div>

package/src/components/atoms/author-box/index.js

@@ -73,6 +73,7 @@ export default function AuthorBox({ author }) {
                     target="_blank"
                     rel="noreferrer"
                     key={`author-box-link-${filteredLinks.id}`}
+                    aria-label={`${filteredLinks.id} Link`}
                   >
                     {filteredLinks.icon}
                   </a>

package/src/components/atoms/logo/index.js

@@ -16,6 +16,7 @@ const Logo = ({ item = {} }) => {
         title={item.name}
         target="_blank"
         rel="noopener noreferrer"
+        aria-label={`${item.name} Link`}
       >
         <LazyImage alt={item.name} src={imagePrettyUrl(item.logo_url)} />
       </a>

package/src/components/atoms/menu/items/item/index.js

@@ -55,6 +55,7 @@ export default function Item({
     >
       {item.value?.includes('http') || item.value?.includes('www') ? (
         <a
+          aria-label={`${item?.title} link`}
           href={item.value}
           title={item.title}
           rel={`noreferrer ${item.nofollow && 'nofollow'}`}
@@ -82,6 +83,7 @@ export default function Item({
           to={item.value ? item.value : '#'}
           title={item.title}
           rel={item.nofollow && 'nofollow'}
+          aria-label={`${item?.title} link`}
         >
           <ItemImage />
           {item.title}
@@ -89,6 +91,7 @@ export default function Item({
       )}
       {options.mobile.subMenuDropDownButton && isMobile && hasChildren && (
         <button
+          aria-label={`${item?.title} Dropdown`}
           type="button"
           className={`${gtmClass} btn-cta`}
           onClick={(e) => {

package/src/components/atoms/open-graph/index.js

@@ -30,6 +30,7 @@ const OpenGraph = ({ page, text = 'Share: ' }) => {
         role="button"
         className={`${styles.btn} open-graph-gtm`}
         onClick={(e) => share(e, 555, 602)}
+        aria-label="Facebook Link"
       >
         <FaFacebookF />
       </a>
@@ -40,6 +41,7 @@ const OpenGraph = ({ page, text = 'Share: ' }) => {
         role="button"
         className={`${styles.btn} open-graph-gtm`}
         onClick={(e) => share(e, 555, 255)}
+        aria-label="Twitter Link"
       >
         <FaTwitter />
       </a>

package/src/components/atoms/scroll-to-top/index.js

@@ -1,25 +1,42 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 
-import { registerScroll } from '~helpers/scroll';
 import styles from './scroll-to-top.module.scss';
 
 const ScrollToTop = ({ scrollTo = '0' }) => {
-  registerScroll();
-
-  function scrollToTop(e) {
-    e.preventDefault();
-    window.scrollTo({
-      top: scrollTo,
-      behavior: 'smooth',
-    });
-  }
+  const [showScroll, setShowScroll] = useState(false);
+
+  const checkScrollTop = () => {
+    if (!showScroll && window.pageYOffset > 400) {
+      setShowScroll(true);
+    } else if (showScroll && window.pageYOffset <= 400) {
+      setShowScroll(false);
+    }
+  };
+
+  const scrollTop = () => {
+    window.scrollTo({ top: scrollTo, behavior: 'smooth' });
+  };
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      window.addEventListener('scroll', checkScrollTop);
+
+      return () => {
+        window.removeEventListener('scroll', checkScrollTop);
+      };
+    }
+
+    return null;
+  });
+
   return (
     <button
       type="button"
       aria-label="Scroll to top"
-      onClick={(e) => scrollToTop(e)}
+      onClick={(e) => scrollTop(e)}
       className={styles.scrollToTop}
+      style={{ display: showScroll ? 'flex' : 'none' }}
     />
   );
 };

package/src/components/atoms/scroll-to-top/scroll-to-top.module.scss

@@ -1,3 +1,9 @@
+body[data-scroll='0'] {
+  .scrollToTop {
+    opacity: 0;
+  }
+}
+
 .scrollToTop {
   z-index: map-get($z-index, scroll-to-top);
   border-radius: 50%;
@@ -6,9 +12,12 @@
   width: 64px;
   height: 64px;
   text-align: center;
-  
+  bottom: 0;
+  position: fixed;
+  right: 0;
+
   &:before {
-    @include arrow(#fff, 2rem, up, false);
+    @include arrow(#000, 2rem, up, false);
     position: absolute;
     bottom: calc(50% - 1.25rem);
     left: calc(50% - 1rem);

package/src/{pages → components/atoms}/sitemap/index.js

@@ -1,18 +1,27 @@
 /* eslint-disable array-callback-return */
 /* eslint-disable react/forbid-prop-types */
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
+import { BiSitemap } from 'react-icons/bi';
+import { IoMdLink } from 'react-icons/io';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import Masonry from 'react-masonry-css';
+import { Context } from '~context/TranslationsProvider';
+import { translate } from '~helpers/getters';
 import styles from './sitemap.module.scss';
-import Body from '~pages/body';
-import Head from '~organisms/head';
 import Link from '~hooks/link';
 
-const Sitemap = ({ pageContext, templateIcon, linkIcon }) => {
+const Sitemap = ({ pageContext, templateIcon = <BiSitemap />, linkIcon = <IoMdLink /> }) => {
   const { templates, sitemapData } = pageContext;
+  const { translations } = useContext(Context) || {};
   const market = Object.keys(sitemapData)[0];
 
   const getTemplateName = (template) => {
-    const templateName = templates[template].short_name.replace('_', ' ');
+    const templateName = translate(
+      translations,
+      templates[template].short_name,
+      templates[template].short_name.replace('_', ' ')
+    );
     const templatePages = sitemapData[market][template];
     const templatePagesCount = templatePages && templatePages.length;
 
@@ -47,19 +56,14 @@ const Sitemap = ({ pageContext, templateIcon, linkIcon }) => {
   };
 
   return (
-    <>
-      <Head page={pageContext.page} siteInfo={pageContext.siteInfo} />
-      <Body pageContext={pageContext}>
-        <div className={styles.container}>
-          {Object.keys(templates).map((template) => (
-            <ul key={template} className={styles.list}>
-              {getTemplateName(template)}
-              {getTemplatePages(template)}
-            </ul>
-          ))}
-        </div>
-      </Body>
-    </>
+    <Masonry breakpointCols={3} className={styles.container} columnClassName={styles.list}>
+      {Object.keys(templates).map((template) => (
+        <ul key={template}>
+          {getTemplateName(template)}
+          {getTemplatePages(template)}
+        </ul>
+      ))}
+    </Masonry>
   );
 };
 
@@ -67,8 +71,6 @@ Sitemap.propTypes = {
   pageContext: PropTypes.shape({
     sitemapData: PropTypes.object,
     templates: PropTypes.object,
-    siteInfo: PropTypes.object,
-    page: PropTypes.object,
   }),
   templateIcon: PropTypes.element,
   linkIcon: PropTypes.element,

package/src/components/atoms/sitemap/sitemap.module.scss

@@ -0,0 +1,111 @@
+.container {
+  display: flex;
+  max-width: var(--main-container-max);
+  margin: 0 auto;
+  padding: 0 2.4rem 2rem 2.4rem;
+
+  @include min(mobile) {
+    padding: 0 1.6rem 2rem 1.6rem;
+  }
+
+  @include max(mobile) {
+    display: block;
+  }
+}
+
+.list {
+  @include max(mobile) {
+    width: 100% !important;
+  }
+
+  > ul {
+    display: flex;
+    flex-direction: column;
+    padding: 1rem;
+
+    > div {
+      position: relative;
+      @include flex-align(center, flex-start);
+
+      svg {
+        fill: white !important;
+        background-color: var(--template-name-icon-background, red);
+        padding: 1rem;
+        width: 4.8rem;
+        height: 4.8rem;
+        border-radius: 2.8rem;
+      }
+
+      > span {
+        color: black;
+        font-weight: 700;
+        font-size: 2rem;
+        margin-left: 1.6rem;
+        text-transform: capitalize;
+      }
+
+      span:last-child {
+        @include flex-align(center, center);
+        position: absolute;
+        top: -1.2rem;
+        background-color: var(--page-number-background, green);
+        border-radius: 1.2rem;
+        border: 0.2rem solid white;
+        margin: 0;
+        font-size: 1rem;
+        color: var(--page-number-color, white);
+        font-weight: 700;
+        width: 2.4rem;
+        height: 2.4rem;
+        left: 3.2rem;
+      }
+    }
+
+    > ul {
+      padding-top: 3rem;
+      padding-left: 2.7rem;
+      margin-left: 2.3rem;
+      border-left: dashed 1px #e3e6ef;
+
+      li {
+        display: grid;
+        grid-template-columns: 0.1fr 1fr;
+        gap: 0.5rem;
+        margin-bottom: 1rem;
+        position: relative;
+
+        &:before {
+          content: ' ';
+          position: absolute;
+          left: -2.7rem;
+          width: 2.5rem;
+          top: 1.2rem;
+          border: dashed 1px #e3e6ef;
+        }
+
+        &:last-child:after {
+          content: ' ';
+          width: 1rem;
+          height: 5rem;
+          background-color: var(--sitemap-background-color);
+          position: absolute;
+          top: 1.3rem;
+          left: -2.8rem;
+        }
+
+        svg {
+          fill: white !important;
+          background-color: #6e6e84;
+          padding: 0.3rem;
+          width: 2.4rem;
+          height: 2.4rem;
+          border-radius: 0.8rem;
+        }
+
+        a {
+          padding-left: 0.3rem;
+        }
+      }
+    }
+  }
+}

package/src/components/atoms/sitemap/sitemap.stories.js

@@ -0,0 +1,96 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import {
+  Title,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  ArgsTable,
+} from '@storybook/addon-docs/blocks';
+
+import Sitemap from '.';
+
+export default {
+  title: 'Gatsby-Theme/Atoms/Sitemap',
+  component: Sitemap,
+  argTypes: {
+    // pageContext: {
+    //   name: 'sitemapData',
+    //   type: { name: 'object', required: true },
+    //   defaultValue: null,
+    //   description: 'Object containing all links grouped by page type.',
+    //   table: {
+    //     type: { summary: 'object' },
+    //     defaultValue: { summary: null },
+    //   },
+    // },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'An HTML sitemap showing all pages as links',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => <Sitemap {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  pageContext: {
+    sitemapData: {
+      ie_en: {
+        1: [
+          {
+            title: 'test one',
+            path: '/test_one',
+          },
+          {
+            title: 'test two',
+            path: '/test_two',
+          },
+          {
+            title: 'test three',
+            path: '/test_three',
+          },
+        ],
+        2: [
+          {
+            title: 'template page one',
+            path: '/template_page_one',
+          },
+          {
+            title: 'template page two',
+            path: '/template_page_two',
+          },
+        ],
+        3: [
+          {
+            title: 'template two page',
+            path: 'template_teo_page',
+          },
+        ],
+      },
+    },
+    templates: {
+      1: {
+        short_name: 'template one',
+      },
+      2: {
+        short_name: 'template two',
+      },
+      3: {
+        short_name: 'template three',
+      },
+    },
+  },
+};

package/src/components/molecules/link-list/index.js

@@ -18,39 +18,37 @@ const LinkList = ({
   listIcon = <></>,
   multiIcon = false,
   classes,
-  once = false,
+  disableLazyLoad = false,
   height,
   width,
   gtmClass = '',
 }) => {
   function renderLinkContent(item, index) {
     const icon = listIcon[index];
+
+    const LinkImage = () => {
+      return disableLazyLoad ? (
+        <img src={imagePrettyUrl(item.image)} width={width} height={height} alt={item.title} />
+      ) : (
+        <LazyImage
+          src={imagePrettyUrl(item.image)}
+          alt={item.title}
+          width={width}
+          height={height}
+        />
+      );
+    };
+
     return (
       <>
         {!imageOnly && (
           <>
             {multiIcon ? icon : listIcon}
             <span>{item.title}</span>
-            {item.image && (
-              <LazyImage
-                src={imagePrettyUrl(item.image)}
-                alt={item.title}
-                once={once}
-                width={width}
-                height={height}
-              />
-            )}
+            {item.image && <LinkImage />}
           </>
         )}
-        {item.image && imageOnly && (
-          <LazyImage
-            src={imagePrettyUrl(item.image)}
-            alt={item.title}
-            once={once}
-            width={width}
-            height={height}
-          />
-        )}
+        {item.image && imageOnly && <LinkImage />}
       </>
     );
   }
@@ -66,6 +64,7 @@ const LinkList = ({
               rel={`noreferrer ${item.nofollow && 'nofollow'}`}
               target="_blank"
               className={gtmClass}
+              aria-label={`${item.title} Link`}
             >
               {renderLinkContent(item, index)}
             </a>
@@ -75,6 +74,7 @@ const LinkList = ({
               title={item.title}
               className={gtmClass}
               rel={item.nofollow && 'nofollow'}
+              aria-label={`${item.title} Link`}
             >
               {renderLinkContent(item, index)}
             </Link>
@@ -130,7 +130,7 @@ LinkList.propTypes = {
   listIcon: PropTypes.oneOfType([PropTypes.element, PropTypes.any, PropTypes.node]),
   multiIcon: PropTypes.bool,
   classes: PropTypes.string,
-  once: PropTypes.bool,
+  disableLazyLoad: PropTypes.bool,
   width: PropTypes.number,
   height: PropTypes.number,
   gtmClass: PropTypes.string,

package/src/components/molecules/link-list/link-list.stories.js

@@ -70,8 +70,8 @@ export default {
         type: null,
       },
     },
-    once: {
-      name: 'once',
+    disableLazyLoad: {
+      name: 'disableLazyLoad',
       type: { name: 'boolean', required: false },
       defaultValue: '',
       description:

package/src/components/molecules/main/index.js

@@ -5,14 +5,17 @@ import Module from '~molecules/module';
 import styles from './main.module.scss';
 import keygen from '~helpers/keygen';
 
-const Main = ({ section = {}, page = {}, pageContext = {} }) => {
+const Main = ({ section = {}, pageContext = {} }) => {
+  const { page } = pageContext;
   const SearchPage = page.path === 's' ? loadable(() => import(`~pages/search`)) : null;
+  const HtmlSitemap = page.path === 'sitemap' ? loadable(() => import(`~atoms/sitemap`)) : null;
   const AuthorBox = page.author ? loadable(() => import(`~atoms/author-box`)) : null;
   const NotFound = page?.path?.includes('404') ? loadable(() => import(`~atoms/not-found`)) : null;
 
   return (
     <main className={styles.modulePage}>
       {NotFound && <NotFound />}
+      {HtmlSitemap && <HtmlSitemap pageContext={pageContext} />}
       {section.modules &&
         section.modules.map((module) => (
           <Module key={keygen()} module={module} page={page} pageContext={pageContext} />

package/src/components/molecules/main/main.test.js

@@ -10,16 +10,16 @@ const section = {
   modules: [
     {
       name: 'content',
-      ...getSingleContentData()
+      ...getSingleContentData(),
     },
   ],
 };
 
-const pagePath = 's';
+const pageObject = { page: { path: 's' } };
 
 describe('Main Component', () => {
   test('render main', async () => {
-    const { container, getByText } = render(<Main section={section} pagePath={pagePath} />);
+    const { container, getByText } = render(<Main section={section} pageContext={pageObject} />);
     expect(container).toBeTruthy();
     expect(container.querySelectorAll('main.modulePage')).toHaveLength(1);
 

package/src/components/molecules/operator-banner/index.js

@@ -47,6 +47,7 @@ export default function OperatorBanner({
                 title={operator?.name}
                 target="_blank"
                 rel="noreferrer"
+                aria-label={`${operator?.name} Link`}
               >
                 <LazyImage alt={operator?.name} src={imagePrettyUrl(logo)} />
               </a>

package/src/components/molecules/pagination/with-midpoints.js

@@ -34,6 +34,7 @@ const PaginationWithMidPoints = ({
           <Link
             to={getPagePath(1)}
             className={`${styles.button} ${styles.isActive} pagination-gtm`}
+            aria-label="Go to First Page"
           >
             {firstComp}
           </Link>
@@ -47,6 +48,7 @@ const PaginationWithMidPoints = ({
           <Link
             to={getPagePath(current - 1)}
             className={`${styles.button} ${styles.isActive} pagination-gtm`}
+            aria-label="Previous Button"
           >
             {previousComp}
           </Link>
@@ -128,6 +130,7 @@ const PaginationWithMidPoints = ({
           <Link
             to={getPagePath(current + 1)}
             className={`${styles.button} ${styles.isActive} pagination-gtm`}
+            aria-label="Next Button"
           >
             {nextComp}
           </Link>
@@ -141,6 +144,7 @@ const PaginationWithMidPoints = ({
           <Link
             to={getPagePath(total)}
             className={`${styles.button} ${styles.isActive} pagination-gtm`}
+            aria-label="Go to Last"
           >
             {lastComp}
           </Link>

package/src/components/molecules/toplist/default-row/index.js

@@ -31,6 +31,7 @@ const Row = ({ item, oneliner = 'main', layout = 'list' }) => {
         className="casinos-top-list-gtm logo-cta"
         target="_blank"
         rel="noreferrer"
+        aria-label={`${item.name} Link`}
       >
         <LazyImage alt={item.name} src={imagePrettyUrl(item.logo_url, 100)} />
       </a>

package/src/components/organisms/navigation/index.js

@@ -62,7 +62,12 @@ const Navigation = ({
     >
       <nav className={styles.nav} style={{ justifyContent: logoPosition }} ref={navRef}>
         <NavigationProvider>
-          <Link className={`${styles.logo} main-menu-gtm logo-cta`} to="/" onClick={onClickHandler}>
+          <Link
+            className={`${styles.logo} main-menu-gtm logo-cta`}
+            aria-label="Nav Logo"
+            to="/"
+            onClick={onClickHandler}
+          >
             <img alt="logo" src={logo} width={logoWidth} height={logoHeight} />
           </Link>
           {showMenu && (

package/src/components/pages/body/index.js

@@ -24,7 +24,7 @@ function Body({ pageContext, children }) {
     <>
       {navigation && <Navigation template={template} section={navigation} />}
       {!is404 && <Header section={pageContext} />}
-      {main && !children && <Main section={main} page={pageContext.page} />}
+      {main && !children && <Main section={main} pageContext={pageContext} />}
       {children && <main>{children}</main>}
       {Sidebar && <Sidebar section={sidebar} />}
       <ScrollToTop />

package/src/components/pages/tracker/index.js

@@ -28,7 +28,10 @@ const Tracker = ({
   for (let i = 0; i < trackerLinks.length; i += 1) {
     const trackerLink = trackerLinks[i].toLowerCase().replace(' ', '_');
     if (path.includes(trackerLink)) {
-      tracker = operator.links[trackerLink];
+      tracker =
+        operator.links[
+          Object.keys(operator.links).find((key) => key.toLowerCase() === trackerLink.toLowerCase())
+        ];
       break;
     }
     if (path.includes('ppc_fallback')) {

package/src/hooks/tabs/index.js

@@ -25,7 +25,7 @@ const Tabs = ({
 
   function onClickTabItem(tabId) {
     setActiveTab(tabId);
-    forceCheck();
+    setTimeout(forceCheck);
   }
 
   return (

package/src/styles/utils/variables/_main.scss

@@ -77,6 +77,12 @@
   --second-table-background: var(--color-17);
   --secondary-module-background: var(--color-42);
 
+  // HTML Sitemap
+  --template-name-icon-background: #ff893f;
+  --page-number-background: #393939;
+  --page-number-color: #fff;
+  --sitemap-background-color: #fff;
+
   --storybook-soccer: var(--color-45);
   --storybook-tennis: var(--color-46);
   --storybook-handball: var(--color-47);

package/src/pages/sitemap/sitemap.module.scss

@@ -1,21 +0,0 @@
-
-.container {
-    display: flex;
-  flex-flow: row;
-}
-
-.list {
-    display: flex;
-    flex-direction: column;
-
-    padding: 1rem;
-
-    > div {
-        font-weight: 700;
-        font-size: 1.6rem;
-    }
-
-    >ul {
-        padding-top: 2rem;
-    }
-}