This commit is an example of a component-less ARIA "snippet" that enables expandable/accordion interactions by just listening for clicks on button[aria-controls]. This might be an interesting design pattern to explore, especially with event delegation, which would capture dynamically inserted DOM elements. For instance:
var delegates = {
'[aria-controls][aria-expanded]': toggleControlledContent,
'[aria-controls][role=tab]': toggleRelatedTabs
};
document.body.addEventListener('click', function(e) {
var target = e.target;
for (var selector in delegates) {
if (target.matches(selector)) {
return delegates[selector].call(this, e);
}
}
});
This commit is an example of a component-less ARIA "snippet" that enables expandable/accordion interactions by just listening for clicks on
button[aria-controls]. This might be an interesting design pattern to explore, especially with event delegation, which would capture dynamically inserted DOM elements. For instance:As always, Heydon's Practical ARIA Examples provides some great templates for these.