When all the blocker-level patches land for comfort settings redesign, we want to flip the prefs reader.improved_text_menu.enabled and reader.colors_menu.enabled on by default.

Description:
Within reader view, the text options and layout menu along with the color theme menu have been updated with a new UI and some additional features. The new features for the layout menu are the ability to adjust character spacing, word spacing, and text alignment. The theme menu has a new "Custom" tab that allows you to choose fully custom page colors. Users can access these features through the menu toolbar within reader view.

How do we test this?
Once this patch is landed, the new menus should be enabled by default in Nightly. You can test it out by visiting any text-heavy webpage and clicking the reader view button in the address bar.

When will this ship? We are aiming to ship with Fx 129.
Tracking bug/issue: Bug 1874981

Design documents (e.g. Product Requirements Document, UI spec):
https://www.figma.com/design/BuurTXXqQjrikE0Dfvb5Wp/Reader-View-Comfort-Settings-Menu?node-id=232-559&t=0JaQjz3AJbmbsc00-0

Engineering lead: Irene Ni @ini
Product manager: N/A

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:
Semantic markup was used wherever applicable, and I tried to use onscreen labels where possible. I tested to ensure elements have focus rings with keyboard navigation, and distinct hover/active states. Light and dark mode was tested with the accessibility inspector to ensure color contrast.

Describe any areas of concern to which you want the accessibility team to give special attention:
The slider reusable component used in the text and layout menu is new, so we want to ensure it is keyboard/screenreader accessible. The color picker components used in the Theme "Custom" tab are also new.

Hi - I've reviewed the new menus. I've already spent time working with Irene on the Read Aloud menu fairly extensively, so I don't have anything else to report there (now that the range control fix is well on its way to implemented). So, I took a look at the layout menu and theme menus. There's honestly not much to critique; I don't have a lot of feedback. But what I do have is listed below:

Text Menu (see attached image text_menu.png)

• (S3) HCM: Non-control text elements should be Text color, not Button color.
• (High S3/Low S2) HCM: "Advanced" disclosure button should have an outline and should provide visual feedback on hover, active, etc.
• (High S3/Low S2) HCM: The "Reset defaults" button appears like a link but doesn't use the Hyperlink color. It acts like a button. I think switching to styling it as a conventional button would be clearer. If that's not possible, I'd switch the color to Hyperlink, or maybe ButtonText. It would be nice to have discernible states since it's a button. This also applies to the Theme Menu's "Reset defaults" button.

Theme Menu

• (S4) Under the "Default" tab, maybe the "Contrast" theme should be styled with contrasting colors, rather than all black? Something like background: linear-gradient(to right, black 50%, yellow 50%);

Thanks for the good work :)

Hi Nathan, thank you so much for the review! I'm going to address your comments in a follow up bug, and request Beta uplift so they can land with the menu rollout.

For the "Reset defaults" button, I had some trouble during the design process figuring out how to style it as a button and have it still be distinct from the other controls. For the time being, I think I will keep the link appearance but update the color to Hyperlink, and give it states similar to the links in about:preferences (color change on hover, underline disappears on active).

For the "Contrast" theme, I agree it would be nice to differentiate it further. I wonder if it would be confusing though to have it use the half-half pattern, since we use that for the "Auto" theme to describe the two possible states for light/dark mode. I also think the Buttontext yellow is a bit too eye-catching given that the other themes use muted colors. The best solution I can come up with is to use the Selecteditem purple instead (see attached image). If you don't think that's representative, I can always file a follow-up to revisit the color swatches, especially since the team has also discussed finding a way to show the text color as a future update.

All sounds good, thanks!

I think I will keep the link appearance but update the color to Hyperlink, and give it states similar to the links in about:preferences

I think that's totally reasonable. The states are great to have, for HCM and non-HCM.

The best solution I can come up with is to use the Selecteditem purple instead

I think I'd prefer all black to Selecteditem purple. FWIW, people tend to associate HCM with black and yellow (we actually have some accessibility team stickers that are those colors :) ). I think the purple is just a bit obscure for those not in-the-know. I take your point about it being eye-catching, though the point of HCM it is to be super discernible to the eye. Regardless, this is almost entirely an aesthetic suggestion from me. The word "Contrast" in the menu has a strong contrast ratio and is fully visible; people will be able to read that and make their choice. And if they already have HCM enabled system-wide, then it's not a problem anyhow.

https://hg.mozilla.org/mozilla-central/rev/2862aed5ce2b

Irene Ni, could you consider nominating this for a release note? (Process info)
We could include it in the nightly release notes.

Release Note Request (optional, but appreciated)
[Why is this notable]: New menus bring customization options and accessibility improvements to Reader View.
[Affects Firefox for Android]: No
[Suggested wording]:
Reader View has an enhanced Text and layout menu with new options for character spacing, word spacing, and text alignment. These changes offer users a more accessible reading experience.

Reader View now has a Theme menu with additional Contrast and Gray options. You can also select your own custom colors for text, background, and links from the Custom tab.
[Links (documentation, blog post, etc)]: N/A

Thanks, added to the Fx129 nightly release notes, please allow 30 minutes for the site to update.
Keeping the relnote-firefox flag as ? to keep it on the radar for inclusion in the final Fx129 release notes