Topic: [A11y] Auto-Complete Accessibility Issues in .cshtml file
foundant
priority
asked 4 hours ago
I was tasked to address some A11Y
accessibility issues flagged involving the MDB AutoComplete. I am using the Axe DevTools extension on the Edge browser with Best Practices
set to ON and set to WCAG 2.2 AA for our testing.
We are calling your mdb.Autocomplete()
function like so inside of our .cshtml
file in the <script>
section of the file:
new mdb.Autocomplete(organizationAutocomplete, {
filter: nameFilter,
displayValue: (value) => value.Name,
listHeight: 235,
itemContent: (result) => {
return `
<div class="w-100">
<div>${result.Name}</div>
<div class="ft-6 small">${result.TaxId}</div>
</div>
`;
},
threshold: 1
});
With this, we get several A11Y
violations in several states.
No Results Found
If there are no results found, we have something like this:And it reports the following
A11y
violations, via Axe DevTools
:
With Suggested Results
If there are some results based on the search input, we get the following:which reports the following
A11y
violations:
Work Around / Fix
Because the Auto Complete
is added to the DOM dynamically, I had to be a bit clever in order to target the Auto Complete markup in order to address the A11y
violations. The code to handle the dynamic DOM situation looks like this:
const observer = new MutationObserver((mutations) => {
const dropdownContainer = document.querySelector(".autocomplete-dropdown-container");
if (dropdownContainer && !dropdownContainer.hasAttribute("role")) {
dropdownContainer.setAttribute("role", "region");
}
const autocompleteList = document.querySelector('ul.autocomplete-items-list');
if (autocompleteList && !autocompleteList.hasAttribute('aria-label')) {
autocompleteList.setAttribute('aria-label', 'Organization suggestions');
const listItems = autocompleteList.querySelectorAll("li");
if (listItems) {
listItems.forEach((item) => {
item.setAttribute("role", "option");
})
}
autocompleteList.setAttribute("tabindex", 0);
observer.disconnect(); // Stop observing once we've set it
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
The Ask/Question
Is there a simpler way to add accessibility attributes to the dynamically generated markup? I needed to add role="region"
, role="option"
, aria-label
, and tabindex="0"
to address A11Y violations. Our team prefers to avoid using MutationObserver
if possible. Are there plans to address this in future versions, or is there a configuration option we can use to make the generated HTML elements A11Y compliant by default?
Thanks in advance.
P.S.: the images don't appear to be rendering in the preview below. It looks like the image has uploaded to your server as the markup suggests the image is located at: /mdb-images/support/<guid>
Resources (screenshots, code snippets etc.)
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 9.0.0
- Device: N/A
- Browser: Edge
- OS: Windows 11
- Provided sample code: Yes
- Provided link: Yes