When one uses say a carousel inside a tab, the `.active` selector previously matches the carousel ones too leading to broken tabs.
It's not the perfect solution but should the job for now.
Part of an update to align the naming schemes across our components.
- Renames .popover-title to .popover-header
- Renames .popover-content to .popover-body
Refs: #22092
According to the docs, you just need to apply the `navbar-nav` to an
`<ul>` tag in a list-based navbar. In fact, `navbar-nav` seems to
override all the css properties set by `nav`.
Also, `nav-item` class should be used only for `<li>` tags, or in
conjunction with `<a>` tags to entirely avoid the list-based approach.
This commit removes the redundant `nav` class from `navbar-nav` `<ul>`
tags, moves `nav-item` from `<a>` tags to `<li>` tags and properly
adds `nav-item` class to `<li>` tags where missing.
Refs:
* https://v4-alpha.getbootstrap.com/components/navs/
* https://v4-alpha.getbootstrap.com/components/navbar/#nav
Same hack as in https://github.com/twbs/bootstrap/pull/22426 (modulo the selector, which is wrong in that PR and will be updated in a separate PR) to get tooltips to work correctly on iOS. Dynamically adds/removes empty (`noop`) `touchstart` event handlers to all children of `<body>` in order to coax iOS into proper event delegation/bubbling
* Add carousel mouse listeners even if touch events enabled
- touch events are enabled not just on "mobile", just also on
touch-enabled desktop/laptop devices; additionally, it's possible to
pair a mouse with traditionally touch-only devices (e.g. Android
phones/tablets); currently, in these situations the carousel WON'T pause
even when using a mouse
* Restart cycle after touchend
as `mouseenter` is fired as part of the touch compatibility events, the
previous change results in carousels which cycle until the user
tapped/interacted with them. after that they stop cycling (as
`mouseleave` is not sent to the carousel after user scrolled/tapped
away).
this fix resets the cycling after `touchend` - essentially returning
to the previous behavior, where on touch the carousel essentially never
pauses, but now with the previous fix it at least pauses correctly for
mouse users on touch-enabled devices.
includes documentation for this new behavior.
* 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
* Only change aria-pressed if it's not an input-based radio or checkbox group
aria-pressed="true"/aria-pressed="false" is really only useful for
making on/off toggles out of, say, `<button>` elements. the attribute is
useless (and potentially confusing/conflicting) on, say, `<label>`
elements for an existing `<input type="radio">` or similar.
* Add unit test for buttons.js and radio/checkbox inputs in button groups
