Merge pull request #403 from JLG-WOCFR-DEV/codex/prioritize-code-recommendations

Improve accessibility of inline help tooltips

Author: JLG-WOCFR-DEV

liens-morts-detector-jlg/assets/js/blc-admin-scripts.js

@@ -4483,6 +4483,12 @@ jQuery(document).ready(function($) {
                 $button.removeClass('is-active').attr('aria-expanded', 'false');
             }
 
+            var $bubble = $wrapper.find('.blc-field-help__bubble');
+            if ($bubble.length) {
+                $bubble.attr('aria-hidden', 'true');
+                $bubble.attr('hidden', 'hidden');
+            }
+
             $openWrapper = null;
         }
 
@@ -4500,6 +4506,8 @@ jQuery(document).ready(function($) {
 
             var $bubble = $wrapper.find('.blc-field-help__bubble');
             if ($bubble.length) {
+                $bubble.attr('aria-hidden', 'false');
+                $bubble.removeAttr('hidden');
                 var announcement = ($bubble.text() || '').trim();
                 if (announcement) {
                     speak(announcement, 'polite');
@@ -4577,33 +4585,23 @@ jQuery(document).ready(function($) {
             }
         });
 
-        $(document).on('focusout', '.blc-field-help', function(event) {
-            if (!$openWrapper || !$openWrapper.length) {
-                return;
-            }
-
-            var nextTarget = event.relatedTarget || document.activeElement || null;
-
-            if (isElementAssociatedWithWrapper(nextTarget, $openWrapper)) {
+        $(document).on('focusout', '.blc-field-help', function() {
+            var $wrapper = $(this).closest('.blc-field-help-wrapper');
+            if (!$wrapper.length) {
                 return;
             }
 
-            if (!nextTarget) {
-                window.setTimeout(function() {
-                    if (!$openWrapper || !$openWrapper.length) {
-                        return;
-                    }
-
-                    if (isElementAssociatedWithWrapper(document.activeElement, $openWrapper)) {
+            window.setTimeout(function() {
+                var activeElement = document.activeElement || null;
+                if (activeElement) {
+                    var $active = $(activeElement);
+                    if ($active.closest('.blc-field-help-wrapper').get(0) === $wrapper.get(0)) {
                         return;
                     }
+                }
 
-                    closeWrapper($openWrapper);
-                }, 0);
-                return;
-            }
-
-            closeWrapper($openWrapper);
+                closeWrapper($wrapper);
+            }, 0);
         });
 
         $(document).on('focusin', function(event) {

liens-morts-detector-jlg/includes/blc-settings-fields.php

@@ -43,11 +43,36 @@ function blc_render_field_help($field_id, $tooltip, $field_label = '') {
         ? sprintf(__('Aide : %s', 'liens-morts-detector-jlg'), $field_label)
         : __('Afficher l’aide', 'liens-morts-detector-jlg');
 
-    echo '<span class="blc-field-help-wrapper">';
-    echo '<button type="button" class="blc-field-help" aria-label="' . esc_attr($button_label) . '" aria-expanded="false" aria-controls="' . esc_attr($tooltip_id) . '">';
+    $wrapper_attributes = array('class="blc-field-help-wrapper"');
+
+    if ($field_id !== '') {
+        $wrapper_attributes[] = 'data-field-id="' . esc_attr($field_id) . '"';
+    }
+
+    echo '<span ' . implode(' ', $wrapper_attributes) . '>';
+
+    $button_attributes = array(
+        'type="button"',
+        'class="blc-field-help"',
+        'aria-label="' . esc_attr($button_label) . '"',
+        'aria-expanded="false"',
+        'aria-controls="' . esc_attr($tooltip_id) . '"',
+        'aria-describedby="' . esc_attr($tooltip_id) . '"'
+    );
+
+    echo '<button ' . implode(' ', $button_attributes) . '>';
     echo '<span class="dashicons dashicons-editor-help" aria-hidden="true"></span>';
     echo '</button>';
-    echo '<span id="' . esc_attr($tooltip_id) . '" class="blc-field-help__bubble" role="tooltip">' . esc_html($tooltip) . '</span>';
+    $bubble_attributes = array(
+        'id="' . esc_attr($tooltip_id) . '"',
+        'class="blc-field-help__bubble"',
+        'role="tooltip"',
+        'hidden',
+        'aria-hidden="true"',
+        'aria-live="polite"'
+    );
+
+    echo '<span ' . implode(' ', $bubble_attributes) . '>' . esc_html($tooltip) . '</span>';
     echo '</span>';
 }