gutenberg icon indicating copy to clipboard operation
gutenberg copied to clipboard

`ToggleGroupControl`: allow option items to be accessible when `disabled`

Open ciampo opened this issue 1 year ago • 0 comments

While #63450 added support in ToggleGroupControl for disabled option items, one aspect that could still be improved is to make disabled option items accessible when disabled, similarly to how the Toolbar and Tabs component behave.

The challenge in doing so is how to visually let the user know where the keyboard focus is VS what item is currently selected.

In #63450 we tried a few approaches, but none of them was convincing enough.

It's also worth mentioning that we already solved this challenge in Tabs:

  • we show a focus ring to indicate where keyboard focus is (even on disabled tabs)
  • we use an underline to indicate the currently selected tab

https://github.com/user-attachments/assets/f1dd7429-4a66-43a8-833a-7d5830d5acbc

But applying the same treatment to ToggleGroupControl is tricky because the indicator is a full-height backdrop and would visually clash/overlap with the focus ring.

ciampo avatar Jul 16 '24 12:07 ciampo