Unstyled buttons are now ugly when prefers-reduced-motion is enabled
Closed, ResolvedPublicBUG REPORT
Actions

Assigned To

Authored By

	Nikki
	May 18 2022, 7:52 PM

Description

Unstyled buttons, e.g. when editing a page with the source editor, are now showing up in an ugly style that is neither the browser default nor the Wikimedia style when prefers-reduced-motion is enabled.

It seems to be caused by a background-attachment: initial !important; rule - disabling it using the browser's dev tools causes the buttons to revert to their usual default style.

Screenshot taken when editing Project:Sandbox on mediawiki.org:

QA steps

Enable reduced motion mode (in system preferences > accessibility in Apple)
Visit https://mediawiki.org/wiki/Special:Preferences?tableofcontents=0#mw-prefsection-editing editing tab and check the box "Temporarily disable the visual editor while it is in beta" and click "Enable the editing toolbar"
Visit https://www.mediawiki.org/wiki/VisualEditor?action=edit
Buttons at bottom should look like this:

QA Results - Prod

AC	Status	Details
1	✅	T308705#7997372

Details

	Subject	Repo	Branch	Lines +/-
	mediawiki.skinning: Amend prefer-reduced-motion accessibility rules	mediawiki/core	master	+8 -4

Customize query in gerrit

Related Objects

Mentioned In: T254399: Add ability to take `prefers-reduced-motion` user setting into account in Vector
Mentioned Here: T254399: Add ability to take `prefers-reduced-motion` user setting into account in Vector

Event Timeline

Nikki created this task.May 18 2022, 7:52 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 18 2022, 7:52 PM

This is a consequence of T254399

Setting any property of a standard button (even to its initial value) will disable all user agent styles. As all elements are targeted, that explains these results.

To some degree, the problem is also that these very old buttons are unstyled to begin with. Worse, their styling differs almost per wiki as many wikis have adapted these buttons (most wikis feature a JS dropdown to switch between different sets of characters to insert).

That whole area is a bit of a mess and unmaintained but one of those areas that the most hardcore and oldest users of wikis are extremely attached to.

Regardless, we probably have more unstyled elements where this problem can also occur

Jdlrobson added subscribers: Volker_E, • nray.May 19 2022, 3:02 PM

It's best to remove background-attachment: initial rule here, we don't use it anywhere in deployed extensions or skins.

Change 793548 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/core@master] mediawiki.skinning: Amend prefer-reduced-motion accessibility rules

https://gerrit.wikimedia.org/r/793548

gerritbot added a project: Patch-For-Review.May 19 2022, 9:30 PM

Volker_E mentioned this in T254399: Add ability to take `prefers-reduced-motion` user setting into account in Vector.May 19 2022, 9:39 PM

Jdlrobson edited projects, added Web-Team-Backlog (Kanbanana-FY-2021-22); removed Web-Team-Backlog.May 19 2022, 11:01 PM

Jdlrobson moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.May 19 2022, 11:03 PM

Change 793548 merged by jenkins-bot:

[mediawiki/core@master] mediawiki.skinning: Amend prefer-reduced-motion accessibility rules

https://gerrit.wikimedia.org/r/793548

Maintenance_bot removed a project: Patch-For-Review.May 21 2022, 12:30 AM

ReleaseTaggerBot added a project: MW-1.39-notes (1.39.0-wmf.13; 2022-05-23).May 21 2022, 1:00 AM

Jdlrobson assigned this task to Edtadros.May 23 2022, 4:06 PM

Jdlrobson moved this task from Upcoming to QA on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Jdlrobson triaged this task as Low priority.May 23 2022, 5:23 PM

Test Result - Beta

Status: ❓
Environment: beta
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

❓ AC1: Unstyled buttons should not appear when editing a page with source editor.

@Jdlrobson, I can see the unstyled buttons on the mediawiki link in the description. However I don't see any buttons at all on beta. I've tried a number of different types of pages. Let me know if there is a particular page I should see these buttons on beta. Here is what I see:

Screen Shot 2022-05-26 at 6.33.21 AM.png (1×1 px, 260 KB)

Looks like this can only be tested in production. I've added some QA steps.

Test Result - Prod

Status: ❓
Environment: enwiki
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

❓ AC1: Unstyled buttons should not appear when editing a page with source editor.

//@Jdlrobson, I see the buttons specified in the description briefly, but then they flash back to the ones we don't want. Before I fail this I'm wondering if there's anything you can think of in my settings that could be causing this/

Screen Recording 2022-06-02 at 9.57.49 AM.mov.gif (1×1 px, 549 KB)

@Edtadros I am not able to replicate. Can you check you have all gadgets disabled?

@Nikki is this working as expected for you?

Jdlrobson reassigned this task from Jdlrobson to Edtadros.Jun 6 2022, 5:15 PM

Test Result - Prod

Status: ✅ PASS
Environment: mediawiki
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: Unstyled buttons should not appear when editing a page with source editor.

//@Jdlrobson, disabling the Edittools gadget did the trick./

Screen Shot 2022-06-12 at 6.00.03 PM.png (1×920 px, 271 KB)

Edtadros updated the task description. (Show Details)Jun 13 2022, 1:02 AM

ovasileva closed this task as Resolved.Jun 13 2022, 6:54 AM

	F35233613: Screen Shot 2022-06-12 at 6.00.03 PM.png
	Jun 13 2022, 1:00 AM

	F35200497: Screen Recording 2022-06-02 at 9.57.49 AM.mov.gif
	Jun 2 2022, 5:04 PM

	F35179621: Screen Shot 2022-05-26 at 9.06.52 AM.png
	May 26 2022, 4:07 PM

	F35179329: Screen Shot 2022-05-26 at 6.33.21 AM.png
	May 26 2022, 1:40 PM

	F35152064: Bildschirmfoto_2022-05-18_21-32-56.png
	May 18 2022, 7:52 PM

Unstyled buttons are now ugly when prefers-reduced-motion is enabledClosed, ResolvedPublicBUG REPORTActions

Description

QA steps

QA Results - Prod

Details

Related Objects

Event Timeline

Test Result - Beta

QA Steps

Test Result - Prod

QA Steps

Test Result - Prod

QA Steps

Unstyled buttons are now ugly when prefers-reduced-motion is enabled
Closed, ResolvedPublicBUG REPORT
Actions