Merge pull request #420 from brandleadership/next-no-typescript

Next no typescript
brandleadership · Oct 11, 2024 · 5a04b18 · 5a04b18
2 parents 78624ec + 772ee2a
commit 5a04b18
Show file tree

Hide file tree

Showing 93 changed files with 765 additions and 304 deletions.
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://stadler-prototyping-git-fix-train-carousel-images-stadler-rail.vercel.app/api/sitemap.xml
diff --git a/src/app/[lang]/sitemap.js b/src/app/[lang]/sitemap.js
@@ -40,11 +40,24 @@ export default async function sitemap() {
         const paths = [];
         const langToFilter = ['en', 'de'];
 
+        // Define an array of keywords to exclude
+        const excludedKeywords = ['test', 'config'];
+
         Object.keys(links).forEach((uuid) => {
             const link = links[uuid];
             const real_path = link.real_path;
 
+            // Exclude folders and links with excluded keywords in their slug or path
             if (link.is_folder) return;
+            if (
+                excludedKeywords.some(
+                    (keyword) =>
+                        link.slug.includes(keyword) ||
+                        real_path.includes(keyword)
+                )
+            ) {
+                return; // Skip this link if it matches the exclusion criteria
+            }
 
             langToFilter.forEach((lang) => {
                 let translated_item = null;

diff --git a/src/components/elements/ButtonPrimary.js b/src/components/elements/ButtonPrimary.js
@@ -14,6 +14,7 @@ export default function ButtonPrimary(props) {
     return (
         <div style={containerStyles}>
             <motion.a
+                tabIndex="1"
                 initial="rest"
                 whileTap="hover"
                 whileHover="hover"

diff --git a/src/components/elements/ButtonSecondary.js b/src/components/elements/ButtonSecondary.js
@@ -31,6 +31,7 @@ export default function Button({
     return (
         <div style={containerStyles}>
             <motion.a
+                tabIndex="1"
                 className={secondaryButtonStyles}
                 href={href ?? '#'}
                 initial="rest"

diff --git a/src/components/elements/LanguageSwitcher.js b/src/components/elements/LanguageSwitcher.js
@@ -46,11 +46,20 @@ const LanguageSwitcher = () => {
             }
         };
 
+        const handleEscapeKey = (event) => {
+            if (event.key === 'Escape') {
+                setIsOpen(false);
+            }
+        };
+
         document.addEventListener('mousedown', handleClickOutside);
+        document.addEventListener('keydown', handleEscapeKey);
+
         return () => {
             document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener('keydown', handleEscapeKey);
         };
-    }, [dropdownRef]);
+    }, []);
 
     const handleKeyDown = (event) => {
         if (event.key === 'Enter' || event.key === ' ') {
@@ -62,10 +71,12 @@ const LanguageSwitcher = () => {
     return (
         <div ref={dropdownRef}>
             <button
+                tabIndex="1"
+                aria-expanded={isOpen}
                 type="button"
                 onClick={() => setIsOpen((isOpen) => !isOpen)}
                 onKeyDown={handleKeyDown}
-                className="inline-flex items-center rounded-lg py-2.5 text-base font-medium text-primarySolid-800 hover:bg-greySolid-30 hover:text-primary focus:outline-none dark:text-greySolid-300 dark:hover:bg-greySolid-600 lg:px-5"
+                className="inline-flex items-center rounded-lg py-2.5 text-base font-medium text-primarySolid-800 hover:bg-greySolid-30 hover:text-primary lg:px-5"
             >
                 {currentLocale === 'en' ? 'English' : 'Deutsch'}
                 <svg
@@ -89,15 +100,22 @@ const LanguageSwitcher = () => {
                 variants={variantsLang}
                 initial="closed"
                 style={{ display: isOpen ? 'block' : 'none' }}
-                className="w-48 list-none divide-y divide-greySolid-100 rounded bg-white text-base shadow hover:cursor-pointer dark:bg-greySolid-600 lg:absolute lg:top-14 lg:my-4"
+                className="w-48 list-none divide-y divide-greySolid-100 rounded bg-white text-base shadow hover:cursor-pointer  lg:absolute lg:top-14 lg:my-4"
                 id="language-dropdown"
             >
                 <ul className="py-1" role="menu">
                     <li role="none">
                         <a
+                            tabIndex="1"
                             role="menuitem"
                             onClick={handleChange}
+                            onKeyDown={(e) => {
+                                if (e.key === 'Enter' || e.key === ' ')
+                                    handleChange();
+                            }}
                             className="block px-4 py-2 text-sm text-greySolid-600 hover:bg-greySolid-100 dark:text-greySolid-400 dark:hover:bg-greySolid-600 dark:hover:text-white"
+
+
                         >
                             <div className="inline-flex items-center">
                                 {currentLocale === 'en' ? 'German' : 'Englisch'}

diff --git a/src/components/elements/Logo.js b/src/components/elements/Logo.js
@@ -4,11 +4,11 @@ import ButtonUrlRenderer from '../helpers/ButtonUrlRenderer';
 
 export default function Logo({ blok }) {
     return (
-        <Link href={ButtonUrlRenderer(blok.LinkLogo)}>
+        <Link tabIndex="1" href={ButtonUrlRenderer(blok.LinkLogo)}>
             <img
                 src={blok.Logo.filename}
                 className="h-4 lg:h-6"
-                alt="Stadler Logo"
+                alt={blok.Logo.filename.alt ?? 'Stadler Logo'}
             />
         </Link>
     );

diff --git a/src/components/elements/Submenu.js b/src/components/elements/Submenu.js
@@ -26,6 +26,7 @@ export default function Submenu({
         >
             <div className="lg:flex lg:flex-col lg:bg-primaryTrans-100 lg:p-24 lg:text-center">
                 <a
+                    tabIndex="1"
                     href={ButtonUrlRenderer(mainLinkUrl)}
                     className="lg:text-primary"
                 >
@@ -37,6 +38,7 @@ export default function Submenu({
             </div>
             <motion.div className="flex flex-col lg:grid lg:w-2/12 lg:content-center">
                 <a
+                    tabIndex="1"
                     className="lg:flex lg:justify-between lg:py-4 lg:text-primarySolid-600 lg:hover:text-primary"
                     href={ButtonUrlRenderer(subLinkOne)}
                 >
@@ -47,6 +49,7 @@ export default function Submenu({
                     />
                 </a>
                 <a
+                    tabIndex="1"
                     className="lg:flex lg:justify-between lg:py-4 lg:text-primarySolid-600 lg:hover:text-primary"
                     href={ButtonUrlRenderer(subLinkTwo)}
                 >
@@ -58,6 +61,7 @@ export default function Submenu({
                 </a>
                 {subLinkThree ? (
                     <a
+                        tabIndex="1"
                         className="lg:flex lg:justify-between lg:py-4 lg:text-primarySolid-600 lg:hover:text-primary"
                         href={ButtonUrlRenderer(subLinkThree)}
                     >

diff --git a/src/components/helpers/RichTextRenderer.js b/src/components/helpers/RichTextRenderer.js
@@ -47,6 +47,7 @@ const RichTextRenderer = (props) => {
                             // External links: map to <a>
                             return (
                                 <a
+                                    tabIndex="1"
                                     className="text-primary"
                                     href={href}
                                     target={target}
@@ -58,6 +59,7 @@ const RichTextRenderer = (props) => {
                         // Internal links: map to <Link>
                         return (
                             <a
+                                tabIndex="1"
                                 className="text-primary"
                                 target={target}
                                 href={href}

diff --git a/src/components/sections/AccordionContactItem.js b/src/components/sections/AccordionContactItem.js
@@ -7,15 +7,16 @@ const AccordionContactItem = ({ blok }) => {
     return (
         <ul {...storyblokEditable(blok)} className="mb-8">
             <li className="mb-2">
-                <p className="text-base font-medium text-black dark:text-greySolid-400 lg:text-xl">
+                <p className="text-base font-medium text-black lg:text-xl">
                     {blok?.contact_name}
                 </p>
             </li>
             <li className="mb-2">
                 <div className="group-hover:text-primary">
                     <a
+                        tabIndex="1"
                         href="tel:+496170961709"
-                        className="flex cursor-pointer items-center text-black transition-all hover:text-primary dark:text-greySolid-400"
+                        className="flex cursor-pointer items-center text-black transition-all hover:text-primary"
                     >
                         <span className="mr-2">
                             <PhoneIcon
@@ -30,8 +31,9 @@ const AccordionContactItem = ({ blok }) => {
             <li className="mb-2">
                 <div className="group-hover:text-primary">
                     <a
+                        tabIndex="1"
                         href="mailto:[email protected]"
-                        className="flex cursor-pointer items-center text-black transition-all hover:text-primary dark:text-greySolid-400"
+                        className="flex cursor-pointer items-center text-black transition-all hover:text-primary"
                     >
                         <span className="mr-2">
                             <MailIcon

diff --git a/src/components/sections/AccordionGrid.js b/src/components/sections/AccordionGrid.js
@@ -8,7 +8,7 @@ const AccordionGrid = ({ blok }) => {
         <section
             id={blok.anchor}
             {...storyblokEditable(blok)}
-            className="bg-white py-16 dark:bg-greySolid-800 lg:py-24"
+            className="bg-white py-16 lg:py-24"
         >
             <SmallWidth>
                 <div className="mx-auto max-w-screen-xl">

diff --git a/src/components/sections/AccordionLocations.js b/src/components/sections/AccordionLocations.js
@@ -16,8 +16,9 @@ const AccordionLocations = ({ blok }) => {
     return (
         <div className="col-span-12" {...storyblokEditable(blok)}>
             <div
+                tabIndex="1"
                 onClick={handleAccordionClick}
-                className="cursor-pointer border-b border-greySolid-100 bg-white text-greySolid-800 dark:border-greySolid-600 dark:bg-greySolid-800 dark:text-white"
+                className="cursor-pointer border-b border-greySolid-100 bg-white text-greySolid-800"
             >
                 <div className="flex w-full flex-col py-5 font-medium text-greySolid-600 rtl:text-right">
                     <div className="flex">
@@ -52,26 +53,35 @@ const AccordionLocations = ({ blok }) => {
                         </div>
                         <div>
                             <button
+                                tabIndex="1"
                                 type="button"
                                 className={`flex w-full items-center justify-between text-left font-medium ${
                                     isActive
-                                        ? 'bg-white text-greySolid-800 dark:text-white'
-                                        : 'text-greySolid-600 dark:text-greySolid-400'
+                                        ? 'bg-white text-greySolid-800'
+                                        : 'text-greySolid-600'
                                 }`}
                                 onClick={handleAccordionClick}
                                 aria-expanded={isActive}
                             >
-                                <ChevronDown
-                                    styles={
-                                        isActive ? 'fill-primary' : 'fill-black'
-                                    }
-                                />
+                                <div
+                                    className={`${
+                                        isActive ? 'rotate-180' : 'rotate-0'
+                                    } `}
+                                >
+                                    <ChevronDown
+                                        styles={
+                                            isActive
+                                                ? 'fill-primary'
+                                                : 'fill-black'
+                                        }
+                                    />{' '}
+                                </div>
                             </button>
                         </div>
                     </div>
                 </div>
                 {isActive && (
-                    <div className="border-t border-greySolid-100 px-2 py-5 dark:border-greySolid-600 lg:p-5">
+                    <div className="border-t border-greySolid-100 px-2 py-5 lg:p-5">
                         <div className="flex flex-col items-start justify-start lg:flex-row">
                             <div className="mb-4 w-9/12 lg:mb-0">
                                 <div className="mb-4 flex items-center justify-start">
@@ -89,6 +99,7 @@ const AccordionLocations = ({ blok }) => {
                                 <div className="mb-2 flex items-center justify-start text-primary">
                                     <PinIcon />
                                     <a
+                                        tabIndex="1"
                                         className="cursor-pointer"
                                         href={blok?.link_google_maps?.url}
                                     >
@@ -101,13 +112,11 @@ const AccordionLocations = ({ blok }) => {
                             <img
                                 src={blok?.image?.filename}
                                 className="flex md:w-3/12"
-                                alt="Stadler Office image"
+                                alt={blok.image.alt ?? 'Stadler Office image'}
                             />
                         </div>
-                        <div className="pt-8">
-                            <p className="mb-2 text-black dark:text-greySolid-400">
-                                <RichTextRenderer text={blok?.text} />
-                            </p>
+                        <div className="mb-2 pt-8 text-black">
+                            <RichTextRenderer text={blok?.text} />
                         </div>
                     </div>
                 )}

diff --git a/src/components/sections/AccordionTableItem.js b/src/components/sections/AccordionTableItem.js
@@ -4,8 +4,8 @@ import { storyblokEditable } from '@storyblok/react/rsc';
 const AccordionTableItem = ({ blok }) => {
     return (
         <div {...storyblokEditable(blok)}>
-            <table className="w-full text-left text-sm text-greySolid-600 dark:text-greySolid-400 rtl:text-right">
-                <thead className="bg-primarySolid-50 text-xs uppercase text-black dark:bg-greySolid-600 dark:text-greySolid-400">
+            <table className="w-full text-left text-sm text-greySolid-600 rtl:text-right">
+                <thead className="bg-primarySolid-50 text-xs uppercase text-black">
                     <tr>
                         {blok?.table.thead.map((th, index) => (
                             <th
@@ -20,10 +20,7 @@ const AccordionTableItem = ({ blok }) => {
                 </thead>
                 <tbody>
                     {blok?.table.tbody.map((tr, rowIndex) => (
-                        <tr
-                            key={rowIndex}
-                            className="border-b bg-white dark:border-greySolid-600 dark:bg-black"
-                        >
+                        <tr key={rowIndex} className="border-b bg-white">
                             {tr.body.map((td, colIndex) => (
                                 <td key={colIndex} className="px-6 py-4">
                                     {td.value}

diff --git a/src/components/sections/AccordionTabsTableWrapper.js b/src/components/sections/AccordionTabsTableWrapper.js
@@ -20,6 +20,7 @@ const AccordionTabsTableWrapper = ({ blok }) => {
             >
                 {blok.year_wrapper.map((nestedBlok, index) => (
                     <button
+                        tabIndex="1"
                         key={nestedBlok._uid}
                         type="button"
                         id={`tab-${index}`}

diff --git a/src/components/sections/AccordionTextDateDownloadItem.js b/src/components/sections/AccordionTextDateDownloadItem.js
@@ -40,12 +40,13 @@ const AccordionTextDateDownloadItem = ({ blok }) => {
     return (
         <tr
             {...storyblokEditable(blok)}
-            className="whitespace-nowrap border-b bg-white text-base text-black last:mb-4 last:border-b-0 dark:border-greySolid-600 dark:bg-black"
+            className="whitespace-nowrap border-b bg-white text-base text-black last:mb-4 last:border-b-0"
         >
             <td className="px-6 py-4 font-medium">{blok?.title}</td>
             <td className="px-6 py-4">{DateFormatter(blok?.text_date)}</td>
             <td className="px-6 py-4 text-center">
                 <a
+                    tabIndex="1"
                     target="_blank"
                     ref={investorsDE}
                     className="font-medium text-primary"
@@ -57,6 +58,7 @@ const AccordionTextDateDownloadItem = ({ blok }) => {
             </td>
             <td className="px-6 py-4 text-center">
                 <a
+                    tabIndex="1"
                     target="_blank"
                     ref={investorsEN}
                     className="font-medium text-primary"

diff --git a/src/components/sections/AccordionWrapper.js b/src/components/sections/AccordionWrapper.js
@@ -13,19 +13,20 @@ const AccordionWrapper = ({ blok }) => {
         <div {...storyblokEditable(blok)}>
             <h2 className="mb-2">
                 <button
+                    tabIndex="1"
                     type="button"
                     className={`flex w-full items-center justify-between border-b border-greySolid-100 py-5 text-left text-base font-medium lg:text-xl ${
-                        isActive
-                            ? 'text-primary dark:text-white'
-                            : 'text-black dark:text-greySolid-400'
+                        isActive ? 'text-primary' : 'text-black'
                     }`}
                     onClick={handleAccordionClick}
                     aria-expanded={isActive}
                 >
                     <span>{blok?.title}</span>
-                    <ChevronDown
-                        styles={isActive ? 'fill-primary' : 'fill-black'}
-                    />
+                    <div className={`${isActive ? 'rotate-180' : 'rotate-0'} `}>
+                        <ChevronDown
+                            styles={isActive ? 'fill-primary' : 'fill-black'}
+                        />
+                    </div>
                 </button>
             </h2>
             <div className={`${isActive ? '' : 'hidden'}`}>

diff --git a/src/components/sections/AccordionYearWrapper.js b/src/components/sections/AccordionYearWrapper.js
@@ -16,7 +16,7 @@ const AccordionYearWrapper = ({ blok, isActive }) => {
                         transition={{ duration: 0.2 }}
                     >
                         <div
-                            className={`col-span-12 mt-10 max-w-full overflow-x-auto ${isActive ? '' : 'hidden'} w-full text-left text-sm text-greySolid-600 dark:text-greySolid-400 rtl:text-right`}
+                            className={`col-span-12 mt-10 max-w-full overflow-x-auto ${isActive ? '' : 'hidden'} w-full text-left text-sm text-greySolid-600 rtl:text-right`}
                         >
                             <table className="w-full">
                                 <thead className="whitespace-nowrap bg-primarySolid-50 text-xs font-bold uppercase text-black">

diff --git a/src/components/sections/AdHocMedienmitteilungen.js b/src/components/sections/AdHocMedienmitteilungen.js
@@ -48,6 +48,7 @@ function AdHocMedienmitteilungen({ blok }) {
                     {articles[0] &&
                         articles.map((article) => (
                             <a
+                                tabIndex="1"
                                 href={`/${article.full_slug}`}
                                 className="group mb-6 transition-all"
                                 key={article.uuid}
@@ -56,7 +57,10 @@ function AdHocMedienmitteilungen({ blok }) {
                                     <img
                                         src={article.content.image.filename}
                                         className="h-full w-full object-cover transition-all group-hover:scale-110"
-                                        alt="Article Medienmitteilungen image"
+                                        alt={
+                                            article.content.image.filename.alt ??
+                                            'Article Medienmitteilungen image'
+                                        }
                                     />
                                 </div>
                                 <div className="mb-1 mt-4 flex flex-wrap">