Provide screen reader alerts for resource form.

omeka · Oct 29, 2024 · 0c26543 · 0c26543
1 parent f671b33
commit 0c26543
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/admin/themes/default/javascripts/elements.js b/admin/themes/default/javascripts/elements.js
@@ -53,10 +53,20 @@ Omeka.Elements = {};
                 });
                 fieldDiv.html(response);
                 fieldDiv.trigger('omeka:elementformload');
-            }
+                fieldDiv.find('.add-element').focus();
+                setTimeout(() => {
+                    Omeka.Elements.alertElementChange('element-' + elementId, fieldDiv);
+                }, 2000);
+           }
         });
     };
 
+    Omeka.Elements.alertElementChange = function (elementId, fieldDiv) {
+        var alertsDiv = $('#' + elementId + '-alerts');
+        var rowCount = fieldDiv.find('.input-block').length;
+        alertsDiv.find('span.count').text(rowCount);
+    }
+
     /**
      * Set up add/remove element buttons for ElementText inputs.
      *
@@ -93,14 +103,16 @@ Omeka.Elements = {};
         context.find(addSelector).click(function (event) {
             event.preventDefault();
             var fieldDiv = $(this).parents(fieldSelector);
-
+            
             Omeka.Elements.elementFormRequest(fieldDiv, {add: '1'}, elementFormPartialUrl, recordType, recordId);
         });
 
         // When a remove button is clicked, remove that input from the form.
         context.find(removeSelector).click(function (event) {
             event.preventDefault();
             var removeButton = $(this);
+            var fieldDiv = $(this).parents(fieldSelector);
+            var elementId = fieldDiv.attr('id');
 
             // Don't delete the last input block for an element.
             if (removeButton.parents(fieldSelector).find(inputBlockSelector).length === 1) {
@@ -117,6 +129,11 @@ Omeka.Elements = {};
             });
             inputBlock.remove();
 
+            fieldDiv.find('textarea').last().focus();
+            setTimeout(() => {
+                Omeka.Elements.alertElementChange(elementId, fieldDiv);
+             }, 2000);
+
             // Hide remove buttons for fields with one input.
             $(fieldSelector).each(function () {
                 var removeButtons = $(this).find(removeSelector);

diff --git a/application/views/helpers/ElementForm.php b/application/views/helpers/ElementForm.php
@@ -87,7 +87,10 @@ public function elementForm(Element $element, Omeka_Record_AbstractRecord $recor
         }
 
         // Compose html for element form
-        $html = $divWrap ? '<div class="field" id="element-' . html_escape($element->id) . '" aria-live="polite">' : '';
+        $html = '<div id="element-' . $element->id . '-alerts" class="sr-only alerts" aria-atomic="true" aria-live="polite">';
+        $html .= __('Number of rows in "%s":', $components['label']) . '<span class="count">1</span>';
+        $html .= '</div>';
+        $html .= $divWrap ? '<div class="field" id="element-' . html_escape($element->id) . '">' : '';
 
         $html .= '<div class="field-meta two columns alpha">';
         $html .= $components['label'];