Repository navigation
Collapse multi-target fails with "#id1, #id2" data-target selector #25273
Description
Activity
An
aria-expandedattribute is added to the toggle button to indicate if the collapsible element is collapsed or not. If you target multiple collapsible elements which have different states (collapsed and shown), it's impossible to determine thearia-expandedstate of the toggle button.I don't know if there are (accessible) solutions for this situation.
this is a valid bug related to http://getbootstrap.com/docs/4.0/components/collapse/#multiple-targets
@MartijnCuppens as for the
aria-expanded, you're right that if the multiple targets aren't all either expanded or collapsed, thearia-expandedwill become meaningless. interesting edge case, as i'm not sure it's intended. might be worth filing a separate issue for it.@MartijnCuppens , @patrickhlauke that's true about the
aria-expanded, but wouldn't it be true in any case using the example from the docs that takes a class selector (and works correctly)? Thanks.@bpierson yes, which is why i'm saying that particular thing should be a separate issue. the problem you reported is valid as per your description (the valid jquery selector you provide, with the two ids, isn't working as it should)
Won't SR's honor the
displaystyle of the collapsible element in question, irrespective of which element triggered it? Maybearia-expandedon the trigger is overkill here. Don't want to get too far into the weeds and away from the OP, but usingaria-expandedseems to be a non-starter if the "any selector" feature stays in place since the value can only be true or false.Possibly related to this line https://github.com/twbs/bootstrap/blob/v4-dev/js/src/util.js#L109
Reacted by Michael Newton@Johann-S I just confirmed that to be the case by just changing the value to
" #coll1, #coll2", which worked as expected (note the space at index 0).I understand the motivation in trying to sanitize the id, but it seems like in the case of a selector it's a losing battle. Presumably the coder supplied both the id value and the
data-targetvalue, so it should really be up to them to make sure id values (and their correspondinghrefor attribute values) are pre-sanitized.I might humbly suggest that to simplify your code base, js libraries should just take what the coder supplies for attribute values - even ids.
Reacted by Tom LewisYep it seems they are a lot of use cases which are difficult to handle in our ends 😟
Maybe we should add a warning in our documentation and remove that code
@Johann-S most systems that generate or template html have methods on the server side to sanitize id and attribute values before it ever gets to the browser. While it would technically be a breaking change, I doubt that it would have much impact. I've been programming about 30 years and in my experience, many issues are created by changing the value supplied by the user (side-effects). I've even run into problems just trimming off whitespace!
I've run into this problem also, not with multiple targets but just using a more complicated target spec that started with
#. I agree with the idea that the value should be passed to jQuery as-is, with no preprocessing.
Fiddle
With a comma-separated CSS selector, the targeted collapsible elements are not toggled, for example:
data-target="#coll1, #coll2"
No error is raised.