Open Bug 1760990 (firefox-view) Opened 6 months ago Updated 2 hours ago

[meta] Firefox View

Categories

(Firefox :: General, task)

Desktop
All
task

Tracking

()

a11y-review requested
Tracking Status
firefox100 --- affected

People

(Reporter: Gijs, Unassigned)

References

(Depends on 51 open bugs, Blocks 1 open bug)

Details

(Keywords: meta)

Attachments

(10 files)

Meta bug for the "my firefox" work.

Keywords: meta
Depends on: 1760991
Depends on: 1761782
Depends on: 1761783
Depends on: 1761786
Depends on: 1761789
Depends on: 1761618
Type: defect → task
Depends on: 1762903
Depends on: 1766503
Depends on: 1766896
Depends on: 1767802
Summary: [meta] My Firefox → [meta] Firefox View
Depends on: 1767807
Depends on: 1768037
Depends on: 1768216
Depends on: 1764139
Depends on: 1768687
Depends on: 1768845
Depends on: 1769305
Depends on: 1769804
Depends on: 1770765
Depends on: 1770808
Depends on: 1771311
Depends on: 1771325
Depends on: 1772811
Depends on: 1774013
Depends on: 1774015
Depends on: 1774168
Depends on: 1774169
Depends on: 1774189
Depends on: 1774377
Depends on: 1774388
Depends on: 1774397
Depends on: 1774435
Depends on: 1774742
Depends on: 1774771
Depends on: 1774793
Depends on: 1775309
Depends on: 1774927
Depends on: 1775469
Depends on: 1776087
Depends on: 1776164
Depends on: 1776495
Depends on: 1776682
No longer depends on: 1776682
Depends on: 1778563
Depends on: 1778907
Depends on: 1779328
Depends on: 1779384
Depends on: 1780045
Depends on: 1780070
Depends on: 1780168
Depends on: 1780236
Depends on: 1780237
Depends on: 1780239
Depends on: 1780242
Depends on: 1780246
Depends on: 1780248
Depends on: 1780441
Depends on: 1780855
Depends on: 1781829
Depends on: 1782476
Alias: firefox-view
Depends on: 1782583
Depends on: 1782675
Depends on: 1782709
Depends on: 1782723
No longer depends on: 1782476
Depends on: 1783197
Depends on: 1783205
Depends on: 1783269
Depends on: 1783270
Depends on: 1783271
Depends on: 1783273
Depends on: 1783274
Depends on: 1783276
Depends on: 1783277
Depends on: 1783278
Depends on: 1783279
Depends on: 1783280
No longer blocks: 1783811
Depends on: 1783811

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.

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:

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

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
a11y-review: --- → requested
Flags: needinfo?(mreschenberg)
Flags: needinfo?(asa)
Depends on: 1783892

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.

Flags: needinfo?(mreschenberg) → needinfo?(rfambro)

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

Depends on: 1783999
Depends on: 1784006
Depends on: 1784008
Depends on: 1784019
Depends on: 1784020

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

Depends on: 1784130

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.

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

Depends on: 1784244
Depends on: 1784294
Depends on: 1784345
Depends on: 1784363
Depends on: 1784443
Flags: needinfo?(rfambro)
Attached image 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

Flags: needinfo?(rfambro)
Attached image Mac-Tab pickup.png
Depends on: 1784969

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.

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

Flags: needinfo?(asa)

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)

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?)

Flags: needinfo?(rfambro)
Depends on: 1785819
Depends on: 1785868
Depends on: 1786011
Depends on: 1786293
Depends on: 1785902
No longer depends on: 1785902
Depends on: 1786397
Depends on: 1786565
Depends on: 1786627
Depends on: 1786966
Depends on: 1786977
Depends on: 1787003
Depends on: 1787009
Depends on: 1787063
Depends on: 1787128
Depends on: 1785737
Depends on: 1785734
Depends on: 1785258
Depends on: 1785256
Depends on: 1770534
Depends on: 1782556
Depends on: 1782700
Depends on: 1787253
Depends on: 1787262
Depends on: 1787183
Depends on: 1785736
Depends on: 1786334
Depends on: 1785234
Depends on: 1784323
Depends on: 1784902
Depends on: 1785241
Depends on: 1785272
Depends on: 1785274
Depends on: 1785268
Depends on: 1785282
Depends on: 1787443
Depends on: 1787565
Depends on: 1787388
Depends on: 1787797
Depends on: 1787945
Depends on: 1787871
Depends on: 1788152
Depends on: 1787979
Depends on: 1787980
Depends on: 1788002
Depends on: 1787975
Blocks: 1788692
Depends on: 1788735
Depends on: 1788810
Depends on: 1788792
Depends on: 1788111
Depends on: 1787167
Depends on: 1787619
Depends on: 1789004
Depends on: 1789023
Depends on: 1788813
Depends on: 1789299
No longer depends on: 1789299
Depends on: 1789632
Depends on: 1789665
Depends on: 1789533
Depends on: 1789816
Depends on: 1789818
Depends on: 1789826
Depends on: 1789663
Depends on: 1789829
Depends on: 1789042
Depends on: 1789022
Depends on: 1789007
Depends on: 1789824
Depends on: 1789664
Depends on: 1789652
Depends on: 1789831
Depends on: 1789299
Depends on: 1789875
Depends on: 1789945
No longer depends on: 1788792
Depends on: 1789978
Depends on: 1789641
Depends on: 1789839
Depends on: 1778450
Depends on: 1790074
Depends on: 1790135
Depends on: 1790083
Depends on: 1790110
Depends on: 1790113
No longer depends on: 1790381
Depends on: 1790409
Depends on: 1790592
Depends on: 1790593
Depends on: 1788257
Depends on: 1790627
Depends on: 1790633
No longer depends on: 1790627
Depends on: 1790714
Depends on: 1790798
Depends on: 1790823
Depends on: 1790971
Depends on: 1791298
No longer depends on: 1789632
Depends on: 1791707
Depends on: 1791740
Depends on: 1791770
Depends on: 1791106
Depends on: 1791090
Depends on: 1791652
Depends on: 1791898
Depends on: 1792017
Depends on: 1792099
Depends on: 1791653
Depends on: 1792191
Depends on: 1792389
Depends on: 1792440
Depends on: 1792318
Depends on: 1792093
Depends on: 1791959
You need to log in before you can comment on or make changes to this bug.