User - Reimplement Gravatar switching without JS

- Resolves #9972
- Avoids inline script for a solution that can be CSS/HTML only
- Use translatable alt text for when the default avatar is selected
- Relates to #1288 & #5247 (CSP compliance)

CHANGELOG.txt

@@ -7,6 +7,7 @@ Changelog
  * Add `WAGTAILIMAGES_EXTENSIONS` setting to restrict image uploads to specific file types (Aman Pandey, Ananjan-R)
  * Update user list column level to `Access level` to be easier to understand (Vallabh Tiwari)
  * Fix: Ensure `label_format` on StructBlock gracefully handles missing variables (Aadi jindal)
+ * Fix: Adopt a no-JavaScript and more accessible solution for the 'Reset to default' switch to Gravatar when editing user profile (Loveth Omokaro)
  * Docs: Add code block to make it easier to understand contribution docs (Suyash Singh)
  * Maintenance: Update djhtml (html formatting) library to v 1.5.2 (Loveth Omokaro)
  * Maintenance: Re-enable `strictPropertyInitialization` in tsconfig (Thibaud Colas)

client/scss/layouts/_account.scss

@@ -1,32 +1,22 @@
 .avatar-panel {
-  margin-top: 20px;
-
   &__image {
-    float: left;
-    width: 16%;
-    margin-bottom: 20px;
+    // do not display the user image if the clearing image is checked
+    .avatar-clear:checked ~ .avatar.avatar-span {
+      display: none;
+    }
+
+    // do not display the gravatar image when the input is not checked
+    .avatar-clear:not(:checked) ~ .avatar.gravatar {
+      display: none;
+    }
   }
 
   &__form {
-    float: left;
-
     label {
       display: block;
       padding: 0;
       width: unset;
-      float: unset;
       margin-bottom: 10px;
     }
   }
-
-  &__revert-to-gravatar {
-    margin-top: 20px;
-    margin-bottom: 20px;
-  }
-
-  &::after {
-    content: ' ';
-    display: table;
-    clear: both;
-  }
 }

docs/releases/5.0.md

@@ -21,6 +21,7 @@ depth: 1
 ### Bug fixes
 
  * Ensure `label_format` on StructBlock gracefully handles missing variables (Aadi jindal)
+ * Adopt a no-JavaScript and more accessible solution for the 'Reset to default' switch to Gravatar when editing user profile (Loveth Omokaro)
 
 ### Documentation
 

wagtail/admin/templates/wagtailadmin/account/settings_panels/avatar.html

@@ -1,35 +1,17 @@
 {% load i18n wagtailadmin_tags %}
 {% block content %}
-    <div class="avatar-panel">
-        <div class="avatar-panel__image">
-            {% avatar user=request.user size="large" %}
+    <div class="avatar-panel w-flex w-flex-wrap w-items-center w-mt-5">
+        <div class="avatar-panel__image w-mr-9 w-mb-5">
+            {% if form.avatar.value %}
+                <input class="avatar-clear" type="checkbox" name="avatar-avatar-clear" id="avatar-avatar-clear_id">
+                <label for="avatar-avatar-clear_id">{% trans "Reset to default" %}</label>
+                <img class="avatar large gravatar w-block w-mt-3" src="{% avatar_url request.user 70 gravatar_only=True %}" alt="{% trans 'Default avatar' %}"/>
+            {% endif %}
+            {% avatar user=request.user classname="avatar-span w-block w-mt-3" size="large" %}
         </div>
         <div class="avatar-panel__form">
             <label for="id_avatar-avatar">{% trans "Upload a profile picture:" %}</label>
             <input type="file" name="avatar-avatar" accept="image/*" id="id_avatar-avatar">
-            <input type="hidden" name="avatar-avatar-clear" id="avatar-avatar-clear_id">
-
-            {% if form.avatar.value %}
-                <button type="button" class="avatar-panel__revert-to-gravatar button button-secondary" data-gravatar-url="{% avatar_url request.user 70 gravatar_only=True %}">{% trans "Reset to default" %}</button>
-            {% endif %}
         </div>
     </div>
-
-    <script>
-        (function () {
-            var revertToGravatarButton = document.querySelector('.avatar-panel__revert-to-gravatar');
-            if (revertToGravatarButton) {
-                revertToGravatarButton.addEventListener('click', function(e) {
-                    e.preventDefault();
-
-                    var avatarImagePreview = document.querySelector('.avatar-panel__image img');
-                    avatarImagePreview.src = revertToGravatarButton.dataset.gravatarUrl;
-
-                    document.getElementById('avatar-avatar-clear_id').value = 'on';
-
-                    revertToGravatarButton.remove();
-                });
-            }
-        })();
-    </script>
 {% endblock %}