Tech Debt: can we implement a disclosure-like pattern that works for showing and hiding elements to AT

[thiessenp-cds]

Exploring showing and hiding a "complex" element to AT

Issue

The issue is how to let an AT know that a new "complex" element has been added to the page (DOM). For simple elements like a text update or an element that contains a few text elements, a live-region can handle this great. But if an element could have a lot of content or an element that has a number of nested elements, the update announced in an AT would be way too verbose to be usable for a user. An example of this is the show-hide feature in the form builder that allows a user to group one or more elements into a rule that can be shown hidden depending.

Solutions

There are not currently any full solutions known, only partly working solutions.
The current best practice from the W3C is to use the "disclosure pattern". This adds an aria-controls to the button that controls visibility and an id from what is being shown/hidden. The button also adds an aria-expanded that is toggled to true when visible. The relationship that this pattern sets up should be work great in theory. The problem is that most AT vendors decided not to support aria-controls. So this won't work.
Another option is to just add a live-region=polite around the area containing the "complex" element. Then when it's shown it will verbosely be announced. To tweak this, parts of the "complex" element could be overridden to not be announced using a aria-live=off. Note that it is important that the initial aria-live=polite is in the original displayed HTML or in the DOM long before the dynamic updates. This helps improve the chance of an AT seeing the change.

What is the best solution?

Ideally this would involve some investigation into a new solution or tweaking the existing solutions to work for us better.