[meta] Firefox View
Categories
(Firefox :: General, task)
Tracking
()
People
(Reporter: Gijs, Unassigned)
References
(Depends on 8 open bugs, Blocks 1 open bug)
Details
(Keywords: meta)
Attachments
(10 files)
Meta bug for the "my firefox" work.
Updated•1 year ago
|
Updated•1 year ago
|
Comment hidden (admin-reviewed) |
Reporter | ||
Updated•10 months ago
|
Updated•10 months ago
|
Comment 2•10 months ago
|
||
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•10 months ago
|
||
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•10 months ago
•
|
||
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•10 months ago
|
||
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•10 months ago
|
||
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•10 months ago
|
||
(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.
Updated•10 months ago
|
Comment 8•10 months ago
|
||
(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:
- 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
- focus order is not logical: it jumps from the main area under
Tab pickup
(Get Firefox mobile
>X
close) to the right panelIndependent 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:
- expand/collapse control of the
Tab pickup
is unlabeled and is announced asbutton
. Expected:Tab pickup, button, expanded
- expand/collapse control of the
Tab pickup
does not announce its state (by default and on change). Expected:Tab pickup, button, expanded
andTab pickup, button, collapsed
(accordion design pattern and its expected behavior) Open pages from other devices.
and other text elements withinTab pickup
section are announced asclickable
while they are static text items and cannot be activated with a click. Expected: noclickable
state (as it is done for theReopen pages you’ve closed on this device.
text, for instance)- 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. - the
Firefox View
control on the tab bar does not announce its pressed/active state while visually it’s communicated to a user. - (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 asbutton
while other tabs are tabs (in their group though). - (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) asFirefox View logo
- expand/collapse control of the
-
sync didn’t work: no tabs were shown from my Firefox iOS (Fx Account was synced) - thus, no data on its functionality
Comment 9•10 months ago
|
||
Comment 10•10 months ago
•
|
||
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•10 months ago
|
||
Comment 12•10 months ago
|
||
Un-NI'ing asa, since he helped collect the feedback above.
Comment 13•10 months ago
|
||
Results of a11y review on Windows OS 11 are the following:
- keyboard-only use:
- 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
- With HCM (especially, with the Night Sky theme), the links under the
Recently closed
group are not styled as hyperlinks with theMozNativehyperlinktext
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) - 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
- focus order is not logical: it jumps from the main area under
Tab pickup
(Continue
) to the right panelIndependent 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:
- expand/collapse control of the
Recently closed
does not announce its state (by default and on change). Expected:Recently closed, button, expanded
andRecently closed, button, collapsed
(accordion design pattern and its expected behavior) 11% complete
is a text element withinTab pickup
section that is announced asclickable
while it cannot be activated with a click. Expected: noclickable
state (as it is done for theReopen pages you’ve closed on this device.
text, for instance)- the
Firefox View
control on the tab bar does not announce its pressed/active state while visually it’s communicated to a user. - (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) asFirefox View logo
- expand/collapse control of the
-
sync didn’t work: no tabs were shown from my Firefox iOS (Fx Account was synced)
Comment 14•10 months ago
|
||
Comment 15•10 months ago
|
||
Comment 16•10 months ago
|
||
Comment 17•10 months ago
|
||
Comment 18•10 months ago
|
||
Comment 19•10 months ago
|
||
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?)
Updated•10 months ago
|
Reporter | ||
Updated•8 months ago
|
Description
•