zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-07-25 03:58:39 +02:00
Code Issues Projects Releases Packages Wiki Activity

updates

Browse source
This commit is contained in:
CocoByte 2025-02-26 18:51:05 -07:00
parent 4bcb5bfd50
commit 8250a72f73
No known key found for this signature in database
GPG key ID: BBFAA2526384C97F
2 changed files with 45 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

66
src/registrar/assets/src/js/getgov-admin/andi.js
View file

@ -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() { export function initAriaInjections() {
console.log("FIRED") console.log("FIRED")
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
// Find all spans with "--aria-description" in their id // Set timeout so this fires after select2.js finishes adding to the DOM
const descriptionSpans = document.querySelectorAll('span[id*="--aria-description"]'); 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 // Iterate through each span to add aria-describedby
descriptionSpans.forEach(function(span) { descriptionSpans.forEach(function(span) {
// Extract the base ID from the span's id (remove "--aria-description" part) // Extract the base ID from the span's id (remove "--aria-description" part)
const fieldId = span.id.replace('--aria-description', ''); const fieldId = span.id.replace('--aria-description', '');
// Find the field element with the corresponding ID // Find the field element with the corresponding ID
const field = document.getElementById(fieldId); const field = document.getElementById(fieldId);
// If the field exists, set the aria-describedby attribute // If the field exists, set the aria-describedby attribute
if (field) { if (field) {
let select2ElementDetected = false let select2ElementDetected = false
if (field.classList.contains('admin-autocomplete')) { if (field.classList.contains('admin-autocomplete')) {
console.log("select2---> select2-"+${fieldId}+"-container") const select2Id="select2-"+fieldId+"-container"
// If it's a Select2 component, find the rendered span inside Select2 console.log("select2---> "+select2Id)
const select2Span = field.querySelector('.select2-selection'); // If it's a Select2 component, find the rendered span inside Select2
if (select2Span) { const select2SpanThatTriggersAria = document.querySelector("span[aria-labelledby='"+select2Id+"']");
console.log("set select2 aria") const select2SpanThatHoldsSelection = document.getElementById(select2Id)
select2Span.setAttribute('aria-describedby', span.id); if (select2SpanThatTriggersAria) {
select2ElementDetected=true 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);
}); });
} }

7
src/registrar/templates/django/admin/includes/detail_table_fieldset.html
View file

@ -160,8 +160,11 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
{% endblock field_readonly %} {% endblock field_readonly %}
{% block field_other %} {% block field_other %}
<!-- {{field.field.field.widget.template_name|safe}} --> {% comment %}
{% if "related_widget_wrapper" in field.field.field.widget.template_name or field.field.field.widget.input_type == 'select' %} .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 %}
<span id="{{ field.field.id_for_label }}--aria-description" class="visually-hidden admin-select--aria-description"> <span id="{{ field.field.id_for_label }}--aria-description" class="visually-hidden admin-select--aria-description">
{{ field.field.label }}, combo-box, collapsed, edit, has autocomplete. To set the value, use the arrow keys or type the text. {{ field.field.label }}, combo-box, collapsed, edit, has autocomplete. To set the value, use the arrow keys or type the text.
</span> </span>