Making use of prefers-reduced-motion media query
#25641
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
As discussed in #25249 - if a user (Who is using Safari / iOS) requests reduced motion in their system settings, we should avoid transitions.
|
It looks like Travis is failing because stylelint doesn't know about Is there a prefered way to whitelist media features or should I open a PR to |
|
no time to test just now, but i believe editing (and no, i think it's not a bug on stylelint, as |
|
@patrickhlauke That fixed it! Tests are now passing 🎉 |
|
just to check, did you compile this locally and test it actually works as expected? |
@patrickhlauke I did indeed 👍 If you'd like I can record a little demo video of it working? |
|
Looks great to me - thanks |
|
We should document this, too. |
|
@mdo I'm happy to do that :) Is after the "Visually hidden content" section in docs/4.0/getting-started/accessibility.md a suitable place? Copy wise I'm thinking: Reduced MotioniOS & MacOS users have a system preference to Reduce Motion which is passed onto the browser. If a user has selected this option, Bootstrap will attempt to reduce the the amount of transitions on a page by defaulting them to |
|
@MikeRogers0 iirc the reduce motion preference is not limited to the browser so maybe delete "which is passed onto the browser" |
|
I think documentation-wise I'd lean more towards the following (but yes, the accessibility markdown seems the most appropriate place): @mdo ? |
|
incidentally (testing this PR) it seems |
|
@patrickhlauke I'm happy to update scss/_carousel.scss and scss/_progress.scss to remove their animation, though I'm not sure if that would reduce animation to much & make things to clunky. What do you think? Also updated |
|
Updating the progress bar to remove the animation on the candy strip was my initial aim - sadly cant test it right now as am away from my apple |
|
Updated the progress bar & carousel now have reduced animation :) Here is a demo: |
|
ah sorry @MikeRogers0 i didn't intend for you to have to do the carousel and progressbar thing. was more of a passing note. wondering if those two should (and should have been from the start?) be using the transition mixin instead. that'd then also stop them when |
|
@MikeRogers0 would it be possible for you to omit the last commit (and we'll tackle the carousel and progress bar animations separately, probably tying them to the mixin/ |
…ousels" This reverts commit 3682d53.
|
@patrickhlauke Reverted that commit 👍 |
patrickhlauke
approved these changes
Feb 25, 2018
|
@mdo @patrickhlauke Any plans to merge this? :) |
|
@MikeRogers0 went ahead and merged. Think @mdo was happy in principle, but with volume of issues/PRs we get, it's sometimes easy for things to fall between the cracks :) |
Closed
MikeRogers0
deleted the
feature/make-use-of-prefers-reduced-motion-media-query
branch
|
Ah wonderful! Thank you so much! |
|
Thank you |
eazyrepo
added a commit
to eazyrepo/bootstrap
that referenced
this pull request
Jun 27, 2018
* Use Jekyll's markdownify filter instead of a custom plugin (twbs#25319) * Allow to change `.table-striped` `odd` or `even` (twbs#25333) * Remove -Pre from Nuget install * dist * rearrange and override extra borders * tweak html * Update dropdown.js to allow referenceElement (twbs#25219) * ignore case (twbs#25373) Less on 2 symbols * Remove escaping selector and add a warning to inform folks to escape their selectors (twbs#25390) * Use variables for theme-color-level function Closes twbs#25313 * Add missing flex-fill utility * Document .flex-fill class in flex utils * Add CSS Utility for `auto` width and height Properties (twbs#24249) Currently bootstrap only provides 4 variations of `width` and `height` css utilities, which are: 1. 25% 2. 50% 3. 75% 4. 100%. Here, I'm adding `auto` to the list. This is useful when we need to reset the width/height value back to the browser default value at some point. * Allow to customize vertical margin of `nav-divider` mixin * v4.1: Add .dropdown-item-text (twbs#22965) * Add .dropdown-item-text class * Add example of plain text within a .dropdown-menu, too * reorganize, simple/clearer headings * Feature: Add carousel fade option (twbs#22958) * Move helpful code comments * Add .carousel-fade option to Sass * Document example of the fade carousel * more logical warning of the .active class on carousel items * Update devDependencies. (twbs#25371) * Fix typo in navs.md (twbs#25404) * Update jQuery to v3.3.1. (twbs#25398) * Fix typo in approach.md (twbs#25492) * Update devDependencies and gems. (twbs#25502) * Fix example Blog post card text overflowing for medium screen size. (twbs#25416) * Replace unicode character in _hover.scss (twbs#25503) * Fix "CVV" label pointing to wrong field (twbs#25518) * Clarify stacked-to-horizontal in layout/grid.md (twbs#25520) - Fixes typo with "with at" in "horizontal with at the small breakpoint" * Add FontAwesome to icon list. (twbs#25451) * Examples: Prevent focus into closed offcanvas (twbs#25524) * Prevent focus into closed offcanvas * Override .custom-select width in .form-inline (twbs#25414) Fixes twbs#25413 * close twbs#25534 * Fix pagination buttons hover z-index (twbs#25532) * Clarify migration docs to remove mention of .table-responsive being for the parent element vs the table element itself (twbs#25539) * Update devDependencies and gems. (twbs#25551) * Enable `scss/dollar-variable-default` rule (twbs#25542) This checks if all variables are `!default`. * Fix the incorrect id in center modal example * Remove `show` class from example code (twbs#25570) * Create a variable for label margin bottom (twbs#25561) * use $input-bg for $custom-select-bg (twbs#25564) * use $input-bg for $custom-select-bg * Update themeing docs for more clearly how to remove from map (twbs#25589) * Add note about insert position of "map-remove" * Use optional keys instead of required keys * set color to form-control-plaintext (twbs#25565) * set color to `.form-control-plaintext` * fixes readability on dark themes like ‘darkly’ * https://bootswatch.com/darkly/index.html#forms * https://bootswatch.com/slate/index.html#forms * https://bootswatch.com/superhero/index.html#superhero * https://bootswatch.com/solar/index.html#forms /cc @thomaspark * dist * Update `.sr-only` mixin and utility (twbs#25197) * Remove clip-path from .sr-only utility as it causes perf regressions in Chrome * change snippet to example * Fix border-radius on Browse button for custom file input inside input groups (twbs#25356) * Update stylelint config to add missing properties (twbs#25572) * add missing properties list of new properties: align-content animation-fill-mode appearance column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns direction fill flex-shrink orphans page-break-after page-break-before page-break-inside perspective src stroke unicode-bidi widows * fix invalid JSON config add curly brackets * Update .stylelintrc * Dropdown - Allow to disable Popper.js style (twbs#24092) * Dropdown - Allow to disable Popper.js style * Update dropdown.js * Update dropdown.html * copy changes * Prevent word-wrap (twbs#25248) Fixes twbs#25235 * Update position.md (twbs#25607) 2 small typos * Reword alert and list group text to avoid "a/an" problems Closes twbs#25611 * [Docs] Clarify suggested use of custom validation styles, add note about resetting form appearance after validation (twbs#25628) * Expand/clarify recommendation for using custom validation styles Seems support for correctly announcing browser default navigation bubbles/notifications has improved recently. Now it seems only Chrome (at least on Win and Android, not tested on macOS) is the odd one out. However, we should really make sure the custom validation messages are also tied correctly to their relevant form controls - need to dig out the PR that will ensure that. * Add note about resetting form appearance after submission xref twbs#25626 * Add `type="button"` to `<button>`s in accordion example (twbs#25643) For consistency. Closes twbs#25642 * Fix carousel transition duration (twbs#25218) * Custom range input (twbs#25600) * added the styling * added the documentation * update for one rule per line * fix hound error: trailing whitespace * trimmed off vendor prefixes * Add note about track and thumb * Psuedo-elements must be split across multiple rulesets to have an affect * Fix firefox inner focus * Seems that FF is the only one affected by this * Add support for gradients * Add labels, clarify min/max changes * add step example * add custom range vars * Be more explicit where to find variables (twbs#25624) * Tell where to find the variables to override * Be consistent with path to _variables.scss * Get rid of some 'our' in the doc Replaced by 'Boostrap's' when relevant * Add color variable for caption (twbs#25657) * dist * make it a var * Consistent usage of $(document.body) instead of $('body') (twbs#25671) * Brush up vertical rhythm of form-check in docs. Closes twbs#25546 This adds `form-group` to add the same vertical space to the `form-check` as in other grouped controls used in form sample markup. Thanks! * Remove disabling of stylelint rule This file no longer has intentional indentation errors * Add focus states to custom docs buttons * Fix typo of example in hiding doc * dist * Fixes twbs#25703 * Add tabindex attribute to disabled buttons sample. Closes twbs#23361 (twbs#25680) As discussed in issue's comment: https://git.io/vAuPW Thanks! * Remove unused variable (twbs#25670) This variable is not used anywhere. Leftover from twbs#18373. * docs skippy partial (twbs#25750) * load skippy markup from includes * display on xl viewport See issue twbs#25711 * Fix leftover reference to v4.0.0-alpha.6 Running `./build/change-version.js v4.0.0-alpha.6 v4.0.0` fixed this, so the version change script works fine. I'm presuming instead this change was just omitted from 35f80bb, and then wouldn't have been caught by subsequent runs of `change-version`, since it only ever replaces the exact old version string specified. * Replace img-fluid by w-100 to conform with HTML * Adding a variable to handle the change of a modals border-radius. (twbs#25691) * dist * Fix twbs#25746 * Update blockquote migration docs to reflect twbs#22949 Fixes twbs#25669, closes twbs#25779. * Update devDependencies and gems. (twbs#25708) * add code coverage * Add a bit of documentation on how to run the code coverage (twbs#25783) * Update webpack.md Minor edits for style and consistency * style: align some vars (twbs#25785) * add Icons8 to icon options (twbs#25763) [Icons8](https://icons8.com/) is a great resource for icons. They provide 15 different icon styles, exportable as fonts or svg * Collapse with flex elements - simple approach (twbs#25806) * twbs#22600: prevent display:block for visible content * allow transition for elements with show class * re-use gray for bd-example border / background (twbs#25751) * Fix caret alignment (twbs#25719) * Allow customization of breadcrumb border radius (twbs#25807) * Clean shell scripts (twbs#25704) * Replace "loose" HEX values with their respective variables (twbs#25672) * Fix examples' issues twbs#25664 and twbs#25388 (twbs#25665) * Prevent sign-in form from going outside viewport (twbs#25388) * Workaround IE centering bug * Disable link functionality on disabled `btn-link` (twbs#25645) Future-proof disabling of clicks on disabled `btn-link`. Fixes twbs#25639 ensuring consistency between `btn-link` `<button>`s and `<a>`s when disabled. * Add basic position to dropup/right/left and dropdown-menu-right (twbs#25400) * Rename `.custom-file-control` to `.custom-file-label` (twbs#25736) * Use callout without custom Jekyll plugin. * callout.html: drop whitespace and better usage comment. * Use bugify without custom Jekyll plugin (twbs#25334) * Clarify the necessary `data-target`/`href` attribute for carousel controls (twbs#25690) * Variable transition durations (twbs#25662) * fix get the transition duration parent * saucelabs-unit-test.js: tweak failed tests message (twbs#25836) * approach.md: Fix empty link. * approach.md: Use normal apostrophes. They are converted when building. * Add Sinon to do better unit test * Document `.form-control-range`. (twbs#25839) * Remove custom example plugin. (twbs#25784) * Enable docsearch in development env. Previously a search redirected to `https://getbootstrap.com/...` * Alternative solution. Rely on `site.url` which is different for production. In that case do nothing with the search result, otherwise when in development remove our url from it. * Fix order of Save/Close buttons in modal code example (twbs#25855) * Update vertical pills example (twbs#25852) Add the column/grid to the example code (which is what makes it vertical in the first place) * theming.md Typo Fix (twbs#25875) it's ≠ its * Separate issue templates, add support doc (twbs#25705) * Update issue template to break down by bug and template, add support doc to close twbs#23133 * add links from readme for bug and feature templates * Making use of `prefers-reduced-motion` media query (twbs#25641) * Making use of `prefers-reduced-motion` media query As discussed in twbs#25249 - if a user (Who is using Safari / iOS) requests reduced motion in their system settings, we should avoid transitions. * Ignoring prefers reduced motion for CSS Linting * Updating copy clarifying the reduce motion functionality in accessibility.md * Use transitionEnd in QUnit since we moved away from PhantomJS * throw error when coverage is under our thresholds * Update dependencies. * tests: use QUnit from the jQuery CDN. * Use sinon from cdnjs. * Update to workbox 3.0 & fix breaking changes * sw.js: fix TypeError with new workbox. * Update workbox.js * Update all devDependencies. Kept back karma-qunit and qunitjs because tests fail. * fix rollup config * tests: load 3rd-party libs from the local node_modules folder. This reduces duplication and the chances to forget to update something. * Remove the local jquery-1.9.1.min.js. * Fix skip element disabled via attribute when using keyboard navigation * Fix duplicate `main` element. * Fix spacing between Item and numbers * fix bundle and run test against it * Add .bg-transparent to docs * docs: Switch to StackPath's URL. While the old one will keep working, better switch to the new one. * Revert "docs: Switch to StackPath's URL." This reverts commit 7052085. * Correct children selector * fixes twbs#25918 * dist * Add small not to float docs about mixing with flex items Closes twbs#25829, closes twbs#25924 * fixes twbs#25343 by mentioning how collapse animates in docs * Add .text-monospace util * Remove navbar align * Close twbs#25697 Removes the .justify-content-between from a navbar form example given it's the default style. Instead, mention how to adjust this and link to flex utils. * add .text-body, fixes twbs#25412 * add 50% translucent black and white text * document new text color utils * Fix Chrome's rendering of .card-columns Uses orphans/widows trick from @fran-worley at twbs#20925 (comment). Fixes twbs#20925. * Add new .flex-grow and .flex-shrink utils * Mention browserslist config in our docs to close twbs#25429 * Add box-shadow utilities (twbs#25758) * Deprecate .text-hide (twbs#26173) * dist * docs edit suggestion * Tiny grammar and punctuation tweaks to a comment. 1. It's == "it is" 2. The subject of the sentence is "Only one" (not "these") so the verb must agree with it. Feel free to do nothing with this change, use it, etc - I just saw this while reading through the code. * Dashboard updates (twbs#26179) * Update Dashboard example - Replaces .sticky-top on .navbar with .fixed-top - Adjusts padding on main content area and sidebar to account for fixed navbar - Move to padding in sidebar instead of top: 48px; fixes Firefox rendering issue - Adds new .shadow utility for a little extra cherry on top - Moves sticky styles to separate feature query ruleset to avoid IE rendering issues * Add .w-100 to chart to fix IE horizontal scroll from label that extended past viewport * Update offcanvas example for IE support - Replaces CSS variables with their appropriate hex values - Fixes the broken navbar transition by moving from 2D translates to using position - Fix broken IE navbar toggler placement with some utilities (not necessary anywhere else, but necessary given flexbox quirks) * Allow non-string content as breadcrumb divider (twbs#25581) * Allow url(), attr(), none,... as breadcrumb divider * Update breadcrumb divider docs * Pagination move `.page-link:focus` outline value to variable `$pagination-focus-outline` so we can unset it via Sass and don't have to re-implement browser defaults * dist * Use https when possible. * Fix broken URI fragments and redirects. * docs: Switch to StackPath's URL. While the old one will keep working, better switch to the new one. * Remove note about multiple inputs (twbs#26194) * Remove note about multiple inputs * patchs the PR and removes the word Also * add examples to theming docs section on css vars in media queries, closes twbs#26205 * closes twbs#26213 * vnu.jar: Ignore all wrong language code warnings. * Ship v4.1.0 (twbs#26218) * update docs path from docs/4.0/ to docs/4.1/ * bump version to 4.1.0 * Update redirects to work for 4.1 docs move * Update docs version switcher to include latest and link to 4.0 docs * re-run dist * Update package-lock.json * Update docs-navbar.html * Clean up globals. Also, add a missing license header in build/workbox.js. * v4 improve coverage (twbs#25945) * Improve code coverage for our Button plugin * improve coverage for our Alert plugin * test tooltip update method * test update and dispose for dropdown * increase code coverage requirements * Fix incorrect class name (twbs#26239) Fixes twbs#26235 * Update dependencies and gems (twbs#26234) * Fix incorrect value of Stylelint option (twbs#26192) * update README.md - debug search option is now in application.js (twbs#26263) * Dropdowns `display` default value (twbs#26272) * modal use global scope for default * Docs/examples: change links to Sass documentation and example.com to https * fix issue related to Object.keys and Dropdown issue * [trivial] Correct typos (twbs#26297) * Remove `dialog` from the HTML5 shim style (twbs#26269) `<dialog>`, in browsers that support it, has user agent styles of `dialog { display:block; ...} dialog:not([open]) { display:none; }` by forcing it to `display:block` in the shim, the dialog is shown even when closed. There's no clean way to shim this for non-supporting browsers, but arguably these browsers would have further problems with pure `<dialog>` usage anyway, and it's up to authors to then use different elements/shims. * Resolve twbs#26262: Add deprecated warning (twbs#26292) * Bump version to 4.1.0 for remaining files. * breadcrumb.md: Remove trailing space. * Suppress text-hide deprecation warning (twbs#26242) * Update devDependencies. (twbs#26309) * Update devDependencies. (twbs#26322) * Be explicit in the docs for deprecating text-hide * typo * detect test exceeded maximum duration on Sauce Labs * Update Jekyll to 3.8.0. (twbs#26352) * Print color fix dark tables and dark theads (twbs#26193) * workaround for IE that check indicator does not appear (twbs#25944) * Replace reboot monospace hack with system font stack * add validation styles for .form-control-file (twbs#26181) * Remove unnecessary resetting of left round (twbs#26238) * Closes twbs#26300: Add cursor pointer to carousel indicators * Change accordion example id (twbs#26391) for clarity/consistency with other similar examples * Pass docs version to search form and switch to the new index. Also, move the search code to a separate file. * Add comment in docs JS files. * Doc update - remove media-breakpoint-up(xs) (twbs#26316) * Doc update - remove media-breakpoint-up(xs) If media-breakpoint-down(xl) is not listed, then media-breakpoint-up(xs) does not need to be listed either. The above 4 media queries are now aligned with the 4 media-breakpoint-up mixins (just like their media-breakpoint-down counterparts). * Improve media-breakpoint-up/down docs * Update README.md * Simplify custom file inner height for generated browse button * dist * Bump version to v4.1.1 * Fix heading levels (twbs#26433) H3 was used without preceding H2, breaking document flow. * Fix z-index target (twbs#26361) * fix(doc): typo in dropdowns.md * [trivial] Rewording in tooltips. Closes twbs#26467 (twbs#26521) * Fix double-transition bug (twbs#26452) By applying the transition: CSS property only to classes that are active during sliding, we avoid an unnecessary, non-zero-time animation that although mostly invisible, does interfere with e.g. z-index based parallax * closes twbs#26543, fixes twbs#26542 * Fix/add more correct labels/descriptions for input group examples (twbs#26551) Among other things, closes twbs#26548 * Update devDependencies and gems. Downgrade bundlesize until they make brotli optional since it doesn't work with node.js 10.x yet. So, babel, qunit/karma-qunit and bundle-size aren't the latest versions. * chore(deps): update qunit and karma-qunit * fix(tooltip): remove useless unit test * Update again. * Custom forms transition * Add disabled bg color to disabled custom file * Add coverall to follow our coverage * fix branch for coveralls badge * Run coveralls only on Travis and only once. * Update package-lock.json. * Remove the unused docs upload preview stuff. (twbs#26599) * https link to editorconfig.org * Fix inline labels with a custom select (twbs#26615) Add an sr-only class to the label on inline labels with a custom select * Changed Node.js download page (twbs#26638) Link to the more user-friendly Node download page (rather than just the raw directory view) * fix(tooltip): xss in container option * fix(collapse): xss in parent option * fix(scrollspy): xss in target option * Generate safari-pinned-tab.svg again. * refactor(plugins): improve how we query elements * chore(bundlesize): increase bootstrap.js max size * sw.js: change to a relative link for the workbox files. This was broken after the docs refactoring. * Stricter stylelint rules * refactor(plugins): query elements without jquery * Limit .close hover/focus to non-disabled controls (twbs#26654) * Fix markdown code inside HTML code. (twbs#26662) * HTTPS link (twbs#26663) saves a redirect * Add additional wording to the Introduction section of Bootstrap docs about the bootstrap bundle js (twbs#26688) * Fix node_modules path (twbs#26653) * Remove inkscape data from brand svgs (twbs#26708) * Update package-lock.json with npm 6.3.1. * Update gems. * Update all devDependencies apart from bundlesize and babel. Newer bundlesize versions still don't work with node.js 10.x. babel has some bugs that we need to be fixed. * Change karma tests to run sequential. I was getting port in use errors. * Update folder structure (twbs#26729) * Remove disabled class from wrapper `disabled` class is not needed for wrapper. * dist * Move `eslint-plugin-compat` to the extends array. * Render inline svg like img (twbs#25874) * Update box-shadows on .custom-select (twbs#26754) - Fixes twbs#25656 where custom selects had the wrong focus shadow - Fixes twbs#26668 where custom selects had no inset shadow (also closes twbs#26572 which had the wrong form classes on the first example anyway) * Fixes Edge and IE label overlapping issue (twbs#25919) The 'Floating labels' example is only supported on Chrome, Safari and Firefox. On Edge and IE the label is displayed always and any text input overlaps the label which makes it unreadable. The fix here targets Edge and IE and makes the form behave normally, the labels are hidden and the placeholder color is standard. * dist * feat(dropdown): add original click event * Add broken-link-checker. * fix(tooltip): get tip on placement change
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
As discussed in #25249 - if a user (Who is using Safari / iOS) requests
reduced motion in their system settings, we should avoid transitions.