Fix Safari bug for results page

package.json

@@ -46,7 +46,7 @@
     "@babel/preset-typescript": "^7.22.5",
     "@tailwindcss/forms": "^0.5.4",
     "@testing-library/dom": "^9.3.1",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.3",
     "@types/node": "^20.4.2",
@@ -59,7 +59,7 @@
     "babel-preset-gatsby": "^3.11.0",
     "eslint": "^8.45.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-import-resolver-typescript": "^3.5.5",
     "eslint-plugin-formatjs": "^4.10.3",
     "eslint-plugin-import": "^2.27.5",
@@ -74,7 +74,7 @@
     "jest-environment-jsdom": "^29.6.1",
     "postcss": "^8.4.26",
     "prettier": "^3.0.0",
-    "prettier-plugin-tailwindcss": "^0.4.1",
+    "prettier-plugin-tailwindcss": "^0.5.7",
     "tailwindcss": "^3.3.3",
     "ts-jest": "^29.1.1",
     "tsconfig-paths-webpack-plugin": "^4.1.0",

src/components/FAQ/FAQ.tsx → src/components/Disclosure/DisclosureList.tsx

@@ -4,7 +4,7 @@ type Props = {
   children: React.ReactNode
 }
 
-export const FAQ: React.FC<Props> = ({ children }) => {
+export const DisclosureList: React.FC<Props> = ({ children }) => {
   return (
     <dl className="space-y-6 divide-y divide-gray-200 border-y pb-6 ">
       {children}

src/components/Disclosure/DisclosureListItem.tsx

@@ -0,0 +1,64 @@
+import classNames from 'classnames'
+import { Disclosure } from '@headlessui/react'
+import { ChevronDownIcon } from '@heroicons/react/24/outline'
+import React from 'react'
+
+type Props = {
+  title: string
+  children: React.ReactNode
+  no?: number
+}
+
+export const DisclosureListItem: React.FC<Props> = ({
+  title,
+  children,
+  no,
+}) => {
+  return (
+    <Disclosure as="div" key={title} className="pt-6">
+      {({ open }) => (
+        <>
+          <dt className="text-lg">
+            <Disclosure.Button className="flex w-full items-start justify-between text-left text-gray-400 gap-2">
+              <div className="flex gap-6 items-center">
+                {no && (
+                  <span className="flex h-10 w-10 flex-none items-center justify-center rounded-full bg-rs8-pink pt-1 text-white shadow-lg">
+                    {no}
+                  </span>
+                )}
+                <span className="font-medium text-gray-900">{title}</span>
+              </div>
+              <span className="flex h-7 items-center">
+                <ChevronDownIcon
+                  className={classNames(
+                    open ? '-rotate-180' : 'rotate-0',
+                    'h-6 w-6 transform',
+                  )}
+                  aria-hidden="true"
+                />
+              </span>
+            </Disclosure.Button>
+          </dt>
+          <Disclosure.Panel
+            as="dd"
+            className={classNames(
+              'mt-3 lg:pr-12 prose',
+              'text-gray-500',
+              'prose-strong:text-gray-500',
+              'max-w-full',
+              'prose-div:max-w-full',
+              'text-sm md:text-[16px]',
+              'prose-h1:text-base md:prose-h1:text-lg', // h1 size
+              'prose-h2:text-sm md:prose-h2:text-[16px]', // h2 size
+              'prose-h3:text-sm md:prose-h3:text-[16px]', // h3 size
+              'leading-normal md:leading-normal prose-p:leading-normal md:prose-p:leading-normal prose-li:leading-relaxed md:prose-li:leading-relaxed',
+              'prose-ul:list-disc prose-ul:my-6 prose-li:text-gray-500 prose-ul:ml-4',
+            )}
+          >
+            {children}
+          </Disclosure.Panel>
+        </>
+      )}
+    </Disclosure>
+  )
+}

src/components/Layout/Navigation/Hero/Hero.tsx

@@ -33,11 +33,7 @@ export const Hero: React.FC<Props> = ({ participation }) => {
             <div className="p-4 text-center text-[20px] md:text-[32px] md:leading-10">
               Bürgerbeteiligung abgeschlossen
             </div>
-            <Link
-              button
-              className="z-20 rounded-lg bg-rs8-pink text-sm font-normal text-white"
-              to="/beteiligung"
-            >
+            <Link button className="z-20" to="/beteiligung">
               Zu den Ergebnissen
             </Link>
           </div>

src/components/Layout/ScrollTopLink/ScrollTopLink.tsx

@@ -27,6 +27,7 @@ export const ScrollTopLink: React.FC = () => {
         type="button"
         onClick={() => window.scrollTo(0, 0)}
         className="mt-10 flex no-underline"
+        aria-label="Zum Seitenanfang springen"
       >
         <ArrowUpCircleIcon className="fixed bottom-16 right-8 z-40 w-14 rounded-full bg-white text-rs8-pink hover:text-rs8-pink" />
       </button>

src/components/Link/Link.tsx

@@ -4,7 +4,7 @@ import { Link as GatsbyLink } from 'gatsby'
 
 const baseStyles = 'text-rs8-pink hover:text-rs8-blue'
 export const linkStyles = `${baseStyles} underline`
-export const buttonStyles = `${baseStyles} rounded-full border border-rs8-pink px-6 pt-4 pb-3`
+export const buttonStyles = `${baseStyles} rounded-lg bg-rs8-pink active:ring active:bg-rs8-pink active:ring-[#1E293B] text-white hover:text-white hover:bg-[#1E293B] px-6 pt-4 pb-3 font-normal inline-block`
 
 type Props = {
   to: string

src/components/PageFaq/PageFaqFaqs.tsx

@@ -1,22 +1,30 @@
 import React from 'react'
-import { FAQ, FAQItem } from '../FAQ'
+
+import { DisclosureList } from '../Disclosure/DisclosureList'
+import { DisclosureListItem } from '../Disclosure/DisclosureListItem'
+import { H2 } from '../Text'
 import { categoizedFaqs } from './categoizedFaqs.const'
+import { Section } from '../Layout'
 
 export const PageFaqFaqs: React.FC = () => {
   return (
-    <div className="mb-10 md:mb-36">
+    <Section>
       {Object.entries(categoizedFaqs).map(([categoryTitle, categoryFaqs]) => {
         return (
-          <section className="m-auto mb-24">
-            <h2 className="text-sky-700">{categoryTitle}</h2>
-            <FAQ>
+          <section key={categoryTitle} className="m-auto mb-24">
+            <H2>{categoryTitle}</H2>
+            <DisclosureList>
               {Object.entries(categoryFaqs).map(([faqTitle, faqBody]) => {
-                return <FAQItem title={faqTitle}>{faqBody}</FAQItem>
+                return (
+                  <DisclosureListItem key={faqTitle} title={faqTitle}>
+                    {faqBody}
+                  </DisclosureListItem>
+                )
               })}
-            </FAQ>
+            </DisclosureList>
           </section>
         )
       })}
-    </div>
+    </Section>
   )
 }

src/components/PageHome/BarChart.tsx

@@ -23,8 +23,8 @@ const CustomizedLabel: ImplicitLabelType = (props) => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg">
       <switch>
-        <foreignObject x={x + 4} y={y - 96} width="70vw" height="150">
-          <div className="flex flex-col justify-end h-24 leading-tight">
+        <foreignObject x={x + 4} y={y - 96} width="90%" height="150">
+          <div className="flex flex-col justify-end h-24 leading-tight fixed">
             <p className="text-sm"> {props.name}</p>
           </div>
         </foreignObject>

src/components/PageHome/PageHomeFaqs.tsx

@@ -1,6 +1,8 @@
 import { StaticImage } from 'gatsby-plugin-image'
 import React from 'react'
-import { FAQ, FAQItem } from '../FAQ'
+
+import { DisclosureList } from '../Disclosure/DisclosureList'
+import { DisclosureListItem } from '../Disclosure/DisclosureListItem'
 import { Section } from '../Layout'
 import { Link, LinkExternal } from '../Link'
 import { Lightbox } from '../PageRoute/Lightbox'
@@ -10,10 +12,10 @@ import { YouTubePreview } from '../YouTubePreview'
 export const PageHomeFaqs: React.FC = () => {
   return (
     <Section>
-      <H2 className="text-center">Häufig gestellte Fragen</H2>
+      <H2>Häufig gestellte Fragen</H2>
 
-      <FAQ>
-        <FAQItem title="Was ist ein Radschnellweg?">
+      <DisclosureList>
+        <DisclosureListItem title="Was ist ein Radschnellweg?">
           <P>
             Radschnellwege sind extrabreite, direkte und möglichst
             kreuzungsfreie Wege, auf denen Radfahrerinnen und Radfahrer jeden
@@ -34,8 +36,8 @@ export const PageHomeFaqs: React.FC = () => {
               />
             }
           />
-        </FAQItem>
-        <FAQItem title="Was zeichnet einen Radschnellweg aus?">
+        </DisclosureListItem>
+        <DisclosureListItem title="Was zeichnet einen Radschnellweg aus?">
           <ul className="list-disc pl-5">
             <li>Gesamtstrecke mindestens fünf Kilometer</li>
             <li>Potenzial von mindestens 2.000 Fahrradfahrten täglich</li>
@@ -58,8 +60,8 @@ export const PageHomeFaqs: React.FC = () => {
             werden für unterschiedliche Führungsformen verbindliche Standards
             festgelegt.
           </P>
-        </FAQItem>
-        <FAQItem title="Was kosten Radschnellwege?">
+        </DisclosureListItem>
+        <DisclosureListItem title="Was kosten Radschnellwege?">
           <P>
             Die Kosten für einen Radschnellweg sind abhängig von seiner Länge,
             den verschiedenen Umbaumaßnahmen im Straßenkörper sowie der Menge an
@@ -103,8 +105,8 @@ export const PageHomeFaqs: React.FC = () => {
               alt="Für ca. 10 Mio. Euro können 0,5 km Autobahn, 2,5 km Hauptverkehrsstraße und 11,1 km Radschnellweg gebaut werden."
             />
           </div>
-        </FAQItem>
-        <FAQItem title="Wie viele Radfahrende fahren denn da später?">
+        </DisclosureListItem>
+        <DisclosureListItem title="Wie viele Radfahrende fahren denn da später?">
           <P>
             Wie kann man sich so einen Radschnellweg eigentlich vorstellen? Wie
             viele Leute fahren denn da, kommt man da zu Fuß überhaupt noch
@@ -132,8 +134,8 @@ export const PageHomeFaqs: React.FC = () => {
               }
             />
           </P>
-        </FAQItem>
-      </FAQ>
+        </DisclosureListItem>
+      </DisclosureList>
       <div className="mt-10 text-center">
         <Link button to="/faq">
           Mehr unter FAQs

src/components/PageHome/PageHomeLocation.tsx

@@ -50,11 +50,7 @@ export const PageHomeLocation: React.FC = () => {
         viele Hinweise und Fragen gesammelt wurden, die Ergebnisse und Antworten
         werden hier in den nächsten Monaten veröffentlicht.
       </P>
-      <Link
-        button
-        className="rounded-lg bg-rs8-pink text-sm font-normal text-white"
-        to="/beteiligung"
-      >
+      <Link button className="mt-2" to="/beteiligung">
         Zu den Ergebnissen
       </Link>
     </Section>

src/components/PageRoute/Lightbox/Lightbox.tsx

@@ -22,7 +22,7 @@ export const Lightbox: React.FC<Props> = ({ image, children }) => {
   return (
     <>
       <div className="group relative text-gray-500">
-        <button type="button" onClick={openModal} className="">
+        <button type="button" onClick={openModal}>
           {image}
           <span className="absolute left-3 top-3 rounded-lg bg-white px-4 pb-2 pt-3 opacity-0 focus:outline-none group-hover:opacity-80">
             Vergrößern
@@ -56,7 +56,11 @@ export const Lightbox: React.FC<Props> = ({ image, children }) => {
                   {image}
                   <div className="mt-2 flex items-center justify-between space-x-4 leading-5">
                     <p className="text-[0.85rem] italic">{children}</p>
-                    <button type="button" className="" onClick={closeModal}>
+                    <button
+                      type="button"
+                      onClick={closeModal}
+                      aria-label="Schließen"
+                    >
                       <XMarkIcon className="w-8" />
                     </button>
                   </div>

src/components/PageRoute/Section/Section.tsx → src/components/PageRoute/Section/PageRouteSection.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { Section } from '~/components/Layout'
 import { TSectionDetails, TSectionHeader } from '../data.const'
 import { SectionDetails } from './SectionDetails'
 import { SectionHeader } from './SectionHeader'
@@ -8,11 +9,11 @@ type Props = {
   details: TSectionDetails[]
 }
 
-export const Section: React.FC<Props> = ({ header, details }) => {
+export const PageRouteSection: React.FC<Props> = ({ header, details }) => {
   return (
-    <>
+    <Section>
       <SectionHeader header={header} />
       <SectionDetails details={details} />
-    </>
+    </Section>
   )
 }

src/components/PageRoute/Section/SectionDetails.tsx

@@ -1,20 +1,31 @@
 import React from 'react'
+
+import { DisclosureList } from '~/components/Disclosure/DisclosureList'
+import { DisclosureListItem } from '~/components/Disclosure/DisclosureListItem'
+import { H3 } from '~/components/Text'
 import { TSectionDetails } from '../data.const/types'
-import { SectionDetailsItem } from './SectionDetailsItem'
 
 type Props = {
   details: TSectionDetails[]
 }
 
 export const SectionDetails: React.FC<Props> = ({ details }) => {
   return (
-    <div className="m-auto mb-20 space-y-6 divide-y divide-white border-y bg-gray-200 px-6 pb-6 md:mx-10 md:px-10">
-      <h3 className="mb-8 mt-14 text-center text-[32px] font-bold text-sky-700">
-        Detailinfos
-      </h3>
-      {details.map((detail) => {
-        return <SectionDetailsItem detail={detail} />
-      })}
+    <div>
+      <H3>Detailinfos</H3>
+      <DisclosureList>
+        {details.map((detail) => {
+          return (
+            <DisclosureListItem
+              key={detail.no}
+              no={detail.no}
+              title={detail.title}
+            >
+              <div>{detail.body}</div>
+            </DisclosureListItem>
+          )
+        })}
+      </DisclosureList>
     </div>
   )
 }