1760990 - (firefox-view) [meta] Firefox View

Status: NEW

(Firefox :: General, task)

Description

[:Gijs (he/him)]

Meta bug for the "my firefox" work.

Comment 1

[allahisgreat100s]

(removed)

Comment 2

[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).

• Firefox View is a new UI surface that functions very similar to a browser tab. On this surface, users will be able to sign into their Firefox Account, download Firefox Mobile, and Sync a new device. In the new Tab Pickup section, users will be able to see the 3 last active tabs that they interacted with on other devices. In the Recently Closed section, users will be able to see the url links of website that were recently closed in the same window of the device they are using FxView within. The primary entrypoint into the new Colorways experience will also be accessed from Firefox View.

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.

• Design -- https://www.figma.com/file/SE4xHgOW84yLiv7vFugm9R/Firefox-View-Stepping-Stone?node-id=4105%3A72889
• Design for Mobile Prompt -- https://www.figma.com/file/SE4xHgOW84yLiv7vFugm9R/Firefox-View-Stepping-Stone?node-id=5555%3A94358
• Designs for Empty and Error States -- https://www.figma.com/file/SE4xHgOW84yLiv7vFugm9R/Firefox-View-Stepping-Stone?node-id=1990%3A36109

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.

• Set browser.tabs.firefox-view to "true" in about:config to test Firefox View in Nightly

When will this ship?

• This will ship in Fx106

Tracking bug/issue:

• https://bugzilla.mozilla.org/show_bug.cgi?id=1760990
• Jira -- https://mozilla-hub.atlassian.net/browse/FIDE-702

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

• Design -- https://www.figma.com/file/SE4xHgOW84yLiv7vFugm9R/Firefox-View-Stepping-Stone?node-id=4105%3A72889
• Design for Mobile Prompt -- https://www.figma.com/file/SE4xHgOW84yLiv7vFugm9R/Firefox-View-Stepping-Stone?node-id=5555%3A94358
• Designs for Empty and Error States -- https://www.figma.com/file/SE4xHgOW84yLiv7vFugm9R/Firefox-View-Stepping-Stone?node-id=1990%3A36109

Engineering lead:

• Gijs Kruitbosch

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:

• As we plan to flip the pref on in Nightly next week, we'd like to ensure that we are covering all possible a11y concerns in this final stretch

Comment 3

[Morgan Reschenberg [:morgan]]

Ray, how much is the UI surface expected to change between now and when the pref is flipped?
What about between pref flip and release?

I'm trying to gauge whether I should wait to audit this (if there are pending UI changes) and whether or not it'll need to be audited again before 106 is fully released.

Comment 4

[Morgan Reschenberg [:morgan]]

It would be helpful to have a11y annotations (see this self-review section ) added to the figma file to clarify expected behaviour, and to identify problems that will require design changes.
If you have any questions please let me know

Comment 5

[Josh Berman]

Hi Morgan,

The UI surface is not expected to change between now and 106 beyond changes captured in existing bugs. There may be a few more bugs I find over the next couple of days but overall this what's there now is pretty close to our expectations.

I can go into the figma file and work on annotations and HCM today. I'm not sure I'll finish both those tasks today but I'll comment again here when they're done.

Thank you!
Josh

Comment 6

[Josh Berman]

Morgan, here is the HCM and focus order documentation. https://www.figma.com/file/SE4xHgOW84yLiv7vFugm9R/Firefox-View-Stepping-Stone?node-id=11853%3A145264

FYI about the Tab Pickup and Recently Closed items being buttons instead of links, I believe there's some technical difficulty on the engineering side but it's a known issue that eng is working on.

Comment 7

[Morgan Reschenberg [:morgan]]

