We use software called DubBot to scan our websites. This software returns the article in question during scanning, so we can be ADA-compliant. It pulled up the Mega Menu, but it displayed a critical error.
You can see all of this from the screenshot attached, but this is the issue:
Element Location:
.tbm-item--has-dropdown.level-1[aria-level="1"]:nth-child(1) > .tbm-link-container > .tbm-toggle.no-link.level-1
Element Source:
<span class="tbm-link level-1 no-link tbm-toggle" tabindex="0" aria-expanded="false">
We found a resolution we hope to apply to the module.
In the tb-megamenu-tem.html.twig we updated two areas. First was the li instance that had a problem. We added {% set attributes = attributes.removeAttribute('aria-expanded') %} above the li. Then we changed {% set tag = 'span' %} to {% set tag = 'button' %}. The next step is to update the CSS in base.css so the styling applies to the button instead of the span.
| Comment | File | Size | Author |
|---|---|---|---|
| Ariaissue.jpg | 245.98 KB | adalcsusm |
Comments
Comment #2
themodularlabWe've had this issue raised before and have found that using a span in this instance can be okay, although there's definitely a debate on that. I appreciate seeing the error report.
A big part of my hesitancy to change this is it would be a breaking change for anyone who has custom CSS targeting that span, which is probably a large portion of users. For anyone who is overriding that template, they wouldn't get that change but still could see CSS/JS issues.
For now, I would recommend copying and overriding any necessary templates to use button instead, provide your own overriding CSS, and if necessary write a patch to alter the JS.
There are future plans for this module (time permitting) that could include a change like this.
Comment #3
themodularlabComment #4
adalcsusm commentedThank you for getting back to me on this issue. I can see both the positives and negatives. My hope is that in the future, both ways will be available. But that is a lot of work to achieve that split/support. If anything, a solution for those of us who need to remove span is available for all to find.