Using ToggleButtonGroup inside Toolbar

[universse]

ToggleButtonGroup with multiple selection has toolbar role, so it cannot be inside Toolbar. As for single selection, is the 'radiogroup' role appropriate inside Toolbar?

In the Toolbar example, Group is used. That means all the toggle button group's state management needs to be reimplemented.

<Toolbar aria-label="Text formatting">
  <Group aria-label="Style">
    <ToggleButton aria-label="Bold">
      <b>B</b>
    </ToggleButton>
    <ToggleButton aria-label="Italic">
      <i>I</i>
    </ToggleButton>
    <ToggleButton aria-label="Underline">
      <u>U</u>
    </ToggleButton>
  </Group>
  <Separator orientation="vertical" />
  <Group aria-label="Alignment">
    <Button>Left</Button>
    <Button>Center</Button>
    <Button>Right</Button>
  </Group>
</Toolbar>

Is there a better way to approach this?

[snowystinger]

Unfortunately this is the way to do it at this time. We have some work on Toolbar going on right now, this may be resolved by that.

I'd originally implemented Toolbar to support nesting by changing to Group internally, #5080 but it was removed for initial release because it required too many dependencies.

Technically, there is nothing wrong with nesting the role="toolbar" the spec has no comments on it that I could find.

As noted in the description of the PR, it didn't announce the outer toolbar's name like it does for group. However, that was also 1.5 years ago, AT may be announcing this differently now.

Why do you want to avoid nesting them?

[devongovett]

I thought useToolbar automatically checks if it's inside a toolbar already? So using ToggleButtonGroup inside a Toolbar should be fine.

react-spectrum/packages/@react-aria/toolbar/src/useToolbar.ts

Line 51 in df3f1ea

setInToolbar(!!(ref.current && ref.current.parentElement?.closest('[role="toolbar"]')));

[snowystinger]

o yep, i went off memory and that PR alone, forgot to check main since togglebuttongroup was introduced later, useToggleButtonGroup does indeed use useToolbar.

@universse were you seeing a problem?