gatsby-matrix-theme 53.1.6 → 53.2.0

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+# [53.2.0](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.1.7...v53.2.0) (2025-06-09)
+
+
+### Bug Fixes
+
+* a new structure ([b9a7f72](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/b9a7f72846f71c2a983dbaebae8421b6dd2495f4))
+* lazy load with size attributes default image of article card ([e630b90](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/e630b90f15f266996d92c1c074966be33b9e4c04))
+* nsa ([b50b772](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/b50b77248691d29ffd622bc7ef2fd9cc56e2a0e5))
+* test ([e77349c](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/e77349c8d7e46c15d3c1a77a7dc8f66234db057b))
+* update theme ([3380f42](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/3380f42ec11b4f37691634ff04dd428d4915b028))
+
+
+* Merge branch 'tm-5437-aria-labels' into 'master' ([0be9657](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/0be9657cf98524ef52df2054ed8317d576959384))
+* Merge remote-tracking branch 'origin/master' into tm-5437-aria-labels ([1391610](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/13916103b65ffdf366c57986fffff7f1a70b8fa4))
+* Merge branch 'tm-5506-default-article-image' into 'master' ([73c5a7c](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/73c5a7ca423ba236940babb209dd9dbbe515c1ec))
+* Merge branch 'tm-5453-nsa-fixes-matrix' into 'master' ([7250a32](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/7250a32c8109e44ca9c5856513363fdeb3a1c13c))
+
+
+### Features
+
+* aria labels translations ([a57202a](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/a57202a8b671e218db4b91c7e6576dcd019bcda4))
+
+## [53.1.7](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.1.6...v53.1.7) (2025-06-04)
+
+
+### Bug Fixes
+
+* update theme ([2ddaeec](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/2ddaeecb46ac557e10499fd4eef51b5f82a9209c))
+
 ## [53.1.6](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.1.5...v53.1.6) (2025-06-04)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "53.1.6",
+  "version": "53.2.0",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
     "gatsby": "^5.11.0",
-    "gatsby-core-theme": "44.1.5",
+    "gatsby-core-theme": "44.1.7",
     "gatsby-plugin-sharp": "^5.11.0",
     "gatsby-transformer-sharp": "^5.11.0",
     "gatsby-plugin-sitemap": "^6.13.1",

package/src/components/atoms/admin/card/button/index.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { FaRegEdit } from '@react-icons/all-files/fa/FaRegEdit';
 import { FaDatabase } from '@react-icons/all-files/fa/FaDatabase';
-
+import useTranslate from '~hooks/useTranslate/useTranslate';
 import styles from './admin-card-button.module.scss';
 
