add accessible label for image focal point chooser input

- fixes #5309

CHANGELOG.txt

@@ -43,6 +43,7 @@ Changelog
  * Fix: Ensure `TabbedInterface` will not show a tab if no panels are visible due to permissions (Paarth Agarwal)
  * Fix: Ensure default sidebar branding (bird logo) is not cropped in RTL mode (Steven Steinwand)
  * Fix: Specific snippets list language picker was not properly styled (Sage Abdullah)
+ * Fix: Add an accessible label to the image focal point input when editing images (Lucie Le Frapper)
 
 
 3.0 (16.05.2022)

CONTRIBUTORS.rst

@@ -600,6 +600,7 @@ Contributors
 * Tom Hu
 * Thiago Costa de Souza
 * Benedict Faw
+* Lucie Le Frapper
 
 Translators
 ===========

docs/releases/4.0.md

@@ -57,6 +57,7 @@ When using a queryset to render a list of images, you can now use the ``prefetch
  * Ensure `TabbedInterface` will not show a tab if no panels are visible due to permissions (Paarth Agarwal)
  * Ensure default sidebar branding (bird logo) is not cropped in RTL mode (Steven Steinwand)
  * Specific snippets list language picker was not properly styled (Sage Abdullah)
+ * Add an accessible label to the image focal point input when editing images (Lucie Le Frapper)
 
 
 ## Upgrade considerations

wagtail/images/static_src/wagtailimages/js/focal-point-chooser.js

@@ -30,6 +30,24 @@ function setupJcrop(image, original, focalPointOriginal, fields) {
       // Set alt="" on the image so its src is not read out loud to screen reader users.
       var $holderImage = $('img', jcropapi.ui.holder);
       $holderImage.attr('alt', '');
+
+      const labelContent = focalPointOriginal.label;
+      if (!labelContent) return;
+      // Create a label tag for the input for accessibility.
+
+      // set the id on the input
+      const id = 'jcrop-holder-input';
+      var $holderInput = $('input', jcropapi.ui.holder);
+      $holderInput.attr('id', id);
+
+      // create a label that references the id
+
+      const label = document.createElement('label');
+      label.setAttribute('for', id);
+      label.classList.add('visuallyhidden');
+      label.innerHTML = labelContent;
+      var holder = document.getElementsByClassName('jcrop-holder');
+      holder[0].prepend(label);
     },
   );
 }
@@ -45,6 +63,7 @@ $(function () {
   };
 
   var focalPointOriginal = {
+    label: $chooser.data('focalInputLabel'),
     x: $chooser.data('focalPointX'),
     y: $chooser.data('focalPointY'),
     width: $chooser.data('focalPointWidth'),

wagtail/images/templates/wagtailimages/images/edit.html

@@ -59,13 +59,15 @@
             <div class="col6">
                 {% image image max-800x600 as rendition %}
 
-                <div class="focal-point-chooser"
+                <div
+                    class="focal-point-chooser"
                     style="max-width: {{ rendition.width }}px; max-height: {{ rendition.height }}px;"
                     data-focal-point-x="{{ image.focal_point_x|default_if_none:'' }}"
                     data-focal-point-y="{{ image.focal_point_y|default_if_none:'' }}"
                     data-focal-point-width="{{ image.focal_point_width|default_if_none:'' }}"
-                    data-focal-point-height="{{ image.focal_point_height|default_if_none:'' }}">
-
+                    data-focal-point-height="{{ image.focal_point_height|default_if_none:'' }}"
+                    data-focal-input-label="{% trans 'Image focal point' %}"
+                >
                     <img {{ rendition.attrs }} data-original-width="{{ image.width|unlocalize }}" data-original-height="{{ image.height|unlocalize }}" class="show-transparency">
                     <div class="current-focal-point-indicator{% if not image.has_focal_point %} hidden{% endif %}"></div>
                 </div>