diff --git a/src/registrar/assets/src/js/getgov-admin/andi.js b/src/registrar/assets/src/js/getgov-admin/andi.js index 416c4f05f..9be03fa89 100644 --- a/src/registrar/assets/src/js/getgov-admin/andi.js +++ b/src/registrar/assets/src/js/getgov-admin/andi.js @@ -1,36 +1,50 @@ +/* +This function intercepts all select2 dropdowns and adds aria content. +It relies on an override in detail_table_fieldset.html that provides +a span with a corresponding id for aria-describedby content. + +This allows us to avoid overriding aria-label, which is used by select2 +to send the current dropdown selection to ANDI +*/ export function initAriaInjections() { console.log("FIRED") document.addEventListener('DOMContentLoaded', function () { - // Find all spans with "--aria-description" in their id - const descriptionSpans = document.querySelectorAll('span[id*="--aria-description"]'); + // Set timeout so this fires after select2.js finishes adding to the DOM + setTimeout(function () { + // Find all spans with "--aria-description" in their id + const descriptionSpans = document.querySelectorAll('span[id*="--aria-description"]'); - // Iterate through each span to add aria-describedby - descriptionSpans.forEach(function(span) { - // Extract the base ID from the span's id (remove "--aria-description" part) - const fieldId = span.id.replace('--aria-description', ''); + // Iterate through each span to add aria-describedby + descriptionSpans.forEach(function(span) { + // Extract the base ID from the span's id (remove "--aria-description" part) + const fieldId = span.id.replace('--aria-description', ''); - // Find the field element with the corresponding ID - const field = document.getElementById(fieldId); + // Find the field element with the corresponding ID + const field = document.getElementById(fieldId); - // If the field exists, set the aria-describedby attribute - if (field) { - let select2ElementDetected = false - if (field.classList.contains('admin-autocomplete')) { - console.log("select2---> select2-"+${fieldId}+"-container") - // If it's a Select2 component, find the rendered span inside Select2 - const select2Span = field.querySelector('.select2-selection'); - if (select2Span) { - console.log("set select2 aria") - select2Span.setAttribute('aria-describedby', span.id); - select2ElementDetected=true + // If the field exists, set the aria-describedby attribute + if (field) { + let select2ElementDetected = false + if (field.classList.contains('admin-autocomplete')) { + const select2Id="select2-"+fieldId+"-container" + console.log("select2---> "+select2Id) + // If it's a Select2 component, find the rendered span inside Select2 + const select2SpanThatTriggersAria = document.querySelector("span[aria-labelledby='"+select2Id+"']"); + const select2SpanThatHoldsSelection = document.getElementById(select2Id) + if (select2SpanThatTriggersAria) { + console.log("set select2 aria") + select2SpanThatTriggersAria.setAttribute('aria-describedby', span.id); + // select2SpanThatTriggersAria.setAttribute('aria-labelledby', select2Id); + select2ElementDetected=true + } + } + if (!select2ElementDetected) + { + // Otherwise, set aria-describedby directly on the field + field.setAttribute('aria-describedby', span.id); } - } - if (!select2ElementDetected) - { - // Otherwise, set aria-describedby directly on the field - field.setAttribute('aria-describedby', span.id); } - } - }); + }); + }, 500); }); } \ No newline at end of file diff --git a/src/registrar/templates/django/admin/includes/detail_table_fieldset.html b/src/registrar/templates/django/admin/includes/detail_table_fieldset.html index bf58853eb..3ca6a3b66 100644 --- a/src/registrar/templates/django/admin/includes/detail_table_fieldset.html +++ b/src/registrar/templates/django/admin/includes/detail_table_fieldset.html @@ -160,8 +160,11 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html) {% endblock field_readonly %} {% block field_other %} - - {% if "related_widget_wrapper" in field.field.field.widget.template_name or field.field.field.widget.input_type == 'select' %} + {% comment %} + .gov override - add Aria messages for select2 dropdowns. These messages are hooked-up to their respective DOM + elements via javascript (see andi.js) + {% endcomment %} + {% if "related_widget_wrapper" in field.field.field.widget.template_name %} {{ field.field.label }}, combo-box, collapsed, edit, has autocomplete. To set the value, use the arrow keys or type the text.