[Toggle] Support 3-state toggles using `aria-pressed="mixed"`

[mj12albert]

Follow up to https://github.com/mui/base-ui/issues/11#issuecomment-2441834890

The ARIA specs allows aria-pressed="mixed" in addition to true/false

A value of mixed means that the values of more than one item controlled by the button do not all share the same value.

This would imply that the mixed button should only be used in a use-case where it is controlling several other controls, and not intended to be used by itself. In other words, it should not toggle a state that isn't already associated with another control.

The main difference between using a tri-state toggle vs an indeterminate checkbox is that checkboxes should be for form submission (where you have to "actively submit" something"), whereas toggles should be used to affect instant changes in an UI (e.g. immediately turn on/off the lights).

Example use-cases

• "Collapse/Expand All" buttons that can bulk-control a whole Accordion https://adrianroselli.com/2024/03/check-all-expand-all-controls.html#ARIA
• An light switch that can toggle multiple independent light switches at once https://github.com/w3c/aria/issues/1406#issuecomment-1222605491
• A text selection in an editor contains bold and non-bold text, a "Bold text" toggle button could have aria-pressed="mixed" in this situation (this may be out of scope here)
• https://github.com/mui/material-ui/issues/40737

PS: the button APG makes no mention of this

Search keywords: