Update content model for customizable select #10586

josepharhar · 2024-08-28T19:48:45Z

This PR updated the content model for the <select>, <option>, and <optgroup> elements in support of customizable <select>.

Fixes #10317

At least two implementers are interested (and none opposed):
- Google
- …
Tests are written and can be reviewed and commented upon at:
- I'm not sure if this change can be tested?
Implementation bugs are filed:
- Chromium: …
- Gecko: …
- WebKit: …
- Deno (only for timers, structured clone, base64 utils, channel messaging, module resolution, web workers, and web storage): …
- Node.js (only for timers, structured clone, base64 utils, channel messaging, and module resolution): …
MDN issue is filed: …
The top of this comment includes a clear commit message to use.

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

/dom.html ( diff )
/embedded-content-other.html ( diff )
/embedded-content.html ( diff )
/form-elements.html ( diff )
/grouping-content.html ( diff )
/index.html ( diff )
/scripting.html ( diff )
/text-level-semantics.html ( diff )

This PR updated the content model for the <select>, <option>, and <optgroup> elements in support of customizable <select>. Fixes whatwg#10317

zcorpan · 2024-09-16T15:10:58Z

Is the idea to allow <select><div><h1><option> and such? Or only <select><div><div><option>?

If the former, you need to change the definition of phrasing content to include "option (if it is a descendant of a select element), optgroup (if it is a descendant of a select element)".

If the latter, you need to change the content model if div and span to switch on whether there's an ancestor select element, and if so allow "select element inner content elements". (But still disallow nesting of optgroup and option)

zcorpan · 2024-09-16T14:43:17Z

source

+   <dd>Zero or more <span>select element inner content elements</span>.</dd>
+   <dd>Zero or one child <code>button</code>.</dd>


Suggested change

<dd>Zero or more <span>select element inner content elements</span>.</dd>

<dd>Zero or one child <code>button</code>.</dd>

<dd>Zero or more <span>select element inner content elements</span>, followed by zero or one

<code>button</code> element.</dd>

The button should probably go first, and I wanted to keep the "zero or one" concept with the button, so I wrote it like this:

<dd>Zero or one <code>button</code> element followed by zero or more <span>select element inner content elements</span>.</dd>

Look good?

source

zcorpan · 2024-09-16T14:56:04Z

source

-   <dd>If the element has no <code data-x="attr-option-label">label</code> attribute and is a child
-   of a <code>datalist</code> element: <span data-x="text content">Text</span>.</dd>
+   <dd>If the element has no <code data-x="attr-option-label">label</code> attribute: <span>Text content</span> and zero or more <code>div</code>, <code>span</code>, <code>noscript</code>, <code>img</code>, <span>SVG <code>svg</code></span>, and <span data-x="script-supporting elements">script-supporting</span> elements.</dd>
+   <dd><div class="note">If an <code>img</code> is used within an <code>option</code> and there is no other text within the <code>option</code>, then the <code>option</code> won't have an accessible name unless the <code>img</code> also has a non-empty <code data-x="attr-img-alt">alt</code> attribute.</div></dd>


Don't have notes in the "element" box, put it further down along with the prose about the content model. The note is also not correct, so maybe it's better to remove it?

I thought this was what @scottaohara suggested, but as per this comment, it sounds like we can add notes and examples as a follow up. I removed the note for now.

besides the placement could you elaborate on what was wrong with the note @zcorpan? i might have phrased it a bit differently, but it seemed to be saying <option><img src=...></option> would have no accessible name, and that is correct.

source

josepharhar · 2024-09-16T17:24:43Z

Is the idea to allow <select><div><h1><option> and such? Or only <select><div><div><option>?

If the former, you need to change the definition of phrasing content to include "option (if it is a descendant of a select element), optgroup (if it is a descendant of a select element)".

If the latter, you need to change the content model if div and span to switch on whether there's an ancestor select element, and if so allow "select element inner content elements". (But still disallow nesting of optgroup and option)

h1 elements are not supposed to be part of the content model, so I implemented the div and span switching by pulling out the content models for option and optgroup and using them in div and span.

source

mtrootyy · 2024-10-13T07:03:33Z

source

@@ -53203,7 +53280,7 @@ interface <dfn interface>HTMLButtonElement</dfn> : <span>HTMLElement</span> {
   <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
   <dd>Where <span>phrasing content</span> is expected.</dd>
   <dt><span data-x="concept-element-content-model">Content model</span>:</dt>
-   <dd>Zero or more <code>option</code>, <code>optgroup</code>, <code>hr</code>, and <span data-x="script-supporting elements">script-supporting</span> elements.</dd>
+   <dd>Zero or one <code>button</code> element followed by zero or more <span>select element inner content elements</span>.</dd>


Description of "As first child of select element" should be added to "Contexts in which this element can be used:" of section of "4.10.6 The button element".

In this case, this button element is neither of "Submit Button" state, "Reset Button" state or "Button" state.
Therefore, a fourth state of button element sholud be defined.

In addition, Shouldn't The following sentent be added to section of "4.10.6 The button element"?

If the button element is a fourth state, "popovertarget", "popovertargetaction", "type", "name" and "value" attribute are must not be spedified.

Description of "As first child of select element" should be added to "Contexts in which this element can be used:" of section of "4.10.6 The button element".

Done

In this case, this button element is neither of "Submit Button" state, "Reset Button" state or "Button" state. Therefore, a fourth state of button element sholud be defined.

In addition, Shouldn't The following sentent be added to section of "4.10.6 The button element"?

If the button element is a fourth state, "popovertarget", "popovertargetaction", "type", "name" and "value" attribute are must not be spedified.

Those states are based on the type attribute. Since we didn't add any states when adding popovertarget, I don't think we should add a state here.

I suppose that we could say that the type attribute should not be set when the button is the first child of a select or when it has the popovertarget attribute though? Perhaps as a follow-up?

In "type" attribute of button element, the attribute's missing value default and invalid value default are both the Submit Button state.
Therefore, if "type" attribute would be simply prohibited, button element which is child of select element would be Submit Button state.
Because this is not appropriate, shouldn't the fourth state of button element be defined?

defining a fourth button type sounds like it could be potential scope creep, but @mtrootyy does make a good point that it is probably worth noting that this button is not a submit button, and that it also probably shouldn't even allow many of the attributes that would be valid for a button in other contexts.

source

mtrootyy · 2024-10-20T02:44:36Z

source

-   <span>inter-element whitespace</span>.</dd>
-   <dd>If the element has no <code data-x="attr-option-label">label</code> attribute and is a child
-   of a <code>datalist</code> element: <span data-x="text content">Text</span>.</dd>
+   <dd>If the element has no <code data-x="attr-option-label">label</code> attribute: Zero or more <span>option element inner content elements</span>.</dd>
   <dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>


"Content model:" should become the following.

If the element has a label attribute and a value attribute: Nothing. If the element has a label: Text. If the element has no value attribute: Text. If the element has no label attribute and has a value attribute: Zero or more option element inner content elements.

Because the submitted value must be simply text, and "option element inner content elements" is only used to decorate label text.

annevk

This could use some examples. Or are we adding those as part of another PR?

annevk · 2024-10-22T00:46:30Z

source

+  <h6>Select element inner content elements</h6>
+
+  <p><dfn>Select element inner content elements</dfn> are <code>option</code> elements and other
+  elements which are used to group and decorate them with a <code>select</code> element.</p>


This reads weird.

I re-wrote it like this: ... are the elements which are allowed as descendants of select elements.

source

annevk · 2024-10-22T00:52:43Z

source

@@ -12785,6 +12785,68 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
  </ul>


+  <h6>Select element inner content elements</h6>


I think it's rather confusing to have both select element and "Select element".

I'm not sure if I should reference <code>select</code> in the <dfn> for this concept, and I didn't make all of the references to it do that either.

Should I do that instead? Or are there other places where I'm using <code>select</code> that should just be "select"?

In regards to the updated content model for the select element and its allowed children, an `optgroup` can have a `legend` element as its first child, and this `legend` needs to be able to name the `optgroup` similarly to how a `legend` names a `fieldset`. see: whatwg/html#10586

scottaohara · 2024-10-23T14:58:30Z

@mtrootyy then even more reason the spec needs to be updated to mention this, and that work be done to not render both the text from the label attribute AND the legend - which is what's happening now and seems rather rubbish - especially if someone has to write duplicate / close to duplicate content just so they can put an image into their optgroup label

Edit: under the assumption that if both are used, both will continue to be rendered, i am trying to account for that in this html aam PR

mtrootyy · 2024-10-23T16:59:21Z

source

@@ -55773,8 +55842,9 @@ interface <dfn interface>HTMLFieldSetElement</dfn> : <span>HTMLElement</span> {
   <dd>None.</dd>
   <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
   <dd>As the <span>first child</span> of a <code>fieldset</code> element.</dd>
+   <dd>As the <span>first child</span> of an <code>optgroup</code> element.</dd>


Some sentence should be added to prose of section of "4.10.16 The legend element".
For example;

The legend element represents a caption for the rest of the contents of the legend element's parent fieldset element, if any.

　↓

The legend element represents a caption for the rest of the contents of the legend element's parent fieldset element, if any. Or, the legend element represents label of it's parent optgroup element.

josepharhar · 2024-10-23T23:31:03Z

This could use some examples. Or are we adding those as part of another PR?

I tried adding an example initially, but I put it in the wrong spot and/or otherwise messed it up: #10586 (comment)

Scott suggested doing a follow up, so that's my plan: #10317 (comment)

source

scottaohara · 2024-10-30T19:36:56Z

This PR removes some important(?) context about option use within / outside of a datalist.
for instance, without mention of datalist, the second condition in the option content model doesn't make sense / doesn't appear to do anything with the text inside of the option:

If the element has a label attribute but no value attribute: Text.

per the above, if i have <option label=foo>test</option> with the current select, all browsers use "foo" as the visible text. But, per the current spec, this makes more sense because other conditions are for use of option as not a child of a datalist. If the option is a child of a datalist, that example renders "test" as the primary label, and "foo" as a sort of sub-text (if rendered at all)... and at least chromium browsers expose that subtext as part of the option...

but again, that only works within a datalist, which would be good to point out (unless we want to do similar for options within a select - which could be useful.....)

Additionally, testing with the current chromium canary build, following the first content model condition results in no visible label for an option

If the element has a label attribute and a value attribute: Nothing.

so <option value=foo label=test> renders as an empty option with the customizable select, but renders "foo" as a visible label with the current select.

if the label attribute is not being used in the customizable select, i think this needs to be clearly stated. (checking/rechecking the definition for option and the label attribute, i don't see this called out?)

but just as importantly, it should also be clear whether new content model allowances are only allowed within options of a styleable select, or if they are allowed for options in a datalist. the current PR reads as if this is a change for everywhere, and i'm not sure if that's really the intent at this point?

Edit: we spoke about some of this in OpenUI yesterday, so just wanted to acknowledge what I wrote here is at least going to be partially addressed.

josepharhar · 2024-11-08T18:45:54Z

This PR removes some important(?) context about option use within / outside of a datalist.

I re-added the datalist cases and added the new content model under the case where there is no label attribute and there is no parent datalist.

Additionally, testing with the current chromium canary build, following the first content model condition results in no visible label for an option

This has been fixed

mtrootyy · 2024-11-08T22:00:30Z

source

@@ -24529,10 +24585,14 @@ wormhole connection.&lt;/mark>&lt;/p></code></pre>
   <dd><span>Flow content</span>.</dd>
   <dd><span>Phrasing content</span>.</dd>
   <dd><span>Palpable content</span>.</dd>
+   <dd><span>Select element inner content elements</span>.</dd>
+   <dd><span>Optgroup element inner content elements</span>.</dd>


span element is not "Select element inner content elements" and "Optgroup element inner content elements"

mtrootyy · 2024-11-08T23:03:52Z

source

-  <span>phrasing content</span>, <span>flow content</span>, and <span>palpable content</span>
-  categories for the purposes of the content models in this specification.</p>
+  <span>phrasing content</span>, <span>flow content</span>, <span>palpable content</span>, and
+  <span>option element inner content elements</span> categories for the purposes of the content


As long as it is described that it is "phrasing content", it is not necessary to described that it is "Option element inner content elements".
The same is true for "span", "img", "noscript".

mtrootyy · 2024-11-09T00:33:07Z

source

   <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
   <dd>Where <span>phrasing content</span> is expected.</dd>
   <dt><span data-x="concept-element-content-model">Content model</span>:</dt>
-   <dd><span>Phrasing content</span>.</dd>
+   <dd>If the element is a descendant of an <code>option</code> element: Zero or more <span>option element inner content elements</span>.</dd>


Is this sentence necessary?
If it is necessary here, then it seems necessary for "Content model:" of all of the other element of "Phrasing content" as well as .

annevk

OP says this resolves #10317 (comment) (among other things) but I don't see that aspect defined here. Where is that defined?

mtrootyy · 2024-11-10T07:28:23Z

source

-   child of a <code>datalist</code> element: <span data-x="text content">Text</span> that is not
-   <span>inter-element whitespace</span>.</dd>
+   child of a <code>datalist</code> element: Zero or more <span>option element inner content
+   elements</span>.</dd>
   <dd>If the element has no <code data-x="attr-option-label">label</code> attribute and is a child


To deal with the following cases, the "child" should be changed to "descendant".

<label> Animal: <input name=animal list=animals> </label> <datalist id=animals> <label> or select from the list: <select name=animal> <option value=""> <option>Cat <option>Dog </select> </label> </datalist>

josepharhar · 2024-11-12T16:25:30Z

work be done to not render both the text from the label attribute AND the legend - which is what's happening now and seems rather rubbish - especially if someone has to write duplicate / close to duplicate content just so they can put an image into their optgroup label

The text in the legend element replaces the text in the label attribute for both rendering and what's exposed to the accessibility tree. The fact that both the label attribute gets rendered when you have a legend is a bug, I'll fix it here: https://issues.chromium.org/issues/378601807

scottaohara · 2024-11-12T22:23:40Z

work be done to not render both the text from the label attribute AND the legend - which is what's happening now and seems rather rubbish - especially if someone has to write duplicate / close to duplicate content just so they can put an image into their optgroup label

The text in the legend element replaces the text in the label attribute for both rendering and what's exposed to the accessibility tree. The fact that both the label attribute gets rendered when you have a legend is a bug, I'll fix it here: https://issues.chromium.org/issues/378601807

good to know. i need to revise the HTML AAM PR for this now, since i was attempting to account for both being rendered until your comment.

Update content model for customizable select

088b919

This PR updated the content model for the <select>, <option>, and <optgroup> elements in support of customizable <select>. Fixes whatwg#10317

josepharhar force-pushed the selectcontentmodel branch from 20549ca to 088b919 Compare August 28, 2024 20:02

josepharhar mentioned this pull request Aug 28, 2024

Content model and 'what' to render for stylable <select> elements #10317

Open

add legend element to optgroup

16fadde

zcorpan self-requested a review September 12, 2024 16:07

zcorpan reviewed Sep 16, 2024

View reviewed changes

zcorpan mentioned this pull request Sep 16, 2024

Relax <select> parser #10557

Open

5 tasks

zcorpan reviewed Sep 16, 2024

View reviewed changes

source Outdated Show resolved Hide resolved

Update content models for div and span

3c57a19

josepharhar added 4 commits September 16, 2024 10:28

combine select element lines

e27ea83

update categories

44225a8

Fix legend and remove note

c7deb50

add todo to duplicate table

e4d071c

josepharhar mentioned this pull request Sep 18, 2024

Customizable <select> element #9799

Open

css-meeting-bot mentioned this pull request Sep 19, 2024

[css-ui] UA stylesheet for appearance:base <select> w3c/csswg-drafts#10857

Open

josepharhar added 5 commits September 23, 2024 11:51

remove divs

fb7ca7a

palpable content except for interactive content

841e6ff

replace span with div

c6c208c

remove hr from optgroup because parser pr

0891d73

remove images outside options and replace div with span inside option

787e86f

mtrootyy reviewed Oct 14, 2024

View reviewed changes

josepharhar added 2 commits October 14, 2024 15:45

remove outdated categories

bfa1c18

stuff

a4954ad

mtrootyy reviewed Oct 15, 2024

View reviewed changes

source Outdated Show resolved Hide resolved

phrasing content

15f67ea

mtrootyy reviewed Oct 20, 2024

View reviewed changes

annevk reviewed Oct 22, 2024

View reviewed changes

mtrootyy reviewed Oct 23, 2024

View reviewed changes

improve element lists

93ebe9e

josepharhar added 2 commits October 28, 2024 13:17

make div and span equal again

b6cebc4

Merge branch 'main' into selectcontentmodel

ced6411

mtrootyy reviewed Oct 28, 2024

View reviewed changes

source Outdated Show resolved Hide resolved

mfreed7 mentioned this pull request Oct 29, 2024

[select] rendering elements which don't fit the content model openui/open-ui#1099

Open

scottaohara reviewed Oct 30, 2024

View reviewed changes

source Show resolved Hide resolved

scottaohara reviewed Oct 30, 2024

View reviewed changes

source Outdated Show resolved Hide resolved

scottaohara mentioned this pull request Oct 30, 2024

Update: option element mapping table w3c/aria#2365

Open

6 tasks

annevk added the topic: select The <select> element label Nov 8, 2024

annevk requested a review from sideshowbarker November 8, 2024 13:14

josepharhar added 3 commits November 8, 2024 10:01

update phrasing except interactive

57dced1

remove span from optgroup and select

eb42bf6

reorder otherwise

22b839c

josepharhar mentioned this pull request Nov 8, 2024

Should datalist, option, object, and/or iframe elements be listed in "interactive content"? #10755

Open

josepharhar added 3 commits November 8, 2024 10:07

add comment

f40e975

fix content model for span

19c1c04

re-add datalist cases in option content model

aa9436e

mtrootyy reviewed Nov 8, 2024

View reviewed changes

mtrootyy reviewed Nov 9, 2024

View reviewed changes

annevk reviewed Nov 9, 2024

View reviewed changes

mtrootyy reviewed Nov 10, 2024

View reviewed changes

Sight-wcg mentioned this pull request Nov 17, 2024

新版 Chromium 内核，select option 内包含 span 等标签时，渲染出重复项 layui/layui#2336

Open

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update content model for customizable select #10586

Update content model for customizable select #10586

josepharhar commented Aug 28, 2024 •

edited by pr-preview bot

Loading

zcorpan commented Sep 16, 2024

zcorpan Sep 16, 2024

josepharhar Sep 16, 2024

zcorpan Sep 16, 2024

josepharhar Sep 16, 2024

scottaohara Sep 17, 2024

josepharhar commented Sep 16, 2024

mtrootyy Oct 13, 2024

josepharhar Oct 17, 2024

mtrootyy Oct 18, 2024

scottaohara Oct 18, 2024

mtrootyy Oct 20, 2024

annevk left a comment

annevk Oct 22, 2024

josepharhar Oct 23, 2024

annevk Oct 22, 2024

josepharhar Oct 28, 2024

scottaohara commented Oct 23, 2024 •

edited

Loading

mtrootyy Oct 23, 2024

josepharhar commented Oct 23, 2024

scottaohara commented Oct 30, 2024 •

edited

Loading

josepharhar commented Nov 8, 2024

mtrootyy Nov 8, 2024

mtrootyy Nov 8, 2024

mtrootyy Nov 9, 2024 •

edited

Loading

annevk left a comment

mtrootyy Nov 10, 2024

josepharhar commented Nov 12, 2024

scottaohara commented Nov 12, 2024

		<dd>Zero or more <span>select element inner content elements</span>.</dd>
		<dd>Zero or one child <code>button</code>.</dd>

		@@ -12785,6 +12785,68 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
		</ul>


		<h6>Select element inner content elements</h6>

Update content model for customizable select #10586

Are you sure you want to change the base?

Update content model for customizable select #10586

Conversation

josepharhar commented Aug 28, 2024 • edited by pr-preview bot Loading

zcorpan commented Sep 16, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

josepharhar commented Sep 16, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

annevk left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

scottaohara commented Oct 23, 2024 • edited Loading

Choose a reason for hiding this comment

josepharhar commented Oct 23, 2024

scottaohara commented Oct 30, 2024 • edited Loading

josepharhar commented Nov 8, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mtrootyy Nov 9, 2024 • edited Loading

Choose a reason for hiding this comment

annevk left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

josepharhar commented Nov 12, 2024

scottaohara commented Nov 12, 2024

josepharhar commented Aug 28, 2024 •

edited by pr-preview bot

Loading

scottaohara commented Oct 23, 2024 •

edited

Loading

scottaohara commented Oct 30, 2024 •

edited

Loading

mtrootyy Nov 9, 2024 •

edited

Loading