Fix placeholder label option to allow wrapper elements

[keithamus]

This changes the check for an ancestor optgroup instead.

Fixes #12892.

• At least two implementers are interested (and none opposed):
  • Mozilla
  • Chromium (already ships)
• Tests are written and can be reviewed and commented upon at:
  • https://phabricator.services.mozilla.com/differential/changeset/?ref=13669072
• Implementation bugs are filed:
  • Chromium: (Already fixed)
  • Gecko: https://bugzilla.mozilla.org/show_bug.cgi?id=2068707
  • WebKit: …
  • Deno (only for timers, structured clone, base64 utils, channel messaging, module resolution, web workers, and web storage): N/A
  • Node.js (only for timers, structured clone, base64 utils, channel messaging, and module resolution): N/A
• Corresponding HTML AAM & ARIA in HTML issues & PRs: N/A
• MDN issue is filed: N/A
• The top of this comment includes a clear commit message to use.

(See WHATWG Working Mode: Changes for more details.)

[annevk]

I'm surprised we don't say anything about the option element being disabled here.

Also, even if we fix this, I wonder if we need another issue to address this for appearance base:

If a select element contains a placeholder label option, the user agent is expected to render that option in a manner that conveys that it is a label, rather than a valid option of the control. This can include preventing the placeholder label option from being explicitly selected by the user. When the placeholder label option's selectedness is true, the control is expected to be displayed in a fashion that indicates that no valid option is currently selected.

[annevk]

Why did you omit the template? It seems like this should come with tests and possibly browser bugs?

[keithamus]

Added template back in; @annevk do you have a webkit bug or shall I file one?

[annevk]

I don't. Also, how does this relate to #12855? cc @sb3nder

[sb3nder]

This PR resolves one point in #12855 👍.

[sb3nder]

I'm surprised we don't say anything about the option element being disabled here.

Currently, it's up to authors how the placeholder option behaves, usually the hidden or disabled attribute is added.

---

I interpret the rendering paragraph as describing behavior that could be represented by the following example CSS:

If a select element contains a placeholder label option, the user agent is expected to render that option in a manner that conveys that it is a label, rather than a valid option of the control.

select option:placeholder {
  color: color-mix(currentColor 60%, transparent);
}

This can include preventing the placeholder label option from being explicitly selected by the user.

(It's a bit sus to do this by default; I'm not aware of any UAs that do it.)

select option:placeholder {
  display: none;
}

When the placeholder label option's selectedness is true, the control is expected to be displayed in a fashion that indicates that no valid option is currently selected.

select:invalid::field-content,
select:invalid > button:first-child {
  color: color-mix(currentColor 60%, transparent);
}

:user-invalid {
  border-color: red;
}