-const index = ({ item, isToplist=false }) => {
+const index = ({ item, isToplist = false }) => {
   const path = (type, relation, pageId) => {
     switch (type) {
       case 'page':
@@ -24,23 +24,28 @@ const index = ({ item, isToplist=false }) => {
 
   return (
     <div className={styles.container}>
-      {!isToplist && <a
-        className={styles.button}
-        target="_blank"
-        href={`${process.env.HERCULES_BACKEND_URL}${path('page', null, item.id)}`}
-        rel="noreferrer"
-        type="button"
-        aria-label="Edit Page"
-      >
-        <FaRegEdit />
-      </a>}
+      {!isToplist && (
+        <a
+          className={styles.button}
+          target="_blank"
+          href={`${process.env.HERCULES_BACKEND_URL}${path('page', null, item.id)}`}
+          rel="noreferrer"
+          type="button"
+          aria-label={useTranslate('ariaLabel-editPage', 'Edit Page')}
+        >
+          <FaRegEdit />
+        </a>
+      )}
       <a
         className={styles.button}
         target="_blank"
-        href={`${process.env.HERCULES_BACKEND_URL}${path(isToplist ? 'operator' : item.type, isToplist ? item : item.relation)}`}
+        href={`${process.env.HERCULES_BACKEND_URL}${path(
+          isToplist ? 'operator' : item.type,
+          isToplist ? item : item.relation
+        )}`}
         rel="noreferrer"
         type="button"
-        aria-label="Edit Relation Data"
+        aria-label={useTranslate('ariaLabel-editRelationData', 'Edit Relation Data')}
       >
         <FaDatabase />
       </a>

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

@@ -7,6 +7,7 @@ import { IoLogoTiktok } from '@react-icons/all-files/io5/IoLogoTiktok';
 import { FaLinkedin } from '@react-icons/all-files/fa/FaLinkedin';
 import { SiWikipedia } from '@react-icons/all-files/si/SiWikipedia';
 import TwitterIcon from '~images/icons/twitter';
+import useTranslate from '~hooks/useTranslate/useTranslate';
 import styles from './socials.module.scss';
 
 export default function Socials({
@@ -41,7 +42,7 @@ export default function Socials({
             target="_blank"
             rel="nofollow noreferrer"
             key={`author-box-link-${socialLink.id}`}
-            aria-label={`${socialLink.id} Link`}
+            aria-label={useTranslate(`ariaLabel-${socialLink.id}Link`, `${socialLink.id} Link`)}
           >
             {socialLink.icon}
           </a>

package/src/components/atoms/cards/article-card/template-one/index.js

@@ -5,9 +5,9 @@ import PropTypes from 'prop-types';
 import Link from 'gatsby-core-theme/src/hooks/link';
 import { imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
-import GatsbyImg from 'gatsby-core-theme/src/hooks/gatsby-img';
 import VariableComponent from '../variables';
 
+import useTranslate from '~hooks/useTranslate/useTranslate';
 import styles from './article-card.module.scss';
 
 const ArticleCard = ({
@@ -22,29 +22,24 @@ const ArticleCard = ({
   verifyIcon = '',
 }) => {
   const { title, path, banner, reading_time } = item;
+  const defaultImg = (
+    <LazyImage width={width} height={height} src="/images/default-article.jpg" alt={title} />
+  );
+
   return (
     <div className={styles.article || ''}>
       <Link
         to={path}
         className={`${styles.image || ''} article-card-gtm`}
-        aria-label={`${title} Link`}
+        aria-label={useTranslate(`ariaLabel-${title}Link`, `${title} Link`)}
       >
-        {banner ? (
-          <LazyImage
-            width={width}
-            height={height}
-            src={imagePrettyUrl(banner, width, height)}
-            alt={title}
-          />
-        ) : (
-          <GatsbyImg
-            alt={title}
-            width="100%"
-            height="100%"
-            loading="lazy"
-            filename="default-article.jpg"
-          />
-        )}
+        <LazyImage
+          width={width}
+          height={height}
+          defaultImg={defaultImg}
+          src={banner ? imagePrettyUrl(banner, width, height) : undefined}
+          alt={title}
+        />
       </Link>
       <div className={`${styles?.cardContent || ''}`}>
         {hasVariableComponent && (

package/src/components/atoms/cards/game-cards/template-five/index.js

@@ -1,10 +1,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  imagePrettyUrl,
-  getSectionExtraField
-} from '~helpers/getters';
+import { imagePrettyUrl, getSectionExtraField } from '~helpers/getters';
 import Button from '~atoms/button/button';
 import OperatorCta from '~atoms/button/operator-cta';
 import GatsbyImg from '~hooks/gatsby-img';
@@ -14,7 +11,7 @@ import Link from '~hooks/link';
 import LazyImage from '~hooks/lazy-image';
 import { getAltText } from '~helpers/image';
 import useTranslate from '~hooks/useTranslate/useTranslate';
-import { TrackingKeys } from '~constants/tracking-api'
+import { TrackingKeys } from '~constants/tracking-api';
 
 import styles from './template-five.module.scss';
 
@@ -42,9 +39,7 @@ const TemplateFive = ({
   const gameImage = (useThumbnail && relation?.thumbnail_filename_object?.filename) || banner;
   const operatorLogo = operator?.logo_url_object || operator?.logo_filename_object;
   const operatorText = operator?.bonuses?.main?.one_liner
-    ? `Play at ${operator?.name} and get ${operator?.bonuses?.main?.one_liner
-        .split('+')[0]
-        .trim()}`
+    ? `Play at ${operator?.name} and get ${operator?.bonuses?.main?.one_liner.split('+')[0].trim()}`
     : operator?.name || '';
   const StarRatingComponent = useOneStarRating ? OneStarRating : StarRating;
 
@@ -53,7 +48,10 @@ const TemplateFive = ({
       <Link
         to={path}
         className={`game-card-gtm ${styles?.cardBanner || ''}`}
-        aria-label={`${name || item?.title} Link`}
+        aria-label={useTranslate(
+          `ariaLabel-${name || item?.title}Link`,
+          `${name || item?.title} Link`
+        )}
       >
         {storybookImage || gameImage ? (
           <LazyImage

package/src/components/atoms/cards/game-cards/template-four/index.js

@@ -1,10 +1,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  imagePrettyUrl,
-  getSectionExtraField,
-} from '~helpers/getters';
+import { imagePrettyUrl, getSectionExtraField } from '~helpers/getters';
 import { getAltText } from '~helpers/image';
 import Button from '~atoms/button/button';
 import OperatorCta from '~atoms/button/operator-cta';
@@ -14,7 +11,7 @@ import GatsbyImg from '~hooks/gatsby-img';
 import Link from '~hooks/link';
 import LazyImage from '~hooks/lazy-image';
 import useTranslate from '~hooks/useTranslate/useTranslate';
-import { TrackingKeys } from '~constants/tracking-api'
+import { TrackingKeys } from '~constants/tracking-api';
 import styles from './template-four.module.scss';
 
 const TemplateFour = ({
@@ -29,7 +26,7 @@ const TemplateFour = ({
   storybookImage,
   showRoundedRating = false,
   modulePosition,
-  itemPosition
+  itemPosition,
 }) => {
   const { relation, path, banner } = item;
   const { name } = relation || {};
@@ -45,7 +42,10 @@ const TemplateFour = ({
       <Link
         to={path}
         className={`game-card-gtm ${styles?.cardBanner || ''}`}
-        aria-label={`${name || item?.title} Link`}
+        aria-label={useTranslate(
+          `ariaLabel-${name || item?.title}Link`,
+          `${name || item?.title} Link`
+        )}
       >
         {storybookImage || gameImage ? (
           <LazyImage

package/src/components/atoms/cards/game-cards/template-one/index.js

@@ -1,10 +1,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  imagePrettyUrl,
-  getSectionExtraField
-} from '~helpers/getters';
+import { imagePrettyUrl, getSectionExtraField } from '~helpers/getters';
 import { getAltText } from '~helpers/image';
 import Button from '~atoms/button/button';
 import StarRating from '~molecules/star-rating/one-star';
@@ -41,7 +38,10 @@ const TemplateOne = ({
       <Link
         to={path}
         className={`game-card-gtm ${styles?.cardBanner || ''}`}
-        aria-label={`${name || item?.title} Link`}
+        aria-label={useTranslate(
+          `ariaLabel-${name || item?.title}Link`,
+          `${name || item?.title} Link`
+        )}
       >
         {storybookImage || gameImage ? (
           <LazyImage

package/src/components/atoms/cards/game-cards/template-three/index.js

@@ -1,10 +1,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  imagePrettyUrl,
-  getSectionExtraField
-} from '~helpers/getters';
+import { imagePrettyUrl, getSectionExtraField } from '~helpers/getters';
 import { getAltText } from '~helpers/image';
 import Button from '~atoms/button/button';
 import StarRating from '~molecules/star-rating';
@@ -14,7 +11,7 @@ import GatsbyImg from '~hooks/gatsby-img';
 import Link from '~hooks/link';
 import LazyImage from '~hooks/lazy-image';
 import useTranslate from '~hooks/useTranslate/useTranslate';
-import { TrackingKeys } from '~constants/tracking-api'
+import { TrackingKeys } from '~constants/tracking-api';
 import styles from './template-three.module.scss';
 
 const TemplateThree = ({
@@ -29,7 +26,7 @@ const TemplateThree = ({
   storybookImage,
   showRoundedRating = false,
   modulePosition,
-  itemPosition
+  itemPosition,
 }) => {
   const { relation, path, banner } = item;
   const { name } = relation || {};
@@ -48,7 +45,7 @@ const TemplateThree = ({
       <Link
         to={path}
         className={`game-card-gtm ${styles?.cardBanner || ''}`}
-        aria-label={`${name} Link`}
+        aria-label={useTranslate(`ariaLabel-${name}Link`, `${name} Link`)}
       >
         {storybookImage || gameImage ? (
           <LazyImage

package/src/components/atoms/cards/game-cards/template-two/index.js

@@ -1,10 +1,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  imagePrettyUrl,
-  getSectionExtraField
-} from '~helpers/getters';
+import { imagePrettyUrl, getSectionExtraField } from '~helpers/getters';
 import { getAltText } from '~helpers/image';
 import Button from '~atoms/button/button';
 import OperatorCta from '~atoms/button/operator-cta';
@@ -14,7 +11,7 @@ import GatsbyImg from '~hooks/gatsby-img';
 import Link from '~hooks/link';
 import LazyImage from '~hooks/lazy-image';
 import useTranslate from '~hooks/useTranslate/useTranslate';
-import { TrackingKeys } from '~constants/tracking-api'
+import { TrackingKeys } from '~constants/tracking-api';
 import styles from './template-two.module.scss';
 
 const TemplateTwo = ({
@@ -29,7 +26,7 @@ const TemplateTwo = ({
   storybookImage,
   showRoundedRating = false,
   modulePosition,
-  itemPosition
+  itemPosition,
 }) => {
   const { relation, path, banner } = item;
   const { name } = relation || {};
@@ -48,7 +45,10 @@ const TemplateTwo = ({
       <Link
         to={path}
         className={`game-card-gtm ${styles?.cardBanner || ''}`}
-        aria-label={`${name || item?.title} Link`}
+        aria-label={useTranslate(
+          `ariaLabel-${name || item?.title}Link`,
+          `${name || item?.title} Link`
+        )}
       >
         {storybookImage || gameImage ? (
           <LazyImage

package/src/components/atoms/cards/payment-method/template-one/index.js

@@ -20,11 +20,12 @@ const TemplateOneTwo = ({
   height = 150,
   wordLimit = 50,
   showRoundedRating = false,
+  showDescription= true
 }) => {
   const { title, path, relation, sections, description } = item || {};
   const { name, selling_points } = item?.relation || {};
 
-  const imageObject = relation?.logo
+  const imageObject = relation?.logo;
 
   return (
     <>
@@ -32,7 +33,7 @@ const TemplateOneTwo = ({
         <div className={styles?.header || ''}>
           <Link
             className={`${styles?.image || ''} payment-method-card-gtm`}
-            aria-label={`${title} Link`}
+            aria-label={useTranslate(`ariaLabel-${title}Link`, `${title} Link`)}
             to={path}
           >
             <LazyImage
@@ -58,7 +59,7 @@ const TemplateOneTwo = ({
 
         {showSellingPoints && <SellingPoints sellingPoints={selling_points} />}
         <div className={styles?.excerpt || ''}>
-          {!showSellingPoints &&
+          {!showSellingPoints && showDescription &&
             textWordsLimit(
               description ||
                 sections?.header?.extra_fields?.header_text?.value ||
@@ -115,6 +116,7 @@ TemplateOneTwo.propTypes = {
   height: PropTypes.number,
   wordLimit: PropTypes.number,
   showRoundedRating: PropTypes.bool,
+  showDescription: PropTypes.bool,
 };
 
 export default TemplateOneTwo;

package/src/components/atoms/cards/payment-method/template-three/index.js

@@ -11,6 +11,7 @@ import LazyImage from '~hooks/lazy-image';
 import { imagePrettyUrl } from '~helpers/getters';
 import { getAltText } from '~helpers/image';
 import SellingPoints from '../sellingPoints';
+import useTranslate from '~hooks/useTranslate/useTranslate';
 import styles from './template-three.module.scss';
 
 const TemplateThree = ({
@@ -32,7 +33,7 @@ const TemplateThree = ({
         <div className={styles?.header || ''}>
           <Link
             className={`${styles?.image || ''} payment-method-card-gtm`}
-            aria-label={`${title} Link`}
+            aria-label={useTranslate(`ariaLabel-${title}Link`, `${title} Link`)}
             to={path}
           >
             <LazyImage

package/src/components/atoms/cards/software-provider-card/index.js

@@ -5,6 +5,7 @@ import Link from '~hooks/link';
 import LazyImage from '~hooks/lazy-image';
 import { imagePrettyUrl, textWordsLimit } from '~helpers/getters';
 import { getAltText } from '~helpers/image';
+import useTranslate from '~hooks/useTranslate/useTranslate';
 
 import styles from './software-provider-card.module.scss';
 
@@ -17,7 +18,7 @@ const SoftwareProviderCard = ({
     textOne: 'This game provider has',
     textTwo: 'slots',
   },
-  width =  150,
+  width = 150,
   height = 150,
 }) => {
   const { title, path, relation, sections } = item;
@@ -29,7 +30,7 @@ const SoftwareProviderCard = ({
       <div className={styles?.header || ''}>
         <Link
           className={`${styles?.links || ''} software-provider-card-gtm`}
-          aria-label={`${title} Link`}
+          aria-label={useTranslate(`ariaLabel-${title}Link`, `${title} Link`)}
           to={path}
         >
           <LazyImage

package/src/components/atoms/country-selector/index.js

@@ -47,7 +47,7 @@ const CountrySelector = ({ pageContext }) => {
 
               // const lang = item[0].split('_')[1];
               return (
-                <Link aria-label={item[0]} to={path}>
+                <Link aria-label={useTranslate(`ariaLabel-${item[0]}`, item[0])} to={path}>
                   <img
                     width={32}
                     height={32}

package/src/components/atoms/social-icons/index.js

@@ -35,7 +35,7 @@ const SocialIcons = ({
             socialIcons[key] && (
               <a
                 key={keygen()}
-                aria-label={`${key} Link`}
+                aria-label={useTranslate(`ariaLabel-${key}Link`, `${key} Link`)}
                 href={socialIcons[key]}
                 target="_blank"
                 rel="noreferrer noopener"

package/src/components/molecules/header/variants/payment/template-five/index.js

@@ -8,7 +8,7 @@ import LazyImage from '~hooks/lazy-image';
 import OperatorBanner from '~atoms/header-operator-bannner';
 import Rating from '~atoms/ratings';
 import useTranslate from '~hooks/useTranslate/useTranslate';
-import { TrackingKeys } from '~constants/tracking-api'
+import { TrackingKeys } from '~constants/tracking-api';
 import Verify from '~images/icons/verify';
 
 import styles from './template-five.module.scss';
@@ -27,7 +27,7 @@ const TemplateOneThree = ({
   showRoundedRating = false,
   width = 179,
   height = 179,
-  moduleName = TrackingKeys?.HEADERPAYMENT
+  moduleName = TrackingKeys?.HEADERPAYMENT,
 }) => {
   const [isReadMore, setIsReadMore] = useState(true);
 
@@ -72,13 +72,14 @@ const TemplateOneThree = ({
           role="button"
           onClick={toggleReadMore}
           onKeyDown={toggleReadMore}
-          aria-label="continue reading"
+          aria-label={useTranslate('ariaLabel-continueReading', 'continue reading')}
           tabIndex={0}
           dangerouslySetInnerHTML={{
             __html:
               description.split(' ').length > 60 && isReadMore
-                ? `${textWordsLimit(description, 60)} <span class='${styles.contReadText
-                }'>${useTranslate('cont_read', 'Continue reading')}</span>`
+                ? `${textWordsLimit(description, 60)} <span class='${
+                    styles.contReadText
+                  }'>${useTranslate('cont_read', 'Continue reading')}</span>`
                 : description,
           }}
         />
@@ -90,7 +91,7 @@ const TemplateOneThree = ({
             operator={headerBonus?.value}
             template={pageTemplate}
             clickedElement="header_operator_banner"
-             moduleName={moduleName}
+            moduleName={moduleName}
           />
         </div>
       )}

package/src/components/molecules/header/variants/payment/template-one-three/index.js

@@ -9,7 +9,7 @@ import StarRating from '~molecules/star-rating/one-star';
 import OperatorBanner from '~atoms/header-operator-bannner';
 import Rating from '~atoms/ratings';
 import useTranslate from '~hooks/useTranslate/useTranslate';
-import { TrackingKeys } from '~constants/tracking-api'
+import { TrackingKeys } from '~constants/tracking-api';
 import Verify from '~images/icons/verify';
 
 import styles from './template-one-three.module.scss';
@@ -29,7 +29,7 @@ const TemplateOneThree = ({
   showRoundedRating = false,
   width = 179,
   height = 179,
-  moduleName = TrackingKeys?.HEADERPAYMENT
+  moduleName = TrackingKeys?.HEADERPAYMENT,
 }) => {
   const [isReadMore, setIsReadMore] = useState(true);
 
@@ -98,7 +98,7 @@ const TemplateOneThree = ({
             role="button"
             onClick={toggleReadMore}
             onKeyDown={toggleReadMore}
-            aria-label="continue reading"
+            aria-label={useTranslate('ariaLabel-continueReading', 'continue reading')}
             tabIndex={0}
             dangerouslySetInnerHTML={{
               __html:

package/src/components/molecules/header/variants/payment/template-two/index.js

@@ -8,7 +8,7 @@ import LazyImage from '~hooks/lazy-image';
 import StarRating from '~molecules/star-rating/one-star';
 import OperatorBanner from '~atoms/header-operator-bannner';
 import useTranslate from '~hooks/useTranslate/useTranslate';
-import { TrackingKeys } from '~constants/tracking-api'
+import { TrackingKeys } from '~constants/tracking-api';
 
 import Verify from '~images/icons/verify';
 
@@ -26,7 +26,7 @@ const TemplateTwo = ({
   showRoundedRating = false,
   width = 288,
   height = 288,
-  moduleName = TrackingKeys?.HEADERPAYMENT
+  moduleName = TrackingKeys?.HEADERPAYMENT,
 }) => {
   const [isReadMore, setIsReadMore] = useState(true);
   const descriptionRef = useRef(null);
@@ -71,18 +71,20 @@ const TemplateTwo = ({
           {description && (
             <div
               ref={descriptionRef}
-              className={`${styles.desc} ${description.split(' ').length > 60 && styles.showReadMore
-                }`}
+              className={`${styles.desc} ${
+                description.split(' ').length > 60 && styles.showReadMore
+              }`}
               role="button"
               onClick={toggleReadMore}
               onKeyDown={toggleReadMore}
-              aria-label="continue reading"
+              aria-label={useTranslate('ariaLabel-continueReading', 'continue reading')}
               tabIndex={0}
               dangerouslySetInnerHTML={{
                 __html:
                   description.split(' ').length > 60 && isReadMore
-                    ? `${textWordsLimit(description, 60)} <span class='${styles.contReadText
-                    }'>${useTranslate('cont_read', 'Continue reading')}</span>`
+                    ? `${textWordsLimit(description, 60)} <span class='${
+                        styles.contReadText
+                      }'>${useTranslate('cont_read', 'Continue reading')}</span>`
                     : description,
               }}
             />