mirror of
https://github.com/cisagov/manage.get.gov.git
synced 2025-07-24 03:30:50 +02:00
Removed timeout (thanks Zander!), cleanup
This commit is contained in:
parent
6b4c922cb9
commit
76a660a4c9
3 changed files with 50 additions and 38 deletions
|
@ -4,46 +4,57 @@ It relies on an override in detail_table_fieldset.html that provides
|
||||||
a span with a corresponding id for aria-describedby content.
|
a span with a corresponding id for aria-describedby content.
|
||||||
|
|
||||||
This allows us to avoid overriding aria-label, which is used by select2
|
This allows us to avoid overriding aria-label, which is used by select2
|
||||||
to send the current dropdown selection to ANDI
|
to send the current dropdown selection to ANDI.
|
||||||
*/
|
*/
|
||||||
export function initAriaInjections() {
|
export function initAriaInjectionsForSelect2Dropdowns() {
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
// Set timeout so this fires after select2.js finishes adding to the DOM
|
// Find all spans with "--aria-description" in their id
|
||||||
setTimeout(function () {
|
const descriptionSpans = document.querySelectorAll('span[id*="--aria-description"]');
|
||||||
// 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) {
|
||||||
descriptionSpans.forEach(function(span) {
|
// Extract the base ID from the span's id (remove "--aria-description")
|
||||||
// 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', '');
|
const field = document.getElementById(fieldId);
|
||||||
|
|
||||||
// Find the field element with the corresponding ID
|
if (field) {
|
||||||
const field = document.getElementById(fieldId);
|
// If Select2 is already initialized, apply aria-describedby immediately
|
||||||
|
if (field.classList.contains('select2-hidden-accessible')) {
|
||||||
// If the field exists, set the aria-describedby attribute
|
applyAriaDescribedBy(field, span.id);
|
||||||
if (field) {
|
return;
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
|
||||||
}, 500);
|
// Use MutationObserver to detect Select2 initialization
|
||||||
|
const observer = new MutationObserver(function (mutations) {
|
||||||
|
if (document.getElementById(fieldId)?.classList.contains("select2-hidden-accessible")) {
|
||||||
|
applyAriaDescribedBy(field, span.id);
|
||||||
|
observer.disconnect(); // Stop observing after applying attributes
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
observer.observe(document.body, {
|
||||||
|
childList: true,
|
||||||
|
subtree: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Function to apply aria-describedby to Select2 UI
|
||||||
|
function applyAriaDescribedBy(field, descriptionId) {
|
||||||
|
let select2ElementDetected = false;
|
||||||
|
const select2Id = "select2-" + field.id + "-container";
|
||||||
|
|
||||||
|
// Find the Select2 selection box
|
||||||
|
const select2SpanThatTriggersAria = document.querySelector(`span[aria-labelledby='${select2Id}']`);
|
||||||
|
|
||||||
|
if (select2SpanThatTriggersAria) {
|
||||||
|
select2SpanThatTriggersAria.setAttribute('aria-describedby', descriptionId);
|
||||||
|
select2ElementDetected = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If no Select2 component was detected, apply aria-describedby directly to the field
|
||||||
|
if (!select2ElementDetected) {
|
||||||
|
field.setAttribute('aria-describedby', descriptionId);
|
||||||
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
|
@ -19,7 +19,7 @@ import { initDynamicDomainInformationFields } from './domain-information-form.js
|
||||||
import { initDynamicDomainFields } from './domain-form.js';
|
import { initDynamicDomainFields } from './domain-form.js';
|
||||||
import { initAnalyticsDashboard } from './analytics.js';
|
import { initAnalyticsDashboard } from './analytics.js';
|
||||||
import { initButtonLinks } from './button-utils.js';
|
import { initButtonLinks } from './button-utils.js';
|
||||||
import { initAriaInjections } from './andi.js'
|
import { initAriaInjectionsForSelect2Dropdowns } from './andi.js'
|
||||||
|
|
||||||
// General
|
// General
|
||||||
initModals();
|
initModals();
|
||||||
|
@ -27,7 +27,7 @@ initCopyToClipboard();
|
||||||
initFilterHorizontalWidget();
|
initFilterHorizontalWidget();
|
||||||
initDescriptions();
|
initDescriptions();
|
||||||
initSubmitBar();
|
initSubmitBar();
|
||||||
initAriaInjections();
|
initAriaInjectionsForSelect2Dropdowns();
|
||||||
initButtonLinks();
|
initButtonLinks();
|
||||||
|
|
||||||
// Domain request
|
// Domain request
|
||||||
|
|
|
@ -74,6 +74,7 @@ class PortfolioFixture:
|
||||||
if not portfolio.federal_agency:
|
if not portfolio.federal_agency:
|
||||||
if portfolio_dict.get("federal_agency") is not None:
|
if portfolio_dict.get("federal_agency") is not None:
|
||||||
portfolio.federal_agency, _ = FederalAgency.objects.get_or_create(name=portfolio_dict["federal_agency"])
|
portfolio.federal_agency, _ = FederalAgency.objects.get_or_create(name=portfolio_dict["federal_agency"])
|
||||||
|
portfolio.federal_agency.federal_type, _ = Federal_type.objects.get_or_create(name=portfolio_dict["federal_agency"])
|
||||||
else:
|
else:
|
||||||
federal_agencies = FederalAgency.objects.all()
|
federal_agencies = FederalAgency.objects.all()
|
||||||
# Random choice of agency for selects, used as placeholders for testing.
|
# Random choice of agency for selects, used as placeholders for testing.
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue