TextTransformControl/TextDecorationControl: Balancing usability and accessibility

[mirka]

There has been some complications in finding the correct implementation for the TextTransformControl and TextDecorationControl components (e.g. #26060 #31623). It seems like the difficulty is in making the implementation semantically correct, while also being intuitively usable for sighted users.

Considered implementations

	Pros	Cons
Radio (ToggleGroupControl)	Mutually exclusive	Cannot re-click to reset (or requires a separate "default" option)
Group of buttons	Can click to reset	Not mutually exclusive
Rely on ToolsPanel reset	Can use Radio	Not intuitive

The options items are mutually exclusive, which makes them similar to a radio control. But we also want an intuitive way to reset the control, which is currently achieved by clicking the active item again. We can't implement this behavior onto a radio control because radio buttons are expected to be idempotent.

On the other hand, a mere array of buttons, even if role="group"ed, fails to semantically capture the mutual exclusivity of the options.

Any ideas or thoughts? (cc @ciampo @diegohaz)

[ciampo]

Inspired by #31623 (comment), I think the most correct option would be to use ToggleGroupControl and add an additional option for the "None" case represented with a — icon.

We could make sure that, when the control is supposed to be "reset" (initial value, and ToolsPanel reset), the "None" option gets selected.

Also pinging @jasmussen in case he had any feedback.

[jasmussen]

Thanks for the ping! My instinct here is to embrace the approach we are taking with the tools panel. Which is:

• Text decoration and letter case controls should probably never be shown in a tools panel by default: they are something you add from the ellipsis menu.
• Since they are mutually exclusive, they'd have the same behavior as a radio group. Whether the underlying markup uses radios, I don't personally have a strong opinion on.
• In being part of the ToolsPanel, the same reset mechanism should be used as is used for other controls. That is, you reset from the tools panel, not from any dedicated interface in the control itself.

Here's the latest Tools Panel mockup:

• To reset Line-height, just uncheck line-height. It clears the value and hides the control.
• "Size" is shown by default. To clear it, click the minus. The minus only appears if the control has been customized.
• Clicking "Reset all" in the above mockup, would hide line-height and letter spacing controls, and clear the customized value for the Size control.

The balance to strike here is one of "clearing" values being a rare thing you do, so the tools to clear shouldn't need that much prominence. It's something we can always revisit based on feedback, but I think it's worth it to move down this path for now.

[noisysocks]

@jasmussen: It's a good idea but we don't use a tools panel in Global Styles. We want to show Letter case in Global Styles for headings, see #34345 (comment). Any ideas on how to unset the value there?

[jasmussen]

Right! I don't mean to be facetious with the following GIF showing that you can just click the toggled state to untoggle it again:

I genuinely believe we shouldn't optimize too hard for reset buttons. Bold text you'd unset the same way, appearance you can set back to default, line-height you can select and delete. Reset buttons in an ellipsis (in the future) provide an additional affordance, but isn't the main affordance.

[mirka]

@noisysocks What I understood was that we want to lean into the central reset mechanisms, which is this one in Global Styles:

If we were to improve the flow, I think that menu button could be split into per-control resets instead of a whole panel rest.

[noisysocks]

Right! I don't mean to be facetious with the following GIF showing that you can just click the toggled state to untoggle it again:

To implement this behaviour where you click to un-toggle we'd have to make the controls a group of buttons instead of a radio. This isn't great as a group of buttons doesn't convey that the options are mutually exclusive to folks who are using assistive technologies.

@noisysocks What I understood was that we want to lean into the central reset mechanisms, which is this one in Global Styles:

The Reset to defaults button resets all settings, no? I think it's too nuclear and could lead to user confusion/frustration.

---

How do we all feel about @ciampo's suggestion as a solution for this in Global Styles?

Inspired by #31623 (comment), I think the most correct option would be to use ToggleGroupControl and add an additional option for the "None" case represented with a — icon.

Just a thought, but I wonder if we could have a "none" option in the radio control that is visually hidden but appears for assistive technology users?

[jasmussen]

@jameskoster I feel like you've had some thoughts about a radio group with a minus reset button.

[jameskoster]

I don't know if it's the right approach, but I lean towards building a UI which essentially replicates the CSS you'd write in order to achieve these things.

As an example, if I set all headings to be uppercase, but there's one heading that I want to display as typed, then I would target that heading and declare text-transform: initial.

So in this case, if we want to display the control regardless of whether a value is set, then we need:

1. It to communicate when the inherent default is applied
2. A way for users to select the inherent default as a part of the control, so that they can override styles upstream in the cascade.

For me, a – icon which translates to text-transform: initial makes the most sense. It also aligns with the semantic desire to make the control behave like a radio.

[jasmussen]

I don't know if it's the right approach, but I lean towards building a UI which essentially replicates the CSS you'd write in order to achieve these things.

I think it can be a good baseline to start from. One of the challenges here is we will very often have an additional state: unset. That is: no choice has been made. initial would be an explicit unset. Both can make sense, to be sure, especially in cases where you might inherit a text-transform from higher up the hierarchy and wanting to unset that. But it's worth keeping in mind that unset and initial are separate in this case.

[jameskoster]

One of the challenges here is we will very often have an additional state: unset.

Going back to the 'replicate the code' concept, this would be equivalent to a style that has no text-transform declaration, correct? If so, I would not display the control at all. I think we've discussed this before, but the flow of adding a control to override an inherited default feels quite natural to me.

[jasmussen]

The only gotcha there is in cases where we do want to surface the control by default, to aid discoverability. In that case, toggle-buttons allow the natural unset state by not having any toggled, whereas you can't go back to this untoggled state in a segmented control (similar to radios).

[jameskoster]

The only gotcha there is in cases where we do want to surface the control by default

True, but while discoverability is improved, there is still a confusing trade-off... For example with the Row block, the 'Block spacing' control is visible but contains no value, despite the canvas clearly demonstrating a gap:

[jasmussen]

Yep, that loops right back into #43082!

[apeatling]

I wanted to flag this issue and my comment, as it raised the confusion of using the toggle group control and not being able to toggle an individual setting: #42766 (comment).

One other thing -- text-decoration is a shorthand property, so you can add multiple values. Meaning you can set line-through and underline at the same time, they aren't mutually exclusive. https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration

[jasmussen]

Great detective work. Yes, it seems like text-decoration needs an explicit none, and that it isn't enough to assume "none" is the default.

[noisysocks]

One other thing -- text-decoration is a shorthand property, so you can add multiple values. Meaning you can set line-through and underline at the same time, they aren't mutually exclusive. https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration

Ah, that's a good point. It seems to me that Decoration should be a group of non mutually exclusive buttons and Letter case should be a radio with None as an option. Does that sound right to everyone? 😀

[jasmussen]

Ah, that's a good point. It seems to me that Decoration should be a group of non mutually exclusive buttons and Letter case should be a radio with None as an option. Does that sound right to everyone? 😀

As a starting point, I'd love to just see an explicit none button at the start, perhaps just using the reset icon. I would also think that to be plenty for the foreseeable future, as the use case of multiple decorations is niche to the point that we can revisit that one if/when a need actually arises.