Page MenuHomePhabricator

jquery.makeCollapsible: aria-expanded is not updated for custom togglers
Open, Needs TriagePublicBUG REPORT

Description

Note: This bug was reported by Eilana Benish, Accessibility Service Consultant.

jquery.makeCollapsible should update the aria-expanded attribute according to the toggler's collapse/expand state. Regular togglers work this way (see makeCollapsible.js @ 139, where options.toggleARIA is set @ 219 ). However, custom togglers do not update the aria-expanded attribute (there is no default options.toggleARIA). See, for example, Manual:Collapsible elements#With custom toggle link.

Event Timeline

This was left out on purpose in T222904: Collapsible HTMLForm state by jquery.makeCollapsible should be clearer exposed to screen readers mostly because of https://heydonworks.com/article/aria-controls-is-poop/ and https://github.com/w3c/aria/issues/995 + we would have to add 'random id' generation into the logic...

I'm not sure how often we use custom togglers (i got to about 20 usages on en.wp), but likely it is not that much. I think it is better to document that people should avoid using customer togglers as they are not accessible... Especially as custom togglers are a 1->many relationship and aria-controls is documented to be particularly terrible in that situation (or rather all its implementations).

We could add aria-expended regardless of course, but it would hardly make it more understandable I suspect.

Custom togglers are very useful when used properly (example). I think the best solution, which is also the easiest one in this case, is to use the same scheme for regular togglers and custom togglers. It's trivial to use the same default toggleARIA flag (true for both).

The bug was reported to me by an accessibility service consultant, so I guess setting the aria-expended state properly does matter to some people.

I think this issue is pretty much a sibling of T246601: Collapsible element custom toggle should allow different text for collapsing and expanding. It has the same root cause (custom toggles can't be "expanded" or "collapsed" in general, only when they have ONE linked collapsible) and likely the same solution, as brainstormed there, which could benefit from T269400: Implement "smart" On-Off and Partial Custom Toggles in jquery.makeCollapsible.js.