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 )
/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.

I'm not sure I want to force authors to set a value attribute for simple cases like this:

<select> <option><svg>...</svg><span>Purple</span></option> <option><svg>...</svg><span>Green</span></option> </select>

In this case, we can just use the text contents of the option, which would be "purple" and "green", just like we already do without the value attribute.

I suppose it would make sense to enforce that there is either a value attribute or some text node descendant of the option. Do you agree?

<select name="a"> <option value="2^2"><span>2<sup>2</sup></span></option> <option value="square root of 3"><math><msqrt><mn>3</mn></msqrt></math></option> </select>

In the above case, if there is no value attribute, the submitted value will be "22","3".

<select name="b"> <option value="female"><del>male</del>,<span>female</span></option> <option value="male"><span>male</span>,<del>female</del></option> </select>

In the above case, if there is no value attribute, the submitted value will be "male,female" regardless of which option is selected.

Because there are many cases like this, shouldn't it be enforce to specify the value attribute?

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

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

source

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 .

I'd like to believe that we don't have to patch the content model in so many ways in so many places in order to define what can go in an option element, so yeah I'm in favor of reverting this change. I likely added it in response to other feedback in this PR though so I'd like to find that first.

annevk

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

source

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.

josepharhar · 2024-11-22T18:02:46Z

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

I replied on that comment in the issue thread

mtrootyy · 2024-11-22T18:37:21Z

source

-   child of a <code>datalist</code> element: <span data-x="text content">Text</span> that is not
-   <span>inter-element whitespace</span>.</dd>
+   descendant 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


child → descendant

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

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

source Show resolved Hide resolved

mtrootyy reviewed Nov 8, 2024

View reviewed changes

source Outdated Show resolved Hide resolved

mtrootyy reviewed Nov 9, 2024

View reviewed changes

annevk reviewed Nov 9, 2024

View reviewed changes

mtrootyy reviewed Nov 10, 2024

View reviewed changes

source Outdated Show resolved Hide resolved

Sight-wcg mentioned this pull request Nov 17, 2024

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

Open

4 tasks

josepharhar added 2 commits November 22, 2024 09:50

legend element improvements

eab0bc6

remove redundant phrasing content text

7f9cc16

option datalist descendant

bed729f

mtrootyy reviewed Nov 22, 2024

View reviewed changes

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

josepharhar Nov 22, 2024

mtrootyy Nov 22, 2024 •

edited

Loading

annevk left a comment

annevk Oct 22, 2024

josepharhar Oct 23, 2024

annevk Oct 22, 2024

josepharhar Oct 28, 2024

scottaohara commented Oct 30, 2024 •

edited

Loading

josepharhar commented Nov 8, 2024

mtrootyy Nov 9, 2024 •

edited

Loading

josepharhar Nov 22, 2024

annevk left a comment

josepharhar commented Nov 12, 2024

scottaohara commented Nov 12, 2024

josepharhar commented Nov 22, 2024

mtrootyy Nov 22, 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

Choose a reason for hiding this comment

mtrootyy Nov 22, 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

scottaohara commented Oct 30, 2024 • edited Loading

josepharhar commented Nov 8, 2024

mtrootyy Nov 9, 2024 • edited Loading

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

josepharhar commented Nov 12, 2024

scottaohara commented Nov 12, 2024

josepharhar commented Nov 22, 2024

Choose a reason for hiding this comment

josepharhar commented Aug 28, 2024 •

edited by pr-preview bot

Loading

mtrootyy Nov 22, 2024 •

edited

Loading

scottaohara commented Oct 30, 2024 •

edited

Loading

mtrootyy Nov 9, 2024 •

edited

Loading