Fix(web): Use correct id in Scrollable Modal

lmc-eu · May 21, 2024 · 3084afb · 3084afb
1 parent a4675b8
commit 3084afb
Showing 1 changed file with 8 additions and 8 deletions.
diff --git a/packages/web/src/scss/components/Modal/index.html b/packages/web/src/scss/components/Modal/index.html
@@ -458,30 +458,30 @@ <h2 id="example-long-content-title" class="ModalHeader__title">
       type="button"
       class="Button Button--primary Button--medium"
       data-spirit-toggle="modal"
-      data-spirit-target="#example-non-scrolling-modal"
-      aria-controls="example-non-scrolling-modal"
+      data-spirit-target="#example-scrolling-modal"
+      aria-controls="example-scrolling-modal"
       aria-expanded="false"
     >
       Open Modal with Scrolling Inside
     </button>
 
     <!-- Modal: start -->
-    <dialog id="example-non-scrolling-modal" class="Modal Modal--center" aria-labelledby="example-non-scrolling-modal-title">
+    <dialog id="example-scrolling-modal" class="Modal Modal--center" aria-labelledby="example-scrolling-modal-title">
 
       <!-- ModalDialog: start -->
       <article class="ModalDialog ModalDialog--scrollable">
 
         <!-- ModalHeader: start -->
         <header class="ModalHeader">
-          <h2 id="example-non-scrolling-modal-title" class="ModalHeader__title">
+          <h2 id="example-scrolling-modal-title" class="ModalHeader__title">
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia perferendis reprehenderit, voluptate. Cum delectus dicta
           </h2>
           <button
             type="button"
             class="Button Button--tertiary Button--square Button--medium"
             data-spirit-dismiss="modal"
-            data-spirit-target="#example-non-scrolling-modal"
-            aria-controls="example-non-scrolling-modal"
+            data-spirit-target="#example-scrolling-modal"
+            aria-controls="example-scrolling-modal"
             aria-expanded="false"
           >
             <svg width="24" height="24" aria-hidden="true">
@@ -526,15 +526,15 @@ <h2 id="example-non-scrolling-modal-title" class="ModalHeader__title">
               type="button"
               class="Button Button--primary Button--medium"
               data-spirit-dismiss="modal"
-              data-spirit-target="#example-non-scrolling-modal"
+              data-spirit-target="#example-scrolling-modal"
             >
               Primary action
             </button>
             <button
               type="button"
               class="Button Button--secondary Button--medium"
               data-spirit-dismiss="modal"
-              data-spirit-target="#example-non-scrolling-modal"
+              data-spirit-target="#example-scrolling-modal"
             >
               Secondary action
             </button>