1743985 - (colorway-closet) [meta] [MR1 2022] Colorway Closet

Status: RESOLVED FIXED

(Firefox :: Theme, task, P1)

Description

[Dão Gottwald [:dao]]

This is a continuation of the previous Colorways project, aka monochromatic themes (bug 1725467). High-level goals of this project:

• Make colorways and related content easily and conveniently accessible in Firefox
• Invest in user incentives for opting into a default Firefox Home page experience
• Continue to broaden and invest in an improved personalized user experience
• Invest in long term support infrastructure of colorways

Spec: https://docs.google.com/document/d/1Ja5d3TGROj1Phmm3x3ns_vUM_b0x5v-u2pEEFobtLvY/edit#

Comment 1

[Ray Fambro]

Description:
Meta bug for testing the New Tab Personalize panel surface. Epic and storypoints can be referenced here: https://mozilla-hub.atlassian.net/browse/FIDE-643

How do we test this?
The user scenarios are outlined here:
https://mozilla-hub.atlassian.net/browse/FIDE-664

When will this ship?
Tracking bug/issue: Fx100
Design documents (e.g. Product Requirements Document, UI spec): https://www.figma.com/file/lyP8RzsPyprRSm2ue4VsWi/Colorway-Closet?node-id=210%3A1191
Engineering lead: Dao Gottwald
Product manager: Ray Fambro

The accessibility team has developed the Mozilla Accessibility Release Guidelines which outline what is needed to make user interfaces accessible:
https://wiki.mozilla.org/Accessibility/Guidelines
Please describe the accessibility guidelines you considered and what steps you've taken to address them:

Describe any areas of concern to which you want the accessibility team to give special attention:

Comment 3

[Ray Fambro]

Description:
Please provide an explanation of the feature or change. Include a description of the user scenario in which it would be used and how the user would complete the task(s).

• We are now ready to move forward with the final a11y review for the colorways modal experience. Users will be able to enter the colorways modal via the Firefox View surface and the about:addons page. Surfacing the modal will allow users to set a base colorway with an intensity. Custom Homepage users can also set Firefox Home to their default homepage in this modal surface as well.

Screenshots and visual UI specs are welcome, but please include sufficient accompanying explanation so that blind members of the accessibility team are able to understand the feature/change.

• Upon opening the modal, users can change the element of focus by selecting the tab key. For the colorway selector, users can also use the arrow keys to navigate each base color option

How do we test this?
If there is an implementation to test, please provide instructions for testing it; e.g. setting preferences, other preparation, how to trigger the UI, etc.

• Please set the pref to "true" in about:config. (browser.theme.colorway-closet)
• Note that this will provide an entrypoint for the colorways modal via about:addons
• The primary colorways modal entrypoint is through the Firefox View UI. This review request is however for colorways only, as Firefox View is not yet ready for final testing. You can still turn this experience on if desired by enabling the pref (browser.tabs.firefoxview).
• The colorway modal UI is triggered by selecting the "try colorways/change colorways" button in the about:addons page or in the Firefox View tab.

When will this ship?

• This is ship in the Fx106 Release cycle

Tracking bug/issue:

• 1743985

Design documents (e.g. Product Requirements Document, UI spec):

• Jira Epic -- https://mozilla-hub.atlassian.net/browse/FIDE-643
• Spec -- https://docs.google.com/document/d/1u-1taEftLlJU4CYNc7fuMvBi4ZOXAn2e50aBIBOiy_M/edit#
• Figma -- https://www.figma.com/file/P67UDfNNXD9qq9OHMXzT4u/Independent-Voices---Collage?node-id=636%3A33809

Engineering lead: Dao Gottwald
Product manager: Ray Fambro

The accessibility team has developed the Mozilla Accessibility Release Guidelines which outline what is needed to make user interfaces accessible:
https://wiki.mozilla.org/Accessibility/Guidelines
Please describe the accessibility guidelines you considered and what steps you've taken to address them:

• We have already discussed and addressed contrast requirements. We would now like to test out functionality as we approach the ship release date.

Describe any areas of concern to which you want the accessibility team to give special attention:

Comment 4

[Asa Dotzler [:asa]]

I've looked over the implementation and it looks good to me. It would still be good to have QA do their accessibility tests as well.