🙋 Feature Request
😯 Problem to Solve
When a nimble-toggle-button represents the currently-active selection in a toggle group (e.g., a view switcher), there is no good way to prevent interaction with it while preserving proper accessibility semantics and tooltip behavior.
Applying pointer-events: none is a possible approach, but suppresses the title tooltip and leaves the button incorrectly reported as focusable in the accessibility tree.
Setting disabled on the active button is a better interim workaround — it removes the button from the tab order, correctly sets aria-disabled="true", and restores tooltip behavior. However, it may require overriding Nimble's disabled visual appearance from the outside, which is fragile against future internal styling changes.
💁 Proposed Solution
Extend the appearance-readonly attribute — already specified in the readonly appearance for disabled controls spec and implemented for nimble-text-field, nimble-number-field, nimble-text-area, nimble-select, and nimble-combobox — to also support nimble-toggle-button.
When a nimble-toggle-button is both disabled and has appearance-readonly set, it should:
- Be disabled from an ARIA and focusability standpoint (properly communicated to assistive technologies and not reachable via keyboard)
- Be styled as a normal, non-disabled control (no dimming/grayed-out appearance)
- Preserve tooltip behavior (title attribute works as expected since native disabled semantics are used rather than CSS pointer suppression)
This is effectively the same behavior the spec describes for form field controls: the control is disabled but looks like a normal readable control.
📋 Tasks
🙋 Feature Request
😯 Problem to Solve
When a
nimble-toggle-buttonrepresents the currently-active selection in a toggle group (e.g., a view switcher), there is no good way to prevent interaction with it while preserving proper accessibility semantics and tooltip behavior.Applying
pointer-events: noneis a possible approach, but suppresses the title tooltip and leaves the button incorrectly reported as focusable in the accessibility tree.Setting
disabledon the active button is a better interim workaround — it removes the button from the tab order, correctly setsaria-disabled="true", and restores tooltip behavior. However, it may require overriding Nimble's disabled visual appearance from the outside, which is fragile against future internal styling changes.💁 Proposed Solution
Extend the
appearance-readonlyattribute — already specified in the readonly appearance for disabled controls spec and implemented fornimble-text-field,nimble-number-field,nimble-text-area,nimble-select, andnimble-combobox— to also supportnimble-toggle-button.When a
nimble-toggle-buttonis both disabled and hasappearance-readonlyset, it should:This is effectively the same behavior the spec describes for form field controls: the control is disabled but looks like a normal readable control.
📋 Tasks