Improve modal description accessibility

Author: JLG-WOCFR-DEV

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

@@ -88,6 +88,7 @@ jQuery(document).ready(function($) {
             $modal.attr('tabindex', '-1');
         }
 
+        var $dialog = $modal.find('[role="dialog"]');
         var $title = $modal.find('.blc-modal__title');
         var $message = $modal.find('.blc-modal__message');
         var $error = $modal.find('.blc-modal__error');
@@ -98,6 +99,12 @@ jQuery(document).ready(function($) {
         var $cancel = $modal.find('.blc-modal__cancel');
         var $close = $modal.find('.blc-modal__close');
 
+        var messageId = $message.attr('id');
+
+        if (messageId && $dialog.length && !$dialog.attr('aria-describedby')) {
+            $dialog.attr('aria-describedby', messageId);
+        }
+
         var lastFocusedElement = null;
         var focusableSelectors = 'a[href], area[href], input:not([type="hidden"]), select, textarea, button, [tabindex], [contenteditable="true"]';
 
@@ -219,7 +226,13 @@ jQuery(document).ready(function($) {
             lastFocusedElement = document.activeElement;
 
             $title.text(options.title || '');
-            $message.text(options.message || '');
+
+            var messageText = options.message || '';
+            $message.text(messageText);
+
+            if (messageId && $dialog.length) {
+                $dialog.attr('aria-describedby', messageId);
+            }
 
             var labelText = options.label || (state.showInput ? messages.editModalLabel : '');
             $label.text(labelText);

liens-morts-detector-jlg/includes/blc-admin-pages.php

@@ -65,12 +65,12 @@ function blc_render_action_modal() {
     $rendered = true;
     ?>
     <div id="blc-modal" class="blc-modal" role="presentation" aria-hidden="true">
-        <div class="blc-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="blc-modal-title">
+        <div class="blc-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="blc-modal-title" aria-describedby="blc-modal-message">
             <button type="button" class="blc-modal__close" aria-label="<?php echo esc_attr__('Fermer la fenêtre modale', 'liens-morts-detector-jlg'); ?>">
                 <span aria-hidden="true">&times;</span>
             </button>
             <h2 id="blc-modal-title" class="blc-modal__title"></h2>
-            <p class="blc-modal__message"></p>
+            <p id="blc-modal-message" class="blc-modal__message"></p>
             <div class="blc-modal__error" role="alert" aria-live="assertive"></div>
             <div class="blc-modal__field">
                 <label for="blc-modal-url" class="blc-modal__label"></label>

tests/js/__tests__/blc-admin-scripts.test.js

@@ -25,6 +25,24 @@ describe('blc-admin-scripts accessibility helper', () => {
                     <button type="button" id="post-query-submit">Filtrer</button>
                 </div>
             </div>
+            <div id="blc-modal" class="blc-modal" role="presentation" aria-hidden="true">
+                <div class="blc-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="blc-modal-title" aria-describedby="blc-modal-message">
+                    <button type="button" class="blc-modal__close" aria-label="Fermer la fenêtre modale">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                    <h2 id="blc-modal-title" class="blc-modal__title"></h2>
+                    <p id="blc-modal-message" class="blc-modal__message"></p>
+                    <div class="blc-modal__error" role="alert" aria-live="assertive"></div>
+                    <div class="blc-modal__field">
+                        <label for="blc-modal-url" class="blc-modal__label"></label>
+                        <input type="url" id="blc-modal-url" class="blc-modal__input" placeholder="https://">
+                    </div>
+                    <div class="blc-modal__actions">
+                        <button type="button" class="button button-secondary blc-modal__cancel">Annuler</button>
+                        <button type="button" class="button button-primary blc-modal__confirm">Confirmer</button>
+                    </div>
+                </div>
+            </div>
         `;
 
         originalReady = $.fn.ready;
@@ -124,4 +142,15 @@ describe('blc-admin-scripts accessibility helper', () => {
 
         expect(window.wp.a11y.speak).toHaveBeenCalledWith('La ligne a été mise à jour.', 'polite');
     });
+
+    it('maintains aria-describedby on the modal dialog when opened', () => {
+        const trigger = $('#row-1 .blc-edit-link');
+
+        trigger.trigger('click');
+
+        const dialog = document.querySelector('.blc-modal__dialog');
+
+        expect(dialog).not.toBeNull();
+        expect(dialog.getAttribute('aria-describedby')).toBe('blc-modal-message');
+    });
 });