Skip to content

Commit

Permalink
Attemt to fix accessibility problems with <dl> structure
Browse files Browse the repository at this point in the history
  • Loading branch information
Adamik10 committed Dec 18, 2024
1 parent dbe2688 commit 3d4ebde
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 45 deletions.
29 changes: 19 additions & 10 deletions components/shared/infoBox/InfoBox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,20 +28,29 @@ const InfoBox = ({ work }: InfoBoxProps) => {
</div>
<dl className="flex-1">
{!!selectedManifestation?.audience?.ages.length && (
<InfoBoxItem
term="Alder"
description={selectedManifestation.audience.ages.map(age => age.display)}
/>
<>
<hr className="border-border not-first:mt-7" />
<InfoBoxItem
term="Alder"
description={selectedManifestation.audience.ages.map(age => age.display)}
/>
</>
)}
{!!selectedManifestation?.series?.length && (
<InfoBoxItem term="Serie" description={getSeriesInfo(selectedManifestation)} />
<>
<hr className="border-border not-first:mt-7" />
<InfoBoxItem term="Serie" description={getSeriesInfo(selectedManifestation)} />
</>
)}
{!!selectedManifestation?.subjects.all?.length && (
<InfoBoxItem
term="Emneord"
description={selectedManifestation.subjects.all.map(subject => subject.display)}
isButtons
/>
<>
<hr className="border-border not-first:mt-7" />
<InfoBoxItem
term="Emneord"
description={selectedManifestation.subjects.all.map(subject => subject.display)}
isButtons
/>
</>
)}
</dl>
</div>
Expand Down
90 changes: 58 additions & 32 deletions components/shared/infoBox/InfoBoxDetails.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,57 +23,83 @@ 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 && (
<InfoBoxItem
term="Type"
description={selectedManifestation.materialTypes.map(
type => type.materialTypeGeneral.display
)}
/>
<>
<hr className="border-border not-first:mt-7" />
<InfoBoxItem
term="Type"
description={selectedManifestation.materialTypes.map(
type => type.materialTypeGeneral.display
)}
/>
</>
)}
{!!selectedManifestation?.languages?.main?.length && (
<InfoBoxItem
term="Sprog"
description={selectedManifestation.languages.main.map(language => language.display)}
/>
<>
<hr className="border-border not-first:mt-7" />
<InfoBoxItem
term="Sprog"
description={selectedManifestation.languages.main.map(
language => language.display
)}
/>
</>
)}
{!!selectedManifestation?.physicalDescription?.summaryFull && (
<InfoBoxItem
term="Omfang"
description={[selectedManifestation.physicalDescription.summaryFull]}
/>
<>
<hr className="border-border not-first:mt-7" />
<InfoBoxItem
term="Omfang"
description={[selectedManifestation.physicalDescription.summaryFull]}
/>
</>
)}
{!!selectedManifestation?.dateFirstEdition?.display ||
(work.workYear?.display && (
<InfoBoxItem
term="Udgivelsesår"
description={[
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,
]}
/>
</>
))}
</dl>
<dl className="flex-1">
{!!selectedManifestation?.genreAndForm?.length && (
<InfoBoxItem term="Genre" description={selectedManifestation.genreAndForm} />
<>
<hr className="border-border not-first:mt-7" />
<InfoBoxItem term="Genre" description={selectedManifestation.genreAndForm} />
</>
)}
{!!selectedManifestation?.identifiers?.length &&
!!getIsbnsFromManifestation(selectedManifestation)?.length && (
<InfoBoxItem
term="ISBN"
description={getIsbnsFromManifestation(selectedManifestation)}
/>
<>
<hr className="border-border not-first:mt-7" />
<InfoBoxItem
term="ISBN"
description={getIsbnsFromManifestation(selectedManifestation)}
/>
</>
)}
{!!selectedManifestation?.publisher?.length && (
<InfoBoxItem term="Forlag" description={selectedManifestation.publisher} />
<>
<hr className="border-border not-first:mt-7" />
<InfoBoxItem term="Forlag" description={selectedManifestation.publisher} />
</>
)}
{(!!selectedManifestation?.contributors?.length ||
!!selectedManifestation?.contributorsFromDescription?.length) && (
<InfoBoxItem
term="Bidragsyder"
description={selectedManifestation?.contributors
.map(item => item.display)
.concat(selectedManifestation?.contributorsFromDescription)}
/>
<>
<hr className="border-border not-first:mt-7" />
<InfoBoxItem
term="Bidragsyder"
description={selectedManifestation?.contributors
.map(item => item.display)
.concat(selectedManifestation?.contributorsFromDescription)}
/>
</>
)}
</dl>
</div>
Expand Down
5 changes: 2 additions & 3 deletions components/shared/infoBox/InfoBoxItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,16 @@ const InfoBoxItem = ({ term, description, isButtons = false }: InfoBoxItemProps)

return (
<>
<hr className="border-border not-first:mt-7" />
<dt className="mt-2 text-typo-caption">{term}</dt>
{!isButtons && <dd className="mt-6 text-typo-heading-5">{description.join(", ")}</dd>}
{isButtons && (
<div className="mt-6 flex flex-row flex-wrap gap-2">
<dd className="mt-6 flex flex-row flex-wrap gap-2">
{description.map(item => (
<Button key={item} size={"sm"} className="px-3" onClick={() => handleClick(item)}>
{item}
</Button>
))}
</div>
</dd>
)}
</>
)
Expand Down

0 comments on commit 3d4ebde

Please sign in to comment.