Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow <hr> to be used inside <select> as a separator #9124

Merged
merged 2 commits into from
May 2, 2023
Merged

Allow <hr> to be used inside <select> as a separator #9124

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b80708f
Allow <hr> to be used inside <select> as a separator
annevk Apr 5, 2023
df5c9aa
address review feedback
annevk Apr 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 52 additions & 13 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19333,6 +19333,7 @@ and is further discussed below.&lt;/div></code></pre>
<dd><span>Flow content</span>.</dd>
<dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
<dd>Where <span>flow content</span> is expected.</dd>
<dd>As a child of a <code>select</code> element.</dd>
<dt><span data-x="concept-element-content-model">Content model</span>:</dt>
<dd><span data-x="concept-content-nothing">Nothing</span>.</dd>
<dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
Expand All @@ -19354,8 +19355,9 @@ interface <dfn interface>HTMLHRElement</dfn> : <span>HTMLElement</span> {
</dl>

<p>The <code>hr</code> element <span>represents</span> a <span>paragraph</span>-level thematic
break, e.g. a scene change in a story, or a transition to another topic within a section of a
reference book.</p>
break, e.g., a scene change in a story, or a transition to another topic within a section of a
reference book; alternatively, it represents a separator between a set of options of a
annevk marked this conversation as resolved.
Show resolved Hide resolved
<code>select</code> element.</p>

<div class="example">

Expand Down Expand Up @@ -52219,7 +52221,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>, and <span data-x="script-supporting elements">script-supporting</span> elements.</dd>
<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>
annevk marked this conversation as resolved.
Show resolved Hide resolved
<dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
<dd><span>Global attributes</span></dd>
<dd><code data-x="attr-fe-autocomplete">autocomplete</code></dd>
Expand Down Expand Up @@ -52773,6 +52775,19 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {

</div>

<div class="example">
<p>Occasionally it can be useful to have a separator:

<pre><code class="html">&lt;label>
Select the song to play next:
&lt;select required name="next">
&lt;option value="sr">Random
&lt;hr>
&lt;option value="s1">It Sucks to Be Me (Reprise)
&lt;option value="s2">There is Life Outside Your Apartment
&hellip;</code></pre>
</div>



<h4>The <dfn element><code>datalist</code></dfn> element</h4>
Expand Down Expand Up @@ -112692,10 +112707,11 @@ dictionary <dfn dictionary>StorageEventInit</dfn> : <span>EventInit</span> {
below can handle the non-<select> case if we ever allow it) -->
<p>An <code>optgroup</code> element's <span data-x="syntax-end-tag">end tag</span> may be omitted
if the <code>optgroup</code> element <!--has an ancestor <code>select</code> element and--> is
immediately followed by another <code>optgroup</code> element, or if <!--all of the elements that
are ancestors of the <code>optgroup</code> element, up to and including the first ancestor element
that is not an <code>optgroup</code> element, have no more content--> there is no more content in
the parent element.</p>
immediately followed by another <code>optgroup</code> element, if it is immediately followed by an
<code>hr</code> element, or if <!--all of the elements that are ancestors of the
<code>optgroup</code> element, up to and including the first ancestor element that is not an
<code>optgroup</code> element, have no more content--> there is no more content in the parent
element.</p>
<!-- so e.g. the max number of </optgroup>s are omitted here:
<select><optgroup></select>
<p id=x><optgroup></optgroup>x</p>
Expand All @@ -112706,9 +112722,9 @@ dictionary <dfn dictionary>StorageEventInit</dfn> : <span>EventInit</span> {

<!-- </option> -->
<p>An <code>option</code> element's <span data-x="syntax-end-tag">end tag</span> may be omitted if
the <code>option</code> element is immediately followed by another <code>option</code> element, or
if it is immediately followed by an <code>optgroup</code> element, or if there is no more content
in the parent element.</p>
the <code>option</code> element is immediately followed by another <code>option</code> element, if
it is immediately followed by an <code>optgroup</code> element, if it is immediately followed by
an <code>hr</code> element, or if there is no more content in the parent element.</p>

<!-- <colgroup> -->
<p>A <code>colgroup</code> element's <span data-x="syntax-start-tag">start tag</span> may be
Expand Down Expand Up @@ -120898,6 +120914,25 @@ document.body.appendChild(text);
<p><span>Insert an HTML element</span> for the token.</p>
</dd>

<dt>A start tag whose tag name is "hr"</dt>
<dd>
<!-- fake </option> (maybe) -->
<p>If the <span>current node</span> is an <code>option</code> element, pop that node from the
<span>stack of open elements</span>.</p>
<!-- end of fake </option> -->

<!-- fake </optgroup> (maybe) -->
<p>If the <span>current node</span> is an <code>optgroup</code> element, pop that node from the
<span>stack of open elements</span>.</p>
<!-- end of fake </optgroup> -->

<p><span>Insert an HTML element</span> for the token. Immediately pop the <span>current
node</span> off the <span>stack of open elements</span>.</p>

<p><span data-x="acknowledge self-closing flag">Acknowledge the token's <i data-x="self-closing
flag">self-closing flag</i></span>, if it is set.</p>
</dd>

<dt>An end tag whose tag name is "optgroup"</dt>
<dd>
<!-- fake </option> (maybe) -->
Expand Down Expand Up @@ -125793,6 +125828,9 @@ progress { appearance: auto; }</code></pre>
data-x="concept-option-label">label</span>, indented under its <code>optgroup</code> element if it
has one.</p>

<p>Each sequence of one or more child <code>hr</code> element siblings may be rendered as a single
separator.</p>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why this optional behavior? Why not render two separators?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the review! I'll update the tests so we can land this.

As widgets are sometimes rendered by the OS I didn't want to require features that might not exist. And as it's a fairly minor semantic it doesn't really matter if it's not supported. It's just nicer when it is.

And a single separator is rendered because that is what Chromium and WebKit implement today and breaking with that seemed unnecessary:
data:text/xml,<select%20xmlns="http://www.w3.org/1999/xhtml"><option>1</option><hr/><hr/><option>2</option></select>.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, makes sense to me!


<p>The <dfn>width of the <code>select</code>'s labels</dfn> is the wider of the width necessary to
render the widest <code>optgroup</code>, and the width necessary to render the widest
<code>option</code> element in the element's <span data-x="concept-select-option-list">list of
Expand Down Expand Up @@ -133994,16 +134032,16 @@ INSERT INTERFACES HERE
Dean Edridge,
Dean Edwards,
Dean Jackson,
Debanjana Sarkar <!-- debanjana-a11y on GitHub -->,
Debanjana Sarkar, <!-- debanjana-a11y on GitHub -->
Debi Orton,
Delan Azabani<!-- delan on GitHub -->,
Delan Azabani, <!-- delan on GitHub -->
Derek Featherstone,
Derek Guenther,
Devarshi Pant,
Devdatta,
Devin Rousso,
Diego Ferreiro Val,
Diego Gonz&aacute;lez Z&uacute;&ntilde;iga <!-- diekus on GitHub -->,
Diego Gonz&aacute;lez Z&uacute;&ntilde;iga, <!-- diekus on GitHub -->
Diego Ponce de León,
Dimitri Glazkov,
Dimitry Golubovsky,
Expand Down Expand Up @@ -134047,6 +134085,7 @@ INSERT INTERFACES HERE
Eric Portis,
Eric Rescorla,
Eric Semling,
Eric Shepherd, <!-- a2sheppy on GitHub -->
Eric Willigers,
Erik Arvidsson,
Erik Charlebois,
Expand Down