NOTE: This ticket is tracking the link creation only. Once the link is ready, we'll hold off deploying until we have a solution for the parent ticket T367325: [Spike] Discuss and scope out reporting system for dark mode issues
Background
- We would like to add a link un the appearance menu that allows
logged-inusers to report issues with dark mode
User story
- As a template editor, I want to see issues with dark mode reported by other editors, so I know where to focus my energy
Requirements
- A link should be available in the appearance menu in the place where we typically put exception handling text
- Link should be available to all users who can see dark mode in their appearance menu
- Hovering over the link should show a tooltip
- Reporting mechanism only available in Vector22 or other desktop skins with the appearance menu
- Link is only available when dark mode is enabled
- Link should never appear at the same time as exception handling disclaimers
- Color label should have (beta) appended to it
- Link should lead to pre-filled form
- When the appearance menu is collapsed in the top bar and logged out users click the reporting link, the appearance menu should stay open so that they can see the "Report received" system feedback.
- NOTE: page for form TBD -> we'll handle the rest of the reporting UX in T367795, including where the reports will go, copy, and what the reporting UX will look like.
- Link should be translatable on wiki. Communities should have the ability to set the link to a different page on-wiki
- For this ticket, the link should go to https://www.mediawiki.org/wiki/Talk:Reading/Web/Accessibility_for_reading. We will set up per-wiki links in a separate ticket.
Background
- We would like to set up a reporting system for dark mode so that users that see issues with templates and other user-generated content, can report on these issues. We plan on using this system as a supplemental source of information for editors focused on dark mode fixes, similar to the current accessibility tool (https://night-mode-checker.wmcloud.org/)
User story
- As a template editor, I want to see which pages users have dark mode issues, so that I can fix them
Requirements for Pt 2 (link destination and messaging)
- Before beginning ticket: A link will be presented to logged-in users only in the appearance menu on the desktop site (See https://phabricator.wikimedia.org/T367871 for link requirements)
- Wikis will be able to override this link and choose a local link to navigate to
- Selecting the link will send users to a page on mw.org created specifically for each wiki (https://www.mediawiki.org/w/index.php?title=Talk:Reading/Web/Desktop_Improvements/Reporting/enwiki) and load a pre-filled form (See https://phabricator.wikimedia.org/T368556#9928364 for form creation limitations and setup)
- Selecting the link will log an event in mediawiki.web_ui_actions schema with a sample rate with a sample rate of 100% for logged in users
- Selecting the link will show a clicked state (see Design section below for details)
- Color options appear below other options in the appearance menu
- Link copy: "Thank you for your report!"
BDD
- For QA engineer to fill out
Test Steps
- For QA engineer to fill out
Design
Note: design has changed. Beta tag is now in the title of the section and not a chip next to the dark mode option.
Acceptance criteria
- Add acceptance criteria
Communication criteria - does this need an announcement or discussion?
- Weekly, we will create a dump of data received from 2 and 3 and post to each wiki. (Note: This will be later automated and will be implemented post-deploy.)
Rollback plan
- What is the rollback plan in production for this task if something goes wrong?
This task was created by Version 1.0.0 of the Web team task template using phabulous
Requirement
Add a link in the appearance menu for users to report issues with dark mode. This link should only appear when dark mode is enabled and lead to a pre-filled form on MediaWiki. The link should have a tooltip, be translatable, and should not appear alongside exception handling disclaimers.
Requirement
Ensure a link is available in the appearance menu for reporting dark mode issues. This link should be available to all users who can see dark mode in their appearance menu, only when dark mode is enabled. It should have a tooltip, lead to a pre-filled form, be translatable, and not appear with exception handling disclaimers. The color label should have (beta) appended to it.
BDD
Feature: Dark Mode Issue Reporting Link
Scenario: Show reporting link when dark mode is enabled
Given the user has enabled dark mode
When the user opens the appearance menu in Vector22 or other desktop skins
Then a link to report issues with dark mode should be available
And the link should have a tooltip
And the link should lead to a pre-filled form on MediaWiki
And the link should not appear alongside exception handling disclaimers
And the link should be translatable
And the color label should have (beta) appended to it
When the appearance menu is collapsed in the top bar
Then clicking the link should keep the appearance menu open for logged-out users to see the "Report received" system feedbackTest Steps
Test Case 1: Verify Dark Mode Issue Reporting Link
- Enable dark mode.
- Open the appearance menu in Vector22 or other desktop skins.
- AC1: Confirm that a link to report issues with dark mode is available.
- AC2: Confirm that the link has a tooltip.
- Click the link.
- AC3: Confirm it leads to a pre-filled form on MediaWiki.
- AC4: Confirm that the link does not appear alongside exception handling disclaimers.
- AC5: Confirm that the link is translatable.
- AC6: Confirm that the color label has (beta) appended to it.
- Collapse the appearance menu in the top bar.
- Click the reporting link as a logged-out user.
- AC7: Confirm that the appearance menu stays open to show the "Report received" system feedback.
Design
See T367795 for spec.
Open questions:
What does the link look like?When does the link show? All the time? Only when dark mode is enabled?- DST is in active development on this tooltip component (T340456). How will this affect timelines/scope?
Acceptance criteria
- The link should not show when the dark mode gadget is disabled.
Communication criteria - does this need an announcement or discussion?
- n/a
Rollback plan
- What is the rollback plan in production for this task if something goes wrong?
Signoff criteria
- Ensure there is a ticket to add the tooltip
This task was created by Version 1.0.0 of the Web team task template using phabulous
QA Results - PROD
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T367871#10045365 |
| 2 | ⬜ | T367871#10045365 |
| 3 | ✅ | T367871#10045365 |
| 4 | ✅ | T367871#10045365 |
| 5 | ✅ | T367871#10045365 |
| 6 | ✅ | T367871#10045365 |
| 7 | ✅ | T367871#10045365 |
