Button Activation Behaviors — ButtonAssociationController shim
Demonstrates ButtonAssociationController, a shim for the
Custom Elements with Button Activation Behaviors proposal. The <button-behaviors> component declares
static buttonActivationBehaviors = true and delegates to the
controller for keyboard activation, focusability, ARIA role,
commandfor / command attribute handling, and
CommandEvent dispatch.
Detecting native support…
Dialog — show-modal / close
A <button-behaviors commandfor="my-dialog" command="show-modal">
fires a CommandEvent on #my-dialog and then
calls dialog.showModal() as the built-in behavior.
A second <button-behaviors> inside the dialog sends
command="close" to dismiss it.
Popover — toggle-popover
command="toggle-popover" calls popover.togglePopover().
The disabled variant shows that aria-disabled and tab removal
are applied automatically by the shim.
Opened via command="toggle-popover".
Form — request-submit / reset
command="request-submit" and command="reset"
target a <form> element directly — no
static formAssociated needed.
Custom command — cancellable CommandEvent
Any string can be used as a command. The target element listens for
command events and handles custom values. Clicking
"Increment" fires command="my-increment"; "Block" calls
event.preventDefault() to cancel it.
Controls
CommandEvent is cancelled by
the target's listener.
Target element #counter-target
Counter: 0
Listens for command events; cancels when
event.source is #block-btn.
CommandEvent log
- No events yet — interact with the demos above.