[#2137] Added disabled pseudo-checkbox for notifications

Author: jiromaykin

src/open_inwoner/accounts/templates/accounts/registration_necessary.html

@@ -16,12 +16,14 @@ <h1 class="h1">{% trans "Registratie voltooien" %}</h1><br>
                     {% autorender_field form field %}
                 {% endfor %}
 
-                {# pseudo checkbox for notifications that cannot be disabled #}
-                <div class="checkbox">
-                    <input type="checkbox" id="id_cases_notifications_action_required" name="cases_notifications_action_required" disabled="" class="checkbox__input checkbox__input--disabled" checked="">
-                    <label class="checkbox__label" for="id_cases_notifications_action_required">{% trans "Zaaknotificaties - action required" %}</label>
-                    <p class="p">{% trans "E-mail notifications for case updates that require action (cannot be disabled)" %}</p>
-                </div>
+                    <div class="form__control">
+                        {# pseudo checkbox for notifications that cannot be disabled #}
+                        <div class="checkbox">
+                            <span role="checkbox" aria-disabled="true" aria-checked="true" class="checkbox__input checkbox__pseudo checkbox__input--disabled" aria-labelledby="id_cases_notifications_action_required" tabindex="0"></span>
+                            <span class="checkbox__label checkbox__pseudo-label" id="id_cases_notifications_action_required">{% trans "Zaaknotificaties - action required" %}</span>
+                            <p class="p">{% trans "E-mail notifications for case updates that require action (cannot be disabled)" %}</p>
+                        </div>
+                    </div>
 
                 {% form_actions primary_icon='arrow_forward' primary_text="Verzenden" %}
             </form>

src/open_inwoner/scss/components/Form/Checkbox.scss

@@ -35,6 +35,10 @@
       border-radius: 1px; // intended-var-change.
       background-color: var(--color-white);
     }
+
+    &.checkbox__pseudo-label {
+      padding-left: calc(var(--gutter-width) + 4px);
+    }
   }
 
   .checkbox__input:checked ~ .checkbox__label:before {
@@ -51,4 +55,23 @@
     font-family: 'Material Icons';
     content: '\e876';
   }
+
+  /// Mimic checked-styles for pseudo checkboxes
+
+  &__pseudo ~ .checkbox__label:before {
+    background-color: var(--color-secondary);
+    color: var(--color-font-secondary);
+    font-family: 'Material Icons';
+    left: 4px;
+    content: '\e876';
+  }
+
+  &__pseudo.checkbox__input--disabled ~ .checkbox__label:before {
+    border-color: var(--color-gray) !important;
+    background-color: var(--color-gray);
+    color: var(--color-white);
+    font-family: 'Material Icons';
+    left: 3px;
+    content: '\e876';
+  }
 }

src/open_inwoner/templates/pages/profile/notifications.html

@@ -16,11 +16,13 @@ <h1 class="h1" id="title">
         {% autorender_field form field %}
     {% endfor %}
 
-    {# pseudo checkbox for notifications that cannot be disabled #}
-    <div class="checkbox">
-        <input type="checkbox" id="id_cases_notifications_action_required" name="cases_notifications_action_required" disabled="" class="checkbox__input checkbox__input--disabled" checked="">
-        <label class="checkbox__label" for="id_cases_notifications_action_required">{% trans "Zaaknotificaties - action required" %}</label>
-        <p class="p">{% trans "E-mail notifications for case updates that require action (cannot be disabled)" %}</p>
+    <div class="form__control">
+        {# pseudo checkbox for notifications that cannot be disabled #}
+        <div class="checkbox">
+            <span role="checkbox" aria-disabled="true" aria-checked="true" class="checkbox__input checkbox__pseudo checkbox__input--disabled" aria-labelledby="id_cases_notifications_action_required" tabindex="0"></span>
+            <span class="checkbox__label checkbox__pseudo-label" id="id_cases_notifications_action_required">{% trans "Zaaknotificaties - action required" %}</span>
+            <p class="p">{% trans "E-mail notifications for case updates that require action (cannot be disabled)" %}</p>
+        </div>
     </div>
 
     {% form_actions primary_text=_("Opslaan") primary_icon="arrow_forward" secondary_href='profile:detail' secondary_text=_('Terug') secondary_icon_position="before" secondary_icon='arrow_backward' %}