Patrick H. Lauke [Fri, 14 Apr 2017 08:19:00 +0000 (09:19 +0100)]
Replace dropdown backdrop hack with cleaner JS-only hack
* 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
Patrick H. Lauke [Wed, 12 Apr 2017 17:50:31 +0000 (18:50 +0100)]
Reword "mobile" to "touch-enabled"
...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
Patrick H. Lauke [Wed, 12 Apr 2017 12:54:16 +0000 (13:54 +0100)]
Reword "mobile" to "touch-enabled"
...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
Patrick H. Lauke [Mon, 10 Apr 2017 21:33:19 +0000 (22:33 +0100)]
Remove `cursor: not-allowed` styles
Per discussion on https://github.com/twbs/bootstrap/issues/22222#issuecomment-292819959
> browsers don't normally use the "not-allowed" cursor in these circumstances, so it makes BS a bit opinionated here. (and, at least on Windows, the "not-allowed" cursor looks rather fugly with its red colour compared to other regular mouse pointers)
>
> 
Patrick H. Lauke [Mon, 10 Apr 2017 13:51:22 +0000 (14:51 +0100)]
Fix collapse.js aria-expanded behavior
* 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
Patrick H. Lauke [Mon, 10 Apr 2017 13:43:54 +0000 (14:43 +0100)]
Only change aria-pressed if it's not an input-based radio or checkbox group
* 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
Add explicit aria-label to placeholder-only inputs
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
Patrick H. Lauke [Thu, 30 Mar 2017 21:45:36 +0000 (22:45 +0100)]
Add explicit aria-label to placeholder-only inputs
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
Mark Otto [Sun, 26 Mar 2017 19:53:50 +0000 (12:53 -0700)]
fixes #22111
- 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
projects / thirdparty / bootstrap.git / log
