[whatwg/dom] `:active` pseudo-class specification doesn't account for children of disabled form elements (#976)

tl;dr `:active` is being triggered by/within disabled form elements inconsistently (browser dependent). Specification doesn't account for children/labels of disabled form elements edge case.

There are many situations where child elements are added to buttons, icons as a simple example. When the input, button or textarea are given the `disabled` attribute things become weird.

Demonstration of behaviour: https://codepen.io/alystair/pen/gOgJZaq?editors=1101


- Chrome:
  - Disabled `button` only activates `:active` when clicking children (follows current spec).
  - Pressing disabled `input` and `textarea` activates `:active` (not following spec)
  - Pressing label of disabled element activates :active (?)
- Firefox: `:active` triggers in all instances (not following spec)
- Safari: ?
- Safari iOS: ?

Current workaround: add `pointer-events:none` to element (and it's children) with `disabled` attribute. Less trivial for non-wrapping `label` elements.

Relevant spec: https://html.spec.whatwg.org/multipage/semantics-other.html#selector-active


> :​active✔MDN
> The :​active pseudo-class is defined to match an element while an element is being activated by the user.
> 
> To determine whether a particular element is being activated for the purposes of defining the :​active pseudo-class only, an HTML user agent must use the first relevant entry in the following list.
> 
> - If the element has a descendant that is currently matching the :​active pseudo-class
> The element is being activated\.

...

> - If the element is a button element
> - If the element is an input element whose type attribute is in the Submit Button, Image Button, Reset Button, or Button state
> The element is being activated if it is in a formal activation state and it is not disabled.

Specification should be revised to ensure:
- Recursion of parent tree to ensure no disabled form element (perhaps any element?) is located.
- Form element associated with targeted `label` does not have `disabled` state.

----
Somewhat related (and I don't mean to sidetrack):
> "A form control that is disabled must prevent any click events that are queued on the user interaction task source from being dispatched on the element."

This works as intended when the event listener is attached to the element itself. However when the event handler is attached to a parent, children of disabled elements 'leak' through - is this intentional?

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/whatwg/dom/issues/976