1936656 - Add ability to show multiple content tiles on a single aboutwelcome screen with option to toggle visibility

Status: RESOLVED FIXED

(Firefox :: Messaging System, enhancement, P1)

Description

[Meg Viar [:mviar]]

Add ability to show multiple content tiles in aboutwelcome screens, while maintaining backwards compatibility with current schema that only allows one content tile at a time.

Additionally, allow for optionally including a header for each tile which is displayed in place of the tile. When the header is clicked, the tile is displayed. If another tile with a header is currently displayed, clicking a different header will hide the currently visible tile.

Comment 1

[Meg Viar [:mviar]]

Attachment: Bug 1936656 - Add ability to show multiple content tiles on a single aboutwelcome screen with option to toggle visibility

Comment 2

[Meg Viar [:mviar]]

[Tracking Requested - why for this release]:

Comment 3

[Meg Viar [:mviar]]

Note this patch is currently in-progress as we are waiting on finalized designs from UX.

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

This patch adds the ability to include multiple "content tiles" in a Spotlight modal or AboutWelcome card. Previously, only one tile could be displayed per card/screen. This also adds the ability to display a header in place of the tile, which can be clicked to reveal the tile. If another tile is already open, it closes when the new tile is revealed. These headers can be separated into groups via the message configuration, as seen in the message in the patch's test plan.

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 see the test plan in the attached patch.

When will this ship?
Fx 136 Nightly

Tracking bug/issue: Jira Ticket
Design documents (e.g. Product Requirements Document, UI spec): Figma

Engineering lead: Meg Viar
Product manager: Ashley Thompson / Ümit Ceylan

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:
(Expect further updates after UX designs are finalized)

• aria-expanded and aria-controls attributes on header buttons for tiles

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

• Is the flow for users tab navigating from elements in the Spotlight modal (such as the headers) into the content of embedded web pages found in the embedded browser tile appropriate?
• Currently, our Spotlight modals aren't zoomable in the say way as regular browser content. What are the accessibility implications here?
• We'll be using this design along with disabling closing the Spotlight via esc (see bug 1933221). This behavior is included in the test plan's message. Is this acceptable so long as the copy clear indicates that action is required to proceed?

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f7524feb52aa
Add ability to show multiple content tiles on a single aboutwelcome screen with option to toggle visibility r=emcminn,omc-reviewers,jprickett

Comment 5

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/f7524feb52aa