Hide a disabled fab button on a compact window, as M3 removes a FAB
`<x-button fab>` is an extended FAB below `medium` and a filled button from there, but a disabled one was still drawn as the FAB below `medium`: the compact FAB's rule set no state of its own, so the button stood greyed out and fixed over the content. M3 never disables a FAB: "if its action is unavailable, remove the FAB entirely". A `fab` given `disabled` (a `<button disabled>`, or a link's `aria-disabled="true"`) now renders `data-md-unavailable`, and button.css draws it `display: none` below `medium`, which also takes it out of the accessibility tree and the Tab order; from `medium` it is the disabled filled button it was. The mark comes from the prop, not from `:disabled`, because a `spinner` puts `disabled` on its button while the action runs, and that FAB is busy rather than unavailable: hidden, it would vanish instead of showing its loading indicator. The docblocks and the skill's button table say so. A browser test renders an enabled fab with a slow spinner action, a disabled one and a disabled link on a 393px window: the disabled two are not rendered, the busy one stays on screen with its indicator, and at 600px both disabled ones are the disabled button again; it fails without the change in Chrome, Firefox and Safari (and in Chrome with `:disabled` alone as the condition, on the busy FAB). A feature test reads the mark and the rule. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 5
parent
cf63f11bfb
commit
6d4487feb3
@@ -74,6 +74,13 @@
|
||||
`<x-checkbox>` did the same with its box. Both roots now keep their automatic minimum — the
|
||||
control, and beside a label its longest word — so the text wraps instead. A `flex: none` an
|
||||
application put on the switch to hold it can go.
|
||||
- **A disabled `<x-button fab>` is not drawn on a compact window.** Below `medium` it was still
|
||||
the extended FAB, greyed out and fixed over the content; M3 never shows a disabled FAB and
|
||||
removes one whose action is unavailable, so a `fab` given `disabled` (on a link too) now renders
|
||||
`data-md-unavailable` and is `display: none` there, out of the accessibility tree with it. From
|
||||
`medium` it is the disabled filled button, as before. A `spinner` that disables the button while
|
||||
its action runs leaves the FAB on screen. An application's own `hide-below` or condition around
|
||||
a disabled fab button can go.
|
||||
|
||||
## From 2.0.0 to 2.1.0
|
||||
|
||||
|
||||
Reference in New Issue
Block a user