0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-04 16:24:22 +01:00
Commit Graph

16122 Commits

Author SHA1 Message Date
Johann-S
14b2a64b26 Fix running test on iOS with Saucelabs 2017-04-18 11:52:16 +02:00
Patrick H. Lauke
9a3e002e8f Add dropdown menu accessibility callout and fix <a> example
As the question often comes up about why Bootstrap does not do "true"
ARIA menus (with their `role="menu"` etc), add an admittedly lengthy
note (tl;dr because BS is generic, and ARIA menus are specific and quite
limiting).

Additionally, fixes up the `<a>` example for dropdown trigger, with the
missing `role="button"` and neutering the `href` (which would be useless
anyway since BS overrides the link-like nature of the `<a>` so it could
never be triggered/followed anyway)
2017-04-18 09:34:55 +01:00
Patrick H. Lauke
6ae5fb12e6 Fix carousel "hover" behavior on touch-enabled devices
* 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.
2017-04-17 13:26:46 +01:00
Patrick H. Lauke
7ffb61ac52 Rewrite getting started/accessibility docs
A long overdue rewrite of the accessibility section - instead of the few
snippets of strangely superficial and out-of-context advice (skip links,
use correct heading levels), this tries to answer some of the
fundamental questions about "is Bootstrap accessible", with emphasis on
the fact that the final result will depend in large part on what BS is
applied to/on (since BS relies on the markup etc authored by
developers). This also sets out our ambition to have things work for
keyboard and assistive tech users, and that we strive to make all our
examples etc accessible and semantic.

