Fix accessibility issues in <dl> list in InfoBox components

danskernesdigitalebibliotek · Dec 18, 2024 · f588377 · f588377
1 parent 3d4ebde
commit f588377
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 77 deletions.
diff --git a/components/shared/infoBox/InfoBox.tsx b/components/shared/infoBox/InfoBox.tsx
@@ -28,29 +28,20 @@ const InfoBox = ({ work }: InfoBoxProps) => {
           </div>
           <dl className="flex-1">
             {!!selectedManifestation?.audience?.ages.length && (
-              <>
-                <hr className="border-border not-first:mt-7" />
-                <InfoBoxItem
-                  term="Alder"
-                  description={selectedManifestation.audience.ages.map(age => age.display)}
-                />
-              </>
+              <InfoBoxItem
+                term="Alder"
+                description={selectedManifestation.audience.ages.map(age => age.display)}
+              />
             )}
             {!!selectedManifestation?.series?.length && (
-              <>
-                <hr className="border-border not-first:mt-7" />
-                <InfoBoxItem term="Serie" description={getSeriesInfo(selectedManifestation)} />
-              </>
+              <InfoBoxItem term="Serie" description={getSeriesInfo(selectedManifestation)} />
             )}
             {!!selectedManifestation?.subjects.all?.length && (
-              <>
-                <hr className="border-border not-first:mt-7" />
-                <InfoBoxItem
-                  term="Emneord"
-                  description={selectedManifestation.subjects.all.map(subject => subject.display)}
-                  isButtons
-                />
-              </>
+              <InfoBoxItem
+                term="Emneord"
+                description={selectedManifestation.subjects.all.map(subject => subject.display)}
+                isButtons
+              />
             )}
           </dl>
         </div>

diff --git a/components/shared/infoBox/InfoBoxDetails.tsx b/components/shared/infoBox/InfoBoxDetails.tsx
@@ -23,83 +23,57 @@ const InfoBoxDetails = ({ work }: InfoBoxDetailsProps) => {
         <div className="flex w-full flex-col gap-grid-gap-3 lg:flex-row lg:gap-44">
           <dl className="flex-1">
             {!!selectedManifestation && (
-              <>
-                <hr className="border-border not-first:mt-7" />
-                <InfoBoxItem
-                  term="Type"
-                  description={selectedManifestation.materialTypes.map(
-                    type => type.materialTypeGeneral.display
-                  )}
-                />
-              </>
+              <InfoBoxItem
+                term="Type"
+                description={selectedManifestation.materialTypes.map(
+                  type => type.materialTypeGeneral.display
+                )}
+              />
             )}
             {!!selectedManifestation?.languages?.main?.length && (
-              <>
-                <hr className="border-border not-first:mt-7" />
-                <InfoBoxItem
-                  term="Sprog"
-                  description={selectedManifestation.languages.main.map(
-                    language => language.display
-                  )}
-                />
-              </>
+              <InfoBoxItem
+                term="Sprog"
+                description={selectedManifestation.languages.main.map(language => language.display)}
+              />
             )}
             {!!selectedManifestation?.physicalDescription?.summaryFull && (
-              <>
-                <hr className="border-border not-first:mt-7" />
-                <InfoBoxItem
-                  term="Omfang"
-                  description={[selectedManifestation.physicalDescription.summaryFull]}
-                />
-              </>
+              <InfoBoxItem
+                term="Omfang"
+                description={[selectedManifestation.physicalDescription.summaryFull]}
+              />
             )}
             {!!selectedManifestation?.dateFirstEdition?.display ||
               (work.workYear?.display && (
-                <>
-                  <hr className="border-border not-first:mt-7" />
-                  <InfoBoxItem
-                    term="Udgivelsesår"
-                    description={[
-                      selectedManifestation?.dateFirstEdition?.display || work.workYear?.display,
-                    ]}
-                  />
-                </>
+                <InfoBoxItem
+                  term="Udgivelsesår"
+                  description={[
+                    selectedManifestation?.dateFirstEdition?.display || work.workYear?.display,
+                  ]}
+                />
               ))}
           </dl>
           <dl className="flex-1">
             {!!selectedManifestation?.genreAndForm?.length && (
-              <>
-                <hr className="border-border not-first:mt-7" />
-                <InfoBoxItem term="Genre" description={selectedManifestation.genreAndForm} />
-              </>
+              <InfoBoxItem term="Genre" description={selectedManifestation.genreAndForm} />
             )}
             {!!selectedManifestation?.identifiers?.length &&
               !!getIsbnsFromManifestation(selectedManifestation)?.length && (
-                <>
-                  <hr className="border-border not-first:mt-7" />
-                  <InfoBoxItem
-                    term="ISBN"
-                    description={getIsbnsFromManifestation(selectedManifestation)}
-                  />
-                </>
+                <InfoBoxItem
+                  term="ISBN"
+                  description={getIsbnsFromManifestation(selectedManifestation)}
+                />
               )}
             {!!selectedManifestation?.publisher?.length && (
-              <>
-                <hr className="border-border not-first:mt-7" />
-                <InfoBoxItem term="Forlag" description={selectedManifestation.publisher} />
-              </>
+              <InfoBoxItem term="Forlag" description={selectedManifestation.publisher} />
             )}
             {(!!selectedManifestation?.contributors?.length ||
               !!selectedManifestation?.contributorsFromDescription?.length) && (
-              <>
-                <hr className="border-border not-first:mt-7" />
-                <InfoBoxItem
-                  term="Bidragsyder"
-                  description={selectedManifestation?.contributors
-                    .map(item => item.display)
-                    .concat(selectedManifestation?.contributorsFromDescription)}
-                />
-              </>
+              <InfoBoxItem
+                term="Bidragsyder"
+                description={selectedManifestation?.contributors
+                  .map(item => item.display)
+                  .concat(selectedManifestation?.contributorsFromDescription)}
+              />
             )}
           </dl>
         </div>

diff --git a/components/shared/infoBox/InfoBoxItem.tsx b/components/shared/infoBox/InfoBoxItem.tsx
@@ -20,6 +20,7 @@ const InfoBoxItem = ({ term, description, isButtons = false }: InfoBoxItemProps)
 
   return (
     <>
+      <hr className="border-border not-first:mt-7" aria-hidden="true" />
       <dt className="mt-2 text-typo-caption">{term}</dt>
       {!isButtons && <dd className="mt-6 text-typo-heading-5">{description.join(", ")}</dd>}
       {isButtons && (