modals described by

Author: Sine Jespersen

src/stories/Library/Buttons/button-ui/ButtonUI.tsx

@@ -19,6 +19,7 @@ export type ButtonUIProps = {
   classes?: string;
   ariaLabel: string;
   onClick?: () => void;
+  describe?: string;
 };
 
 export const ButtonUI: React.FC<ButtonUIProps> = ({
@@ -27,6 +28,7 @@ export const ButtonUI: React.FC<ButtonUIProps> = ({
   children,
   onClick,
   ariaLabel,
+  describe,
 }) => {
   const getChild = () => {
     if (content.kind === "LABEL") return content.label;
@@ -42,6 +44,7 @@ export const ButtonUI: React.FC<ButtonUIProps> = ({
   return (
     <button
       type="button"
+      aria-describedby={describe}
       className={`btn-ui ${classes || ""}`}
       onClick={onClick}
       aria-label={ariaLabel}

src/stories/Library/Modals/ModalShared.tsx

@@ -25,9 +25,16 @@ export function ModalFallbackButton({
   );
 }
 
-export function ModalCloseButton({ toggleModal }: { toggleModal: () => void }) {
+export function ModalCloseButton({
+  toggleModal,
+  idAriaDescribedBy,
+}: {
+  toggleModal: () => void;
+  idAriaDescribedBy: string;
+}) {
   return (
     <ButtonUI
+      describe={idAriaDescribedBy}
       onClick={toggleModal}
       classes="modal-btn-close"
       ariaLabel="close modal"

src/stories/Library/Modals/modal-cta/ModalCTA.tsx

@@ -31,7 +31,13 @@ export const ModalCTA: React.FC<ModalCTAProps> = ({ title, showModal }) => {
         shownModal ? "modal-show" : ""
       }`}
     >
-      <ModalCloseButton toggleModal={toggleModal} />
+      <div className="modal__screen-reader-description" id="describemodal">
+        Denne modal dækker sidens indhold, og er en demo
+      </div>
+      <ModalCloseButton
+        idAriaDescribedBy="describemodal"
+        toggleModal={toggleModal}
+      />
       <div className="modal-cta__container">
         <h2 className="text-header-h2">{title}</h2>
         <div className="mt-48 color-secondary-gray">

src/stories/Library/Modals/modal-details/ModalDetails.tsx

@@ -125,7 +125,13 @@ export const ModalDetails: React.FC<ModalDetailsProps> = ({
     <div
       className={`modal modal-details ${shoudShowModal ? "modal-show" : ""}`}
     >
-      <ModalCloseButton toggleModal={toggleModal} />
+      <div className="modal__screen-reader-description" id="describemodal">
+        Denne modal dækker sidens indhold, og er en demo
+      </div>
+      <ModalCloseButton
+        idAriaDescribedBy="describemodal"
+        toggleModal={toggleModal}
+      />
       <div className="modal-details__container">
         <div className="modal-details__header">
           <div className="modal-details__cover">

src/stories/Library/Modals/modal-loan/ModalLoan.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useMemo, useState } from "react";
-
 import { ModalCloseButton, ModalFallbackButton } from "../ModalShared";
 import { Button } from "../../Buttons/button/Button";
 import { Checkbox } from "../../Forms/checkbox/Checkbox";
@@ -171,10 +170,13 @@ export const ModalLoan: React.FC<ModalLoanProps> = ({
         shoulShowModal ? "modal-show" : ""
       }`}
     >
-      <div className="modal__screen-reader-description">
+      <div className="modal__screen-reader-description" id="describemodal">
         Denne modal dækker sidens indhold, og er en demo
       </div>
-      <ModalCloseButton toggleModal={toggleModal} />
+      <ModalCloseButton
+        idAriaDescribedBy="describemodal"
+        toggleModal={toggleModal}
+      />
       <div className="modal-loan__container">
         <div className="modal-loan__header">
           {isExpired && (

src/stories/Library/Modals/modal-pause/ModalPause.tsx

@@ -39,7 +39,13 @@ export const ModalPause: React.FC<ModalPauseProps> = ({
         shouldShowModal ? "modal-show" : ""
       } modal-padding `}
     >
-      <ModalCloseButton toggleModal={toggleModal} />
+      <div className="modal__screen-reader-description" id="describemodal">
+        Denne modal dækker sidens indhold, og er en demo
+      </div>
+      <ModalCloseButton
+        idAriaDescribedBy="describemodal"
+        toggleModal={toggleModal}
+      />
       <div className="modal-pause__container">
         <h3 className="text-header-h3">{title}</h3>
         <div className="mt-48 color-secondary-gray">

src/stories/Library/Modals/modal-search/ModalSearch.tsx

@@ -28,7 +28,13 @@ export const ModalSearch: React.FC<ModalSearchProps> = ({ showModal }) => {
         shouldShowModal ? "modal-show" : ""
       } modal-padding `}
     >
-      <ModalCloseButton toggleModal={toggleModal} />
+      <div className="modal__screen-reader-description" id="describemodal">
+        Denne modal dækker sidens indhold, og er en demo
+      </div>
+      <ModalCloseButton
+        idAriaDescribedBy="describemodal"
+        toggleModal={toggleModal}
+      />
       <div className="modal-search__container">
         <h3 className="text-header-h3">Gem søgning</h3>
         <div className="mt-48 color-secondary-gray">

src/stories/Library/Modals/modal-text/ModalText.tsx

@@ -47,7 +47,13 @@ export const ModalText = (props: ModalTextProps) => {
         showModal ? "modal-show" : ""
       } modal-padding`}
     >
-      <ModalCloseButton toggleModal={toggleModal} />
+      <div className="modal__screen-reader-description" id="describemodal">
+        Denne modal dækker sidens indhold, og er en demo
+      </div>
+      <ModalCloseButton
+        idAriaDescribedBy="describemodal"
+        toggleModal={toggleModal}
+      />
       <div className="modal-text__container color-secondary-gray">
         <h3 className="text-header-h3">{title}</h3>