Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(prefers-reduced-motion): Edit text and improve example #26630

Merged
merged 4 commits into from
May 11, 2023
Merged

fix(prefers-reduced-motion): Edit text and improve example #26630

merged 4 commits into from
May 11, 2023

Conversation

dipikabh
Copy link
Contributor

@dipikabh dipikabh commented May 7, 2023

Description

Fx113 introduces prefers-reduced-transparency (#25773).

While going through the existing page on a similar media query, prefers-reduced-motion, I came across the following things that could be improved for clarity:

  • replaced "system" with "device"
  • replaced pronouns like "it" with the doer for clarity
  • moved pieces of info from syntax descriptions to the intro paragraph
  • added a link that explains "vestibular motion disorders"
  • rewrote "Examples" description to add more context and added a description to the example "Result"
  • tweaked the example so that a change is actually visible when "Reduce motion" is enabled
  • made "See also" items compliant with the new guidelines

Motivation

To improve clarity of the text

@dipikabh dipikabh requested a review from a team as a code owner May 7, 2023 17:25
@dipikabh dipikabh requested review from estelle and removed request for a team May 7, 2023 17:25
@github-actions github-actions bot added the Content:CSS Cascading Style Sheets docs label May 7, 2023
@github-actions
Copy link
Contributor

github-actions bot commented May 7, 2023 •
edited
Loading

Preview URLs

External URLs (3)

URL: /en-US/docs/Web/CSS/@media/prefers-reduced-motion
Title: prefers-reduced-motion

(comment last updated: 2023-05-11 20:34:12)

@dipikabh dipikabh mentioned this pull request May 8, 2023
Merged
Josh-Cena
Josh-Cena reviewed May 8, 2023
View reviewed changes
files/en-us/web/css/@media/prefers-reduced-motion/index.md Outdated
@@ -9,20 +9,20 @@ browser-compat: css.at-rules.media.prefers-reduced-motion

> **Warning:** An embedded example at the bottom of this page has a scaling movement that may be problematic for some readers. Readers with vestibular motion disorders may wish to enable the reduce motion feature on their device before viewing the animation.

The **`prefers-reduced-motion`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses.
The **`prefers-reduced-motion`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/@media#media_features) is used to detect if a user has enabled a setting on their device to minimize the amount of non-essential motion. The setting is used to convey to the browser on the device that the user prefers an interface that removes or replaces motion-based animations that trigger discomfort for those with [vestibular motion disorders](https://www.a11yproject.com/posts/understanding-vestibular-disorders/). Animations such as scaling or panning large objects can cause vestibular motion triggers.
Copy link
Member

@Josh-Cena Josh-Cena May 8, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It should be "the user", isn't it? The particular user that the browser is a "user agent" for.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be "a user" using "a browser" as "a user agent". There would have been a "the" if the sentence was "...used to detect if the user of a browser (or the user of a device) has...". In the second sentence, everything is in reference to that specific device and user and so preceded with "the".

estelle
estelle reviewed May 8, 2023
View reviewed changes
files/en-us/web/css/@media/prefers-reduced-motion/index.md Outdated Show resolved Hide resolved
files/en-us/web/css/@media/prefers-reduced-motion/index.md Outdated Show resolved Hide resolved
files/en-us/web/css/@media/prefers-reduced-motion/index.md Outdated Show resolved Hide resolved
files/en-us/web/css/@media/prefers-reduced-motion/index.md Outdated
@@ -42,32 +42,35 @@ For Firefox, the `reduce` request is honoured if:

## Examples

This example has a scaling animation by default. If Reduce Motion is enabled in your accessibility preferences, the animation is toned down to a simple dissolve without vestibular motion triggers.
This example uses a scaling animation for the purpose of demonstrating `prefers-reduced-motion`. In this example, if a user has enabled a setting for reduced motion in the accessibility preferences on their device, the `prefers-reduced-motion` media query will detect it and the CSS rule defined below will tone down the [animation](/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) on the box to a simple `dissolve` without causing vestibular motion triggers.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
This example uses a scaling animation for the purpose of demonstrating `prefers-reduced-motion`. In this example, if a user has enabled a setting for reduced motion in the accessibility preferences on their device, the `prefers-reduced-motion` media query will detect it and the CSS rule defined below will tone down the [animation](/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) on the box to a simple `dissolve` without causing vestibular motion triggers.
This example uses a scaling animation for the purpose of demonstrating `prefers-reduced-motion`. If you have enabled the reduced motion setting in the accessibility preferences on your device, the `prefers-reduced-motion` media query will detect the preference and the CSS within the reduced motion rules, with the same [specificity](/en-US/docs/Web/CSS/Specificity), but coming later in the [CSS source order](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#source_order) will take precedence, tone down the [animation](/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) on the box to the `dissolve` animation, a more muted animation that is not a vestibular motion trigger.

I changed the text from "a user" to "you", as the reader is the one who will see the difference. I think it's helpful, but understand if you disagree.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • changed "user" to "you"
  • I retained the wording around "a setting for reduced motion" because the specific setting name depends on the OS.

files/en-us/web/css/@media/prefers-reduced-motion/index.md Show resolved Hide resolved
@github-actions github-actions bot added the merge conflicts 🚧 [PR only] label May 9, 2023
@github-actions
Copy link
Contributor

github-actions bot commented May 9, 2023

This pull request has merge conflicts that must be resolved before it can be merged.

@github-actions github-actions bot removed the merge conflicts 🚧 [PR only] label May 10, 2023
@dipikabh dipikabh requested a review from estelle May 10, 2023 23:02
estelle
estelle approved these changes May 11, 2023
View reviewed changes
Copy link
Member

@estelle estelle left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good!

@estelle estelle merged commit e9830ea into mdn:main May 11, 2023
@dipikabh
Copy link
Contributor Author

Thank you!

@dipikabh dipikabh deleted the fx113-edit-reduced-motion branch May 12, 2023 01:00
HannahPeuckmann pushed a commit to HannahPeuckmann/content that referenced this pull request May 15, 2023
@dipikabh @estelle @HannahPeuckmann
fix(prefers-reduced-motion): Edit text and improve example (mdn#26630)
bd77d96 
* edits to page for clarity

* improve example explanation

* fix review comments

* Update files/en-us/web/css/@media/prefers-reduced-motion/index.md

---------

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
dipikabh added a commit that referenced this pull request Jun 13, 2023
@HannahPeuckmann @bodhivb
@wbamberg @dependabot @rebloor @oti @yarusome @estelle @bsmth @dipikabh @luckylooke @CanadaHonk @nintendoit @Josh-Cena @hamishwillee @yin1999 @frwdrik @hiddenboox @queengooborg @amirhosainshahsavari @dcecile @JasonLamv-t @RedBeard0531 @gkrnours @stevennyman @OnkarRuikar @postmeback @jasonren0403 @daiwanxing @MohitMaheshwari1711
Updating content that storage is always partitioned (#24250)
e767e78 
* Updating content that storage is always partitioned and storage access grants are limited to cookies

* Avoiding the phrase 'cookie storage'

* implemented review from Tricolon

* reverted changes to storage_access_policy

* clean up

* add service workers to partitioned APIs

* linting

* Fix: Use language keywords instead of framework type names in the examples of 'WebSocket' (#26725)

* Add a bit about SPAs (#26711)

* Bump @mdn/yari from 2.18.1 to 2.20.0 (#26730)

* DNR corrections in URLTransform's queryTransform (#26732)

* Fix the description of the display property according to the CSS specification (#26612)

* change: `block element box` -> `block level box`

* change: `inline element boxes` -> `inline level boxes`

* change: `block element` -> `block level`

* change: `inline element` -> `inline level`

* fix: `inline/block level box` -> `inline/block box`

* change: `inline/block level` -> `inline-level/block-level element`

* fix: `block level` -> `block-level element`

* Adding missing sections for `container*` (#25739)

* Update sections for `container`

* Update sections for `container-name`

* Update sections for `container-type`

* Update files/en-us/web/css/container-name/index.md

---------

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
Co-authored-by: Estelle Weyl <estelle@weyl.org>
Co-authored-by: Brian Thomas Smith <brian@smith.berlin>

* fix(prefers-reduced-motion): Edit text and improve example (#26630)

* edits to page for clarity

* improve example explanation

* fix review comments

* Update files/en-us/web/css/@media/prefers-reduced-motion/index.md

---------

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

* Added info for 'muted' driven emission (#26641)

* Added info for 'muted' driven emission

Fixing missing information that muting also fires this event.
Standard spec: https://html.spec.whatwg.org/multipage/media.html#event-media-volumechange

* Update files/en-us/web/api/htmlmediaelement/volumechange_event/index.md

* lint

---------

Co-authored-by: wbamberg <will@bootbonnet.ca>

* Add page for prefers-reduced-transparency (#25289)

* Add page for prefers-reduced-transparency

* Update page for prefers-reduced-transparency

Changed text as requested in PR comments.

---------

Co-authored-by: Brian Thomas Smith <brian@smith.berlin>
Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>

* Fix arrow syntax explanation (#26704)

* remove bracket around the parameter

The example should omit the brackets around the parameter, as described in the explanation above this code.

* Update files/en-us/learn/javascript/building_blocks/functions/index.md

* Update files/en-us/learn/javascript/building_blocks/functions/index.md

* Update index.md

---------

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

* Add RTCAudioSourceStats (#26667)

* Add RTCAudioSourceStats

* Update files/en-us/web/api/rtcaudiosourcestats/index.md

Co-authored-by: wbamberg <will@bootbonnet.ca>

* Apply suggestions from code review

Co-authored-by: wbamberg <will@bootbonnet.ca>

* Apply suggestions from code review

Co-authored-by: wbamberg <will@bootbonnet.ca>

* Update files/en-us/web/api/rtcaudiosourcestats/index.md

* Add keys for BCD data

* Make it clear that the audiolevel can also be calculated

---------

Co-authored-by: wbamberg <will@bootbonnet.ca>

* correct language tag of code fence (#26738)

* Fix code comment in dialog example (#26669)

* Update index.md (#26744)

* Remove Prettier ignore for /web/web_components (#24225)

* Bump @mdn/yari from 2.20.0 to 2.20.3 (#26747)

* Update length values description (#26728)

* Update length values description

length values are not always absolute. For example we can use 2em for width property as a length value but it is not absolute. I corrected this in the Values section.

* Update files/en-us/web/css/width/index.md

Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>

---------

Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>

* Add TransformStream note about returning a promise (#26757)

* Remove emphasis on WritableStream controller (#26758)

* Remove emphasis on WritableStream controller

* copy edit

* lint

---------

Co-authored-by: wbamberg <will@bootbonnet.ca>

* fix: Updated description of example which in `JavaScript.Object` to be more accurate (#26742)

Update index.md

* Fix some more return statements (#26759)

* Fix return value for toString

* Fix some more return statements

* Fix 26745: don't auto-play (#26748)

* Fix 26743: Fix return value; improve example (#26753)

* Fix return value for Range: getBoundingClientRect() (#26754)

* Mention that Set iterators have a defined order (#26727)

* Mention that Set iterators have a defined order

* Do it for Map

---------

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

* Accentuate month being 0-index in getMonth example (#26734)

* Accentuate month being 0-index in get month example

`Date.getMonth` behavior differ slightly from the similar method as it return the index of the month and is 0-indexed, while the other method return ordinal values instead of index and don't have this distinction.

One could be tempted to run `${year}-${month}-${day}` and `${hour}:${minutes}:${seconds}` after the code in exemple to get iso formated date and time but the month would be off by one as iso month are 1-indexed, january being 1 and december being 12.

Adding a comment with the actual output put emphasis on this difference in behavior and might prevent people being surprised by that after the fact. The value chosen for the date is partly random. 2000 is the first year not starting with 19; January cause the month part to be 0 which should call attention to itself; 17 is high enough so it cannot be a month and I like it; 16 is in the 24h hour clock; 45 is high enough to not be confused with an hour; 30 is here for lack of imagination.

* Update files/en-us/web/javascript/reference/global_objects/date/index.md

* Update files/en-us/web/javascript/reference/global_objects/date/index.md

* Update files/en-us/web/javascript/reference/global_objects/date/index.md

---------

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

* Do not use JSON.stringify in console.log (#26662)

* Update index.md

* fix: not use JSON.stringify when print via console.log

* fix: Update the description of callbackFn's accumulator in `Array.reduceRight()` (#26594)

* Update index.md

* Update files/en-us/web/javascript/reference/global_objects/array/reduceright/index.md

* Update files/en-us/web/javascript/reference/global_objects/array/reduceright/index.md

---------

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

* Remove random arrow from Endianness example (#26767)

* Add missed redirect (#26769)

* remove self-reference links (#26764)

* remove a self reference link

* Update index.md

* Update index.md (#26771)

* Update index.md

Added the missing bracket

* Update files/en-us/web/api/stylepropertymap/append/index.md

---------

Co-authored-by: Hamish Willee <hamishwillee@gmail.com>

* correct http status code message (#26765)

* Fix 26741: reduce ambiguity, remove unneeded word (#26750)

* Fix 26741: reduce ambiguity, remove unneeded word

* Update files/en-us/web/http/overview/index.md

---------

Co-authored-by: Hamish Willee <hamishwillee@gmail.com>

* Window.beforeunload event requires sticky activation (#26772)

* Update `:paused` content (#26768)

* Update `:paused` content

* Update files/en-us/web/css/_colon_paused/index.md

* Update files/en-us/web/css/_colon_paused/index.md

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

* Update files/en-us/web/css/_colon_paused/index.md

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

* Update files/en-us/web/css/_colon_paused/index.md

Co-authored-by: A1lo <yin199909@aliyun.com>

---------

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
Co-authored-by: A1lo <yin199909@aliyun.com>

* FF114 ECMAScript module support (#26774)

* removed while loop from the example (#26588)

Co-authored-by: Mohit Maheshwari <mohitmaheshwari@1MGH-LPTP-1483.local>

* Updating content that storage is always partitioned and storage access grants are limited to cookies

* Avoiding the phrase 'cookie storage'

* implemented review from Tricolon

* less firefox centric

* clean up merge

* capitalization

---------

Co-authored-by: Hannah Peuckmann <peuckmann@uni-potsdam.de>
Co-authored-by: Bodhi van Baardewijk <bodhivanbaardewijk@hotmail.com>
Co-authored-by: wbamberg <will@bootbonnet.ca>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: rebloor <git@sherpa.co.nz>
Co-authored-by: oti <oti@users.noreply.github.com>
Co-authored-by: yarusome <97945148+yarusome@users.noreply.github.com>
Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
Co-authored-by: Estelle Weyl <estelle@weyl.org>
Co-authored-by: Brian Thomas Smith <brian@smith.berlin>
Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
Co-authored-by: Ctibor Laky <luckylooke@gmail.com>
Co-authored-by: CanadaHonk <19228318+CanadaHonk@users.noreply.github.com>
Co-authored-by: nintendoit <91181094+nintendoit@users.noreply.github.com>
Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
Co-authored-by: Hamish Willee <hamishwillee@gmail.com>
Co-authored-by: A1lo <yin199909@aliyun.com>
Co-authored-by: Fredrik Vaeng Røtnes <frwdrik@gmail.com>
Co-authored-by: Sebastian Sobociński <hiddenboox@users.noreply.github.com>
Co-authored-by: Queen Vinyl Da.i'gyu-Kazotetsu <vinyldarkscratch@gmail.com>
Co-authored-by: Amirhosain Shahsavari <shvb2007@gmail.com>
Co-authored-by: Dan Cecile <dancecile@gmail.com>
Co-authored-by: Jason Lam <jasonlamv-t@hotmail.com>
Co-authored-by: Mathias Stearn <redbeard0531@gmail.com>
Co-authored-by: L. Coues <couesl@gmail.com>
Co-authored-by: Steven Nyman <35897452+stevennyman@users.noreply.github.com>
Co-authored-by: Onkar Ruikar <87750369+OnkarRuikar@users.noreply.github.com>
Co-authored-by: Arka Poddar <poddararka27@gmail.com>
Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
Co-authored-by: Wonder Dai <37327614+daiwanxing@users.noreply.github.com>
Co-authored-by: MohitMaheshwari1711 <39165319+MohitMaheshwari1711@users.noreply.github.com>
Co-authored-by: Mohit Maheshwari <mohitmaheshwari@1MGH-LPTP-1483.local>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Josh-Cena Josh-Cena Josh-Cena left review comments

@estelle estelle estelle approved these changes

Assignees

@estelle estelle

@dipikabh dipikabh

@Josh-Cena Josh-Cena

Labels
Content:CSS Cascading Style Sheets docs
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@dipikabh @estelle @Josh-Cena