* Replace backdrop with simple noop mouse listener
As discussed in https://github.com/twbs/bootstrap/pull/22422 the current
approach of injecting a backdrop (to work around iOS' broken event
delegation for the `click` event) has annoying consequences on
touch-enabled laptop/desktop devices.
Instead of a backdrop `<div>`, here we simply add extra empty/noop
mouse listeners to the immediate children of `<body>` (and remove
them when the dropdown is closed) in order to force iOS to properly
bubble a `click` resulting from a tap (essentially, method 2 from
https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html)
This is sufficient (except in rare cases where the user does manage to tap
on the body itself, rather than any child elements of body - which is not
very likely in an iOS phone/tablet scenario for most layouts) to get iOS to
get a grip and do the correct event bubbling/delegation, meaning the regular
"click" event will bubble back to the `<body>` when tapping outside of the dropdown,
and the dropdown will close properly (just like it already does, even without
this fix, in non-iOS touchscreen devices/browsers, like Chrome/Android and
Windows on a touch laptop).
This approach, though a bit hacky, has no impact on the DOM structure, and
has no unforeseen side effects on touch-enabled laptops/desktops. And crucially,
it works just fine in iOS.
* Remove dropdown backdrop styles
* Update doc for dropdowns and touch-enabled devices
...as touch is not exclusive to "mobile" anymore nowadays. also explicitly clarifies this is a fix for iOS, and that it impacts touch laptops etc as well. lastly, renames the variable from "dropdown" to "backdrop" for clarity/consistency
* Remove aria-expanded from collapse.js target element
aria-expanded="true"/aria-expanded="false" only applies to the trigger,
not the element that is being expanded/collapsed.
* Tweak collapse.js accessibility section
...to make it clearer that the aria-expanded attribute always just goes
on the control.
* Fix collapse.js unit tests
- reword some of the text to make it clear we're checking behavior of
trigger/control
- move incorrect aria-expanded out of the <div>s and to the actual
trigger/control <a>s
- fix incorrect test assertion text output false -> true
While `placeholder` is nominally valid per spec
http://rawgit.com/w3c/html-api-map/master/index.html#accessible-name-and-description-calculation
it is inelegant, a fallback, and not supported in ios/safari/voiceover
and android/chrome/talkback, to name a few combinations
`aria-describedby` is also not really the right tool for providing a
name/label equivalent, so remove that from the list of possible
alternative methods / clarify how it can be used
- add .col-*-auto to the extend in our grid framework mixins so it gets padding
- this means we can avoid the col-12 classes in our docs for the responsive variants
The example code has the class `"modal fade"`, but the visible example has the class `"modal"`. `"fade"` appears to not work for modals that you do not intend to animate onto the page
