1665958 - (alpenglow-a11y) a11y review of Alpenglow theme

Status: RESOLVED INVALID

(Firefox :: Messaging System, task, P2)

Description

[Dan Mosedale (:dmosedale, :dmose)]

Description:

We landed Alpenglow, a third theme (in addition to the Light and Dark themes. We should haven't gotten an a11y review earlier, for which I apologize.

How do we test this?

• Start Firefox Nightly on a new profile
• Go through the "about:welcome" experience, skipping importing.
• On the theme page, choose Firefox Alpenglow.

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.

When will this ship? Firefox 81
Tracking bug/issue: https://jira.mozilla.com/browse/UJET-12
Design documents (e.g. Product Requirements Document, UI spec):

For much of the cycle, this was treated as part of the multistage about:welcome work, as it was not believed big enough to warrant its own technical and design documents. In retrospect, this was a mistake. All of the initial work and requirements were laid out in the initial bug that was used to land the theme: bug 1643776

Engineering lead: Dan Mosedale
Product manager: Jim Thomas

All user interface additions and changes must meet the Mozilla Accessibility Release Requirements:
https://wiki.mozilla.org/Accessibility/Requirements
Please describe the accessibility requirements you considered and what steps you've taken to address them:

We didn't really think about a11y ahead of time, unfortunately.

QA found a number of contrast legibility issues (they can be found in the dependency tree for bug 1664839). All but one (bug 1665613 about the old print preview dialog) have already been fixed.

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

The user-visible part of this work is really just images and CSS, so it's about visual accessibility. Checking various different toolbars and configurations would be ideal.

Comment 1

[Punam Dahiya [:pdahiya]]

Updating bug with various entry points for setting Alpenglow theme inside Firefox.

How do we test this?
a) Start Firefox Nightly on a new profile. Go through the "about:welcome" experience, skipping importing. On the theme page, choose Firefox Alpenglow.

b). The "Firefox Alpenglow" is a 4th default option in the "Themes" section from the "about:addons" page.

c). The "Firefox Alpenglow" option is available in the "Themes" menu of the "Customize Nightly" page.
This can be observed by doing the following:

1. Open the hamburger menu located in the top right corner of the browser.

2. Select the "Customize..." option.

3. Click the "Themes" dropdown menu located at the bottom right side of the page and observe the displayed theme options.

Ally request in this bug is specific to Alpenglow theme visual usage inside Firefox and not for multistage about:welcome flow which was ally reviewed separately and tracked as part of https://bugzilla.mozilla.org/show_bug.cgi?id=1649268

Comment 2

[Asa Dotzler [:asa]]

I've looked over the theme and most of it looks pretty good. There are some remaining issues with color contrast, though.

The window close button doesn't have sufficient contrast with its background. The first part of the title text of the left most tab, when not selected, also falls short of color contrast requirements. With the Windows Menu Bar active, the File and Edit menu labels miss on contrast and with enough tabs open to push the new tab button to the far right of the tab strip, the new tab button's contrast is well short of requirements. Finally, icons in the toolbar overflow menu are also too low contrast.

Comment 3

[Asa Dotzler [:asa]]

Another two issues I discovered are 1) the text selection highlight color in the addressbar is not of sufficient contrast with the background for a user to discern which part of the text is selected, and 2) focused menu item highlight color is not of sufficient contrast to be discernible.

Comment 4

[Mimi Jung]

Marking this as invalid as this is legacy about:welcome flow. Feel free to re-open otherwise.