| Age | Commit message (Collapse) | Author | Files | Lines |
|---|
|
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)
|
|
* 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.
|
|
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
|
|
|
|
* 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
|
|
|
|
|
|
|
|
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.
|
|
|
|
* 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
|
|
...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
|
|
|
|
|
|
Closes #22061
Xref #22365
|
|
|
|
Remove docs files and Gruntfile from package managers
|
|
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)
>
> 
Closes https://github.com/twbs/bootstrap/issues/22222
|
|
|
|
|
|
* 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
|
|
|
|
`role="tabpanel"` is not appropriate as role for the overall container - it only applies to the individual content parts of each tab
|
|
|
|
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
|
|
|
|
|
|
patrickhlauke/v4-dev-modal-macos-fullscreen-esc-fix
Prevent default for ESC in modal.js
|
|
`role="tabpanel"` is not appropriate as role for the overall container -
it only applies to the individual content parts of each tab
|
|
ESC can be used to close modals, but on OS X/macOS this also jumps out
of full-screen mode. `preventDefault` suppresses this.
|
|
|
|
|
|
|
|
|
|
Fixes #22056 by ensuring outline cards make their header/footer transparent and use the right border color.
|
|
|
|
|
|
* no more outline overrides
* rename old .open to .show
|
|
|
|
|
|
|
|
|
|
- Drops the `if-supports-3d-transforms()` mixin since all our browsers do support it
- Updates carousel to not rely on that mixin
|
|
|