* Changes based on @mdo's feedback
2017-04-17 00:04:49 +01:00
Patrick Yeo
dd0ce3e4b2 Rename variable $input-border-focus to $input-border-color-focus (#22413)
* Rename variable $input-border-focus to $input-border-color-focus
* Rename variables $pagination-hover-border, $pagination-active-border, $pagination-disabled-border to $pagination-hover-border-color, $pagination-active-border-color, $pagination-disabled-border-color, respectively
* Rename variables $state-*-border to $state-*-border-color, respectively
* Rename variables $alert-*-border to $alert-*-border-color
* Rename $list-group-active-border to $list-group-active-border-color
* Rename $table-inverse-border to $table-inverse-border-color
* Rename $btn-*-border to $btn-*-border-color
* Rename $navbar-*-toggler-border to $navbar-*-toggler-border-color
2017-04-16 15:45:10 -07:00
Mark Otto
2075610491 Prevent long words in .card-titles from breaking auto layout 2017-04-16 14:02:12 -07:00
Patrick H. Lauke
ea1d69c64b Make "Copy" buttons actual buttons
This makes them keyboard-accessible. For mouse users, the only change
here is that the focus outline will remain on the button once clicked
(in future, this can be solved with :focus-ring, but for now this would
require a polyfill). the tooltip is explicitly hidden on `mouseleave`,
so even though the `<button>` retains focus after clicking, the tooltip
won't stay visible once mouse user moves away.
the mouse hover styles have explicitly not been make to also apply to
:focus, so as to minimise the visual impact for
mouse users (though the tooltip remains visible)
 - but due to the default outline and the custom tooltip, it
should be fairly clear when keyboard users set focus to a copy button
too.
2017-04-16 13:57:33 -07:00
Mark Otto
bc0cf36dc8 grunt 2017-04-16 13:54:07 -07:00
Patrick H. Lauke
6d64afe508 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
2017-04-14 09:19:00 +01:00
Patrick H. Lauke
3b3366e1b6 remove dropdown.js reliance on roles and fix keyboard navigation 2017-04-14 00:37:52 +01:00
Patrick H. Lauke
6301fabe45 Merge branch 'v4-dev' into dropdown-keyboard 2017-04-13 23:41:15 +01:00
Idan Cohen
8c97532719 Fix popover arrow color for bottom position 2017-04-13 10:52:41 +02:00
Pierre Vanduynslager
2f94166276 Merge branch 'v4-dev' into dropdown-keyboard 2017-04-12 16:31:50 -04:00
Patrick H. Lauke
1f80f61677 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
2017-04-12 18:50:31 +01:00
Patrick H. Lauke
3275ca4b30 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
2017-04-12 18:39:23 +01:00
Pierre Vanduynslager
208e0384df Merge branch 'v4-dev' into dropdown-keyboard 2017-04-12 10:36:14 -04:00
Pierre-Denis Vanduynslager
81e12d5715 Indent 2017-04-12 09:41:27 -04:00
Patrick H. Lauke
29460b2005 Remove inappropriate role="listbox" from carousels
Closes #22061

Xref #22365
2017-04-11 11:23:40 +01:00
Patrick H. Lauke
53b2c5520b Remove inappropriate role="listbox" from carousels 2017-04-11 11:12:30 +01:00
Mark Otto
eae1d38733 Package grunt (#22396)
Remove docs files and Gruntfile from package managers
2017-04-10 21:12:24 -07:00
Patrick H. Lauke
2179cfb45f 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)
>
> ![capture](https://cloud.githubusercontent.com/assets/895831/24841663/1f9bbd46-1d81-11e7-9e96-54502b731edf.PNG)

Closes https://github.com/twbs/bootstrap/issues/22222
2017-04-10 22:33:19 +01:00
Patrick H. Lauke
7056f70240 Remove cursor: not-allowed styles 2017-04-10 22:10:20 +01:00
Pierre Vanduynslager
025ddb185e Merge branch 'v4-dev' into dropdown-keyboard 2017-04-10 11:04:05 -04:00
Patrick H. Lauke
18e8704221 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
2017-04-10 14:51:22 +01:00
Patrick H. Lauke
3f6e1faf45 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
2017-04-10 14:43:54 +01:00
Pierre Vanduynslager
d3fbebefcd Merge branch 'v4-dev' into dropdown-keyboard 2017-04-09 18:16:37 -04:00
Patrick H. Lauke
278ddd0acd Remove incorrect role="tabpanel" from navs docs
`role="tabpanel"` is not appropriate as role for the overall container - it only applies to the individual content parts of each tab
2017-04-09 22:13:07 +01:00
Patrick H. Lauke
ba306d98bb Merge branch 'v4-dev' into v4-dev-docs-navs-js-tabpanel-fix 2017-04-09 22:09:45 +01:00
Patrick H. Lauke
0af28c26ec 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
2017-04-09 22:08:36 +01:00
Patrick H. Lauke
41abd1c7a5 Merge branch 'v4-dev' into v4-dev-docs-navs-js-tabpanel-fix 2017-04-09 22:05:10 +01:00
Patrick H. Lauke
61536dd076 Merge branch 'v4-dev' into v4-docs-button-group-a11y-patch1 2017-04-09 22:03:52 +01:00
Patrick H. Lauke
6702107131 Merge pull request #22398 from patrickhlauke/v4-dev-modal-macos-fullscreen-esc-fix
Prevent default for ESC in modal.js
2017-04-09 22:00:51 +01:00
Patrick H. Lauke
50d178ece0 Remove incorrect role="tabpanel" from navs docs
`role="tabpanel"` is not appropriate as role for the overall container -
it only applies to the individual content parts of each tab
2017-04-09 21:15:05 +01:00
Patrick H. Lauke
2626eba5f1 Prevent default for ESC in modal.js
ESC can be used to close modals, but on OS X/macOS this also jumps out
of full-screen mode. `preventDefault` suppresses this.
2017-04-09 16:19:20 +01:00
Patrick H. Lauke
c5db196e76 Merge branch 'v4-dev' into v4-docs-button-group-a11y-patch1 2017-04-09 13:25:47 +01:00
Mark Otto
0719ab1888 grunt 2017-04-08 22:05:50 -07:00
Mark Otto
7f075bfb23 fixes #22135 2017-04-08 21:26:25 -07:00
Mark Otto
09f98fbd0e Update card outline mixin
Fixes #22056 by ensuring outline cards make their header/footer transparent and use the right border color.
2017-04-08 21:25:38 -07:00
Mark Otto
2dfffbde89 Rename some .open to .show (#22389)
* no more outline overrides
* rename old .open to .show
2017-04-08 16:30:18 -07:00
Mark Otto
0c59741812 property order 2017-04-08 16:29:21 -07:00
Mark Otto
90c18ebd19 Switch to ease function to remove trailing animation movement 2017-04-08 16:29:21 -07:00
Pierre-Denis Vanduynslager
73cfefd594 Do not stretch images in carousel-item 2017-04-08 16:29:21 -07:00
Mark Otto
ee5dc37ba3 drop img-fluid for w-100 2017-04-08 16:29:21 -07:00
Mark Otto
ab67ffe167 Ensure carousel works in IE10/11
- Drops the `if-supports-3d-transforms()` mixin since all our browsers do support it

- Updates carousel to not rely on that mixin
2017-04-08 16:29:21 -07:00
Pierre Vanduynslager
fe72daf2b3 Merge branch 'v4-dev' into dropdown-keyboard 2017-04-08 18:43:25 -04:00
Mark Otto
feb35b94a6 Revert "Drop width from sizing utils given .col- classes can do the same thing (follow up to #22376)"
This reverts commit 2f21403a93.
2017-04-08 15:15:14 -07:00
Mark Otto
fba27befef Add transition to .progress-bar
- Pulls in values from v3
- Closes #22371 which didn't use a transition include
2017-04-08 14:40:35 -07:00
Mark Otto
050aab338b Add dropdown-item-padding-y var
- Closes #21622 which kept the 3px
- Puts variable in proper order for shorthand (y x)
2017-04-08 14:40:11 -07:00
Mark Otto
2f21403a93 Drop width from sizing utils given .col- classes can do the same thing (follow up to #22376) 2017-04-08 14:23:47 -07:00
Jesper Strange Klitgaard Christiansen
11c2c07e26 Remove margin-left on caret if empty (#22095) 2017-04-08 14:23:07 -07:00