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.)