Improve PrivacyConsentDialog.html.twig accessibility

sumocoders · Aug 28, 2023 · c5b4f00 · c5b4f00
1 parent a6cddcd
commit c5b4f00
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 17 deletions.
diff --git a/src/Frontend/Themes/Bootstrap/src/Layout/Sass/components/_privacyConsentDialog.scss b/src/Frontend/Themes/Bootstrap/src/Layout/Sass/components/_privacyConsentDialog.scss
@@ -1,22 +1,42 @@
 #privacyConsentDialog {
-  box-shadow: 0 0.5rem 1rem rgba($black, 0.5);
-  bottom: $spacer/2;
+  position: fixed;
   display: block;
   height: auto;
-  left: $spacer/2;
-  right: $spacer/2;
-  top: auto;
-  width: auto;
+  max-height: calc(100vh - env(safe-area-inset-bottom));
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100vw;
+  z-index: $zindex-modal - 1;
+  overflow-y: auto;
+
+  form {
+    max-height: 100%;
+    overflow-y: auto;
+  }
 
   .modal-dialog {
-    margin: 0;
+    margin: 1rem;
+
+    @include media-breakpoint-up(md) {
+      margin: 3rem;
+    }
+
+    .modal-header, .modal-body, .modal-footer {
+      padding: 1rem 1rem;
+    }
   }
-}
 
-@include media-breakpoint-up(sm) {
-  #privacyConsentDialog {
-    bottom: $spacer;
-    left: $spacer;
-    right: auto;
+  .btn-link {
+    text-decoration: underline;
+  }
+
+
+  @include media-breakpoint-up(sm) {
+    left: unset;
+    right: unset;
+    top: unset;
+    width: auto;
   }
 }
diff --git a/src/Frontend/Themes/Bootstrap/src/Layout/Templates/PrivacyConsentDialog.html.twig b/src/Frontend/Themes/Bootstrap/src/Layout/Templates/PrivacyConsentDialog.html.twig
@@ -6,15 +6,16 @@
     aria-labelledby="privacyConsentDialogTitle"
     data-role="privacy_consent_dialog"
     data-bs-backdrop="false"
+    aria-modal="true"
     {% if privacyConsentDialogHide %}
       style="display: none"
     {% endif %}
   >
-    <div class="modal-dialog"  role="document">
+    <div class="modal-dialog">
       <div class="modal-content">
         <form data-role="privacy_consent_dialog_form">
           <div class="modal-header">
-            <h5 id="privacyConsentDialogTitle" class="modal-title">{{ 'msg.PrivacyConsentDialogTitle'|trans|raw }}</h5>
+            <h2 class="h5 mt-0" id="privacyConsentDialogTitle" class="modal-title">{{ 'msg.PrivacyConsentDialogTitle'|trans|raw }}</h2>
             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ 'lbl.Close'|trans }}" title="{{ 'lbl.Close'|trans }}"></button>
           </div>
           <div class="modal-body">
@@ -23,7 +24,7 @@
             <div class="form-group">
               <div class="custom-control custom-checkbox">
                 <input name="privacyConsentLevelFunctionalCheckbox" id="privacyConsentLevelFunctionalCheckbox"
-                  type="checkbox" checked disabled aria-describedby="privacyConsentLevelFunctionalHelpBlock"
+                  type="checkbox" checked disabled
                   data-role="privacy-level"
                   data-value="functional"
                   class="custom-control-input"
@@ -42,7 +43,6 @@
                 <div class="custom-control custom-checkbox">
                   <input name="privacyConsentLevel{{ level|ucfirst }}Checkbox"
                     id="privacyConsentLevel{{ level|ucfirst }}Checkbox" type="checkbox"
-                    aria-describedby="privacyConsentLevel{{ level|ucfirst }}HelpBlock"
                     data-role="privacy-level"
                     data-value="{{ level }}"
                     class="custom-control-input"