1892429 - Create an expanded sidebar state

Status: RESOLVED FIXED

(Firefox :: Sidebar, task, P1)

Description

[Sarah Clements [:sclements]]

The new sidebar will have two states: a collapsed state which is the current vertical strip with only icon buttons, and the expanded state which will show icons and titles, per the spec here. You might need to also adjust the styling for the collapsed state, so that extensions or "tools" are at the top of the sidebar and the gear icon for Customize Sidebar settings is always at the bottom.

This will also need to address the focus order and it might make sense to handle both collapsed and expanded here. See the a11y section here. I'll file a separate bug for the HCM since it overlaps with the UI design, which isn't final yet.

We'll need to keep track of the expanded state since it will be shown differently depending on the sidebar visibility settings.

Additionally, we don't have existing test coverage for the new sidebar component so it'd be good to work that in here where we need to test for both the collapsed/expanded state.

Comment 1

[Kelly Cochrane [:kcochrane]]

Wanted to point out that we may need to utilize button-group in order to have a11y needs met here. According to the specs, we need to be able to tab to the first item of each button list (ex: tools and extensions), and then use the arrow keys to navigate within each button list. Using moz-button now only allows for tabbing through each option in the sidebar.

Could likely use steal the code anyway:
https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-named-deck--tabs
https://searchfox.org/mozilla-central/rev/6121b33709dd80979a6806ff59096a561e348ae8/toolkit/content/widgets/named-deck.js#115

Comment 2

[Jonathan Sudiaman [:jsudiaman]]

Attachment: Bug 1892429 - Create an expanded sidebar state r?#sidebar-reviewers!

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/mozilla-central/rev/490a96d0434f
Create an expanded sidebar state r=sidebar-reviewers,fluent-reviewers,kcochrane,sclements,extension-reviewers,robwu

Comment 4

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/490a96d0434f