(In reply to Josh Berman from comment #6)

Morgan, here is the HCM and focus order documentation. https://www.figma.com/file/SE4xHgOW84yLiv7vFugm9R/Firefox-View-Stepping-Stone?node-id=11853%3A145264

FYI about the Tab Pickup and Recently Closed items being buttons instead of links, I believe there's some technical difficulty on the engineering side but it's a known issue that eng is working on.

Thanks!
The links vs. buttons distinction is one that'll affect how we want style things for HCM.
Links are probably more semantically correct, but if buttons are the best we can do I don't think it'll cause user confusion.
I added some comments to the figma file about this, let me know which direction you feel is most appropriate for now.

Comment 8

[Anna Yeddi [:ayeddi]]

Attachment: Mac-Recently closed.png

(In reply to Ray Fambro from comment #2)

(...)
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.

• Set browser.tabs.firefox-view to "true" in about:config to test Firefox View in Nightly
  (...)

Hi team,
Results of a11y review on macOS are the following:

• keyboard-only use:
  1. when the Fx View is active in the dark OS theme (both on macOS HCM/“increase contrast” and without it), the Fx View tab does not show focus outline when focused with keyboard. Expected: when focused with keyboard, the default Fx outline is visible
  2. focus order is not logical: it jumps from the main area under Tab pickup (Get Firefox mobile > X close) to the right panel Independent voices (Try colorways button) and then back to the main area (Recently closed ^ collapse panel). Expected: focus moves left-to-right top-to-bottom (for LTR languages such as English), so it would be: Get Firefox mobile > X > Recently closed ^ > Try colorways

• VoiceOver screen reader:

  1. expand/collapse control of the Tab pickup is unlabeled and is announced as button. Expected: Tab pickup, button, expanded
  2. expand/collapse control of the Tab pickup does not announce its state (by default and on change). Expected: Tab pickup, button, expanded and Tab pickup, button, collapsed (accordion design pattern and its expected behavior)
  3. Open pages from other devices. and other text elements within Tab pickup section are announced as clickable while they are static text items and cannot be activated with a click. Expected: no clickable state (as it is done for the Reopen pages you’ve closed on this device. text, for instance)
  4. Image of the right panel has no textual alternative and is announced as Image. Expected: either marked as decorative and is not announced in read all mode (cannot be focused with a screen reader with Ctrl+Option+Arrow navigation) OR descriptive alternative text is provided, i.e. "Hand with a pencil, prism in a shape of a pyramid, profile photo of a woman of color" or something that would help users with low vision, without vision, or with cognitive difficulties to get the same feelings as sighted users are expected to get with this graphic.
  5. the Firefox View control on the tab bar does not announce its pressed/active state while visually it’s communicated to a user.
  6. (I am not sure about this one, maybe this is how it’s should be) the Firefox View control on the tab bar is announced as button while other tabs are tabs (in their group though).
  7. (optional) Firefox View includes a Fx logo but it’s not announced to a user. It could be exposed to assistive technology as one element (logo and text) as Firefox View logo

• sync didn’t work: no tabs were shown from my Firefox iOS (Fx Account was synced) - thus, no data on its functionality

Comment 9

[Anna Yeddi [:ayeddi]]

Attachment: Mac-Tab pickup.png

Comment 10

[Morgan Reschenberg [:morgan]]

In addition to Anna's feedback above, here's mine:

• It would help users with motor disabilities, and would more closely mirror the <details> element if the headings for the disclosure sections were clickable. If clickable, they should perform the same action as clicking the disclosure arrow
• It would help users with magnifiers if the disclosure arrow were located on the left in LtR text and on the right in RtL text, so they can view the heading and control without having to traverse the screen.
• Items under the tab pickup section are not activatble by keyboard (space/enter). Recently closed items are only activatable with enter (just wanted to verify this was intentional)
• If you open a particular tab from the recently closed tabs list, and then close the tab and return to the list/fx view, focus is lost. Users would have to tab through the entire list to get to the same position they previously launched a tab from.
• Colorways modal launches with a strange scaling (I reproduced this in troubleshooting mode and with a new profile). See attached screenshots
• Progress bars are not styled with sufficient contrast. They do not use increased contrast in Mac or Windows HCM.
• Disclosure button icons disappear on hover with Windows HCM black active, reduce their contrast on macOS with increased contrast enabled. They should invert their styling on both platforms.
• Tab Pickup (main landmark) and Colorways (complimentary landmark) are landmarks but Recently Closed is not
• Is there a keyboard command to reach this page? ctrl+shift+tab doesn't reach this from tab "0"
• The images in the colorways dialog should be marked as presentational
• The colorways dialog needs a more descriptive title. Current when it gets focused, the chrome URL is read.

Comment 11

[Morgan Reschenberg [:morgan]]

Attachment: morgan_odd_colorways_dialog

Comment 12

[Morgan Reschenberg [:morgan]]

Un-NI'ing asa, since he helped collect the feedback above.

Comment 13

[Anna Yeddi [:ayeddi]]

Attachment: Win-NVDA-speech output.png

Results of a11y review on Windows OS 11 are the following:

• keyboard-only use:
  1. when the Fx View is active (both on WinOS HCMs and without it), the Fx View tab does not show focus outline when focused with keyboard. Expected: when focused with keyboard, the default Fx outline is visible
  2. With HCM (especially, with the Night Sky theme), the links under the Recently closed group are not styled as hyperlinks with the MozNativehyperlinktext color (the color remains to be white, while links are expected to be purple as shown on the screenshot Win-HCM-Night Sky-Hyperlinks are not MozNativehyperlinktext.png)
  3. With HCM, Recently closed tabs buttons have additional blue outline which is especially noticeable with light HCM theme "Desert" (Win11) where no default outline is provided for these controls - the blue color used is hard-coded and is not HCM-provided/not customizable
  4. focus order is not logical: it jumps from the main area under Tab pickup (Continue) to the right panel Independent voices (Try colorways button) and then back to the main area (Recently closed ^ collapse panel). Expected: focus moves left-to-right top-to-bottom (for LTR languages such as English), so it would be: Continue > Recently closed ^ > (recently closed tabs) > Try colorways

• NVDA screen reader:

  1. expand/collapse control of the Recently closed does not announce its state (by default and on change). Expected: Recently closed, button, expanded and Recently closed, button, collapsed (accordion design pattern and its expected behavior)
  2. 11% complete is a text element within Tab pickup section that is announced as clickable while it cannot be activated with a click. Expected: no clickable state (as it is done for the Reopen pages you’ve closed on this device. text, for instance)
  3. the Firefox View control on the tab bar does not announce its pressed/active state while visually it’s communicated to a user.
  4. (optional) Firefox View includes a Fx logo but it’s not announced to a user. It could be exposed to assistive technology as one element (logo and text) as Firefox View logo

• sync didn’t work: no tabs were shown from my Firefox iOS (Fx Account was synced)

Comment 14

[Anna Yeddi [:ayeddi]]

Attachment: Win-HCM-Night Sky-Hyperlinks are not MozNativehyperlinktext.png

Comment 15

[Anna Yeddi [:ayeddi]]

Attachment: Win-HCM-blue outline-Dark.png

Comment 16

[Anna Yeddi [:ayeddi]]

Attachment: Win-HCM-blue outline-Light.png

Comment 17

[Anna Yeddi [:ayeddi]]

Attachment: Mac-Low contrast-HCM-Dark.png

Comment 18

[Anna Yeddi [:ayeddi]]

Attachment: Mac-Low contrast-Dark.png

Comment 19

[Anna Yeddi [:ayeddi]]

Attachment: Mac-Fx HCM-purple outline-visited link.png

Also for MacOS, when the HCM colors are set up in the Firefox itself, they are not followed by the list of links/tabs - the purple on the screenshot is supposed to communicate that this link is a visited one, but it's expected that the color would be applied to the hyperlink text itself (possibly, the link text is hardcoded to be white?)