Closed Bug 40545 (option-label) Opened 24 years ago Closed 4 years ago

LABELs don't work for OPTIONs (<option label> in selects) (standards mode only!)

Categories

(Core :: Layout: Form Controls, defect, P3)

defect

Tracking

()

VERIFIED FIXED
mozilla77
Tracking Status
firefox77 --- verified

People

(Reporter: ekrock, Assigned: chutten)

References

(Depends on 1 open bug, Blocks 1 open bug, Regressed 1 open bug, )

Details

(4 keywords, Whiteboard: [p-ie/win][p-safari][p-opera] relnote-devel[HTML4-#adef-label-OPTION], [wptsync upstream])

Attachments

(5 files)

For FCS, LABELs on OPTIONs will be silently ignored. Opening as tracking bug for 
this issue, marking FUTURE, html4, and relnote.
See bug 4050 for background explanation.
Keywords: html4, relnote
Target Milestone: --- → Future
Blocks: html4.01
OS: Windows NT → All
Hardware: PC → All

*** This bug has been marked as a duplicate of 46111 ***
Status: NEW → RESOLVED
Closed: 24 years ago
Resolution: --- → DUPLICATE
*** Bug 46111 has been marked as a duplicate of this bug. ***
Reopening. I dupped the bugs the wrong way. Terribly sorry for the spam.
Status: RESOLVED → REOPENED
Resolution: DUPLICATE → ---
*** Bug 46799 has been marked as a duplicate of this bug. ***
Just to make this easier to find in searches:

   <select>
   <optgroup>
   <option label="Short Label"> Long Label </option>
   The label attribute is not shown in option elements.

Hopefully we'll get less dups now. ;-)
Summary: LABELs don't work for OPTIONs → LABELs don't work for OPTIONs (<option label> in selects)
Status: REOPENED → ASSIGNED
Updating QA contact.
QA Contact: ckritzer → bsharma
Blocks: robin's
Whiteboard: relnote-devel
Nom. for nsbeta1 consideration. It would be nice to get this implemented and
enable the use of LABELs by developers in their content.
Keywords: nsbeta1
QA Contact Update
QA Contact: bsharma → vladimire
*** Bug 84094 has been marked as a duplicate of this bug. ***
Here's the W3C HTML 4.01 recommendation that reqires this:

http://www.w3.org/TR/html401/interact/forms.html#h-17.6

label = text [CS]
This attribute allows authors to specify a shorter label for an option than the
content of the OPTION element. When specified, user agents should use the value
of this attribute rather than the content of the OPTION element as the option label.

This really only makes sense within an OPTGROUP, but the recommendation states
that the label value should always be used.

The testcase from bug 84094 demonstrates the way the LABEL property might be
used and the consequences of not supporting it:

Attachment 37117 [details] (I wonder if this makes a link like bug 84094 does...)
http://bugzilla.mozilla.org/showattachment.cgi?attach_id=37117
M0.9 definitely won't happen. Changing keyword to next available milestone.
Keywords: mozilla0.9mozilla0.9.2
Blocks: 104166
Workaround for this problem, using CSS.

The content of the label attribute is displayed via ":before" pseudo-class and
the content of <option> is invisible.
See attachment.
(stolen from image handling at <http://www.subotnik.net/stylesheets/lynx.css>)
Priority: P3 → --
Whiteboard: relnote-devel → relnote-devel[HTML4-17.9.1]
Whiteboard: relnote-devel[HTML4-17.9.1] → relnote-devel[HTML4-#adef-label-OPTION]
I'll try to fix this, I've reading code and I think I know exactly what yo do,
but I want to propose something:

Why not using the long text when the combo is not in "dropped down" state.
Rationale: When the combo is collapsed, the optgroups aren't ther and there's no
context for the selection. Example:

Broser: Netscape
          4.x
        ##6.x############
        Explorer
          4.x
          5.x
          6.x

... when collapsed would look like this:

Browser:  6.x

I propose using the long text, so we show:

Browser: Netscape 6.x
Attached file Testcase
I don't think we should show a different label on a thing for an optgroup.  The
spec says use label to show the option, we should use label to show the option.


Let's take the possibility of doing "optgroupname - label" as the label
elsewhere :)
Alias: option-label
Once bug 215083 is fixed this can be supported with an easy change in forms.css:

  option[label]{
    content:attr(label);
  }
Assignee: rods → nobody
Status: ASSIGNED → NEW
QA Contact: vladimire → core.layout.form-controls
(In reply to comment #16)
> Let's take the possibility of doing "optgroupname - label" as the label
> elsewhere :)

The suggestion was not to use "optgroupname - label" as the label, but to use
the "Long label" (as per comment #6) when the combo is not "dropped-down", but
use the "Short label" in the drop-down itself.

This is exactly like the behaviour suggested in
http://www.w3.org/TR/REC-html40/interact/forms.html#idx-menu-4

It can be noted that neither Opera nor Internet Explorer support label= on
<option> elements either.
Apparently, Mozilla ignores the label attribute even when the option element
has no content. Mozilla 1.7.2, IE 6.0 and Opera 7.51 all render option elements
with labels but no content as blank lines.
IE7 beta 2 has fixed this. 

2000-05-24? Is this really NEW?

Also, the URL should be http://www.robinlionheart.com/stds/html4/forms#optgroup .
If IE7beta indeed has this, I'm asking for blocking for 1.8.1 for feature parity since Safari and Konq also have it as well.
Flags: blocking1.8.1?
Clearing blocking: we wouldn't hold 1.8.1 for this, but we would certainly consider a good patch for it.
Flags: blocking1.8.1?
IE/Win 7.0 final supports them.

Adding whiteboard parity tags for IE/Win and for Safari (per comment #22).
Whiteboard: relnote-devel[HTML4-#adef-label-OPTION] → [p-ie/win][p-safari] relnote-devel[HTML4-#adef-label-OPTION]
Opera 9.50a1 build 9500 supports label for option. Adding whiteboard parity tag for Opera and voting for this bug :)
Whiteboard: [p-ie/win][p-safari] relnote-devel[HTML4-#adef-label-OPTION] → [p-ie/win][p-safari][p-opera] relnote-devel[HTML4-#adef-label-OPTION]
Another testcase:

http://www.mozilla.org/newlayout/samples/test8.html

and search for "Option Label Test" at the bottom-end of the page

Adding testcase keyword
Keywords: testcase
We didn't relnote this in Firefox 2, and we're not going to start with Firefox 3. Removing keyword.
Keywords: relnote
Flags: wanted1.9.1?
Flags: wanted1.9.1?
Flags: wanted1.9.1-
Flags: blocking1.9.1-
This bug has just hit me in Firefox 3.5.2.
(Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.1.2) Gecko/20091019 Gentoo Firefox/3.5.2)

I need some encouragement. Is this bug so hard to fix, that I should not even try to fix it? I have never messed with Firefox sources so far, that's why I'm asking.
I depends on how you go about fixing it.  If you take the approach from comment 17, then it might be a good bit of work (e.g. having to fix bug 215083 first).  If you do something special to <option> you might be able to get away with less work, maybe.  Depends on how much performance matters and how careful you need to be about dynamic changes to labels.

I suspect that this can be fixed with some xbl applied to option[label], though the performance is likely to be suboptimal.  The benefit of that, of course, is that that approach doesn't even need any browser changes: it can be part of the website, at least as an experiment.
Keywords: html5
This comment is for those who assigned this bug to be ignored or duplicated. I do appreciate your attention. 

I just like to make sure that the position of ignoring label attribute for OPTION object is still valid in HTML5 from the Firefox development perspective. All other browsers, Safari, Chrome, IE11, Opera, do support this label option. Firefox is the only one not supporting it. 

What is the right way to show the label of OPTION in the selection list of a SELECT object? Could you please provide us a solution to address the problem?
I've posted similar comments and questions for Bug 1174460, just like to re-enter the comments here to call more attention about the fix of this bug:

1. Why folks here consider the CSS tweak in Bug 215083 as the fix of missing support for the label attribute of OPTION in the past 15 years? CSS is supposed to be a specification facility for the presentation of the elements in a webpage. Choosing a specific content from the data structures behind a webpage is a behavior which should be a totally different concept in programming. Thus, the fix of this bug should not depend on a CSS enhancement. 

2. In debugging Bug 1174460, I found no issue in Javascript, meaning Javascript execution behind Firefox supports both label and value attributes for OPTION, at least that's what presented in the Firefox debugger. However, Firefox doesn't display the selected item and doesn't present the labels in the pull-down menu correctly as all other major browsers do. I agree fixing problems in OPTION is necessary. However, just by reasoning, SELECT many also require some attention as well. I'd like to call your attention about whether or not just assigning the fix to Bug 40545, which focuses on fixing the label support issue for OPTION, will suffice the needed fixes for the display problems of SELECT. Given the principle of one Bug report for one bug, should there be another Bug report addressing the SELECT object which is the origin of the reported problems?

Also I thank whoever changed the status on this bug to new so it is open for contributors to work on it again. Many folks discussed about this bug for so many years. It seems to be a very basic feature that Firefox should have had since day one. Many folks like me are very eager to see the SELECT bug is addressed as soon as possible.

Many thanks,
(In reply to Tom Soon from comment #43)
> 1. Why folks here consider the CSS tweak in Bug 215083 as the fix of missing
> support for the label attribute of OPTION in the past 15 years? CSS is
> supposed to be a specification facility for the presentation of the elements
> in a webpage. Choosing a specific content from the data structures behind a
> webpage is a behavior which should be a totally different concept in
> programming. Thus, the fix of this bug should not depend on a CSS
> enhancement.

The CSS3 |content| property is a valid fix for this bug. The |label| attribute is supposed to, essentially, represent an equivalent, abbreviated version of |option| elements' content for use with an |optgroup| element's label. This isn't evident from the WHATWG HTML spec, which doesn't provide a single example of usage, but there are examples in the HTML 4.01 spec that demonstrate how the feature is supposed to be used: "http://www.w3.org/TR/html401/interact/forms.html#adef-label-OPTION". Given how narrow the use case demonstrated in those examples is, it's no surprise that Mozilla has managed to get away without fixing this bug for so long.

That said, bug 215083 is technically invalid right now given that the current, development draft of the CSS3 Generated and Replaced Content spec is labeled "Not Ready for Implementation". See "http://dev.w3.org/csswg/css-content-3/". It'd probably be easier to implement a direct fix for this bug anyway.

(In reply to Tom Soon from comment #42)
> What is the right way to show the label of OPTION in the selection list of a
> SELECT object? Could you please provide us a solution to address the problem?

Assuming usage as described in the HTML 4.01 spec, your best bet would be to use JavaScript to replace the |textContent| of |option| elements with the respective |label| attribute values until the form is ready for submission, at which point you'd change the |textContent| back to ensure that the server gets the correct, longform option values. If you're using |value| attributes, you don't even need to bother changing the |textContent| back. In the unlikely event that JavaScript is disabled, the longform |option| element text will be used, resulting in no semantic loss.

Aside from the extra code and effort, the only downside I can see to this workaround is that your site could look messed up if JavaScript is disabled and your layout relies on the |option| elements having the abbreviated (read: short in width) |label| attribute text to display properly.
(In reply to Tom Soon from comment #42)
> All other browsers, Safari, Chrome, IE11, Opera, do support
> this label option.

This is not entirely true. Chrome 43 and Chrome 45 fail the "Option Label Test" at the bottom-end of the page

http://www.mozilla.org/newlayout/samples/test8.html


----------


(In reply to Patrick Garies from comment #44)

> The CSS3 |content| property is a valid fix for this bug. The |label|
> attribute is supposed to, essentially, represent an equivalent, abbreviated
> version of |option| elements' content for use with an |optgroup| element's
> label. 

The label attribute for an <option> element does not require an <optgroup> element's label. The <option> attribute label and the <optgroup> attribute label are independent from each other; those 2 labels are not interdependent.

See the "Option Label Test" at the bottom-end of the page

http://www.mozilla.org/newlayout/samples/test8.html

or see comment #6 in this bug report.

> This isn't evident from the WHATWG HTML spec, which doesn't provide a
> single example of usage, 

I agree: it isn't evident.

> but there are examples in the HTML 4.01 spec that
> demonstrate how the feature is supposed to be used:
> "http://www.w3.org/TR/html401/interact/forms.html#adef-label-OPTION". 

The ComOS example in HTML 4.01 spec has a small error in it:

<OPTION selected label="none" value="none">None</OPTION>

should render 

none and not None. Also, such label is an inappropriate way of using the label attribute.
(In reply to Gérard Talbot from comment #45)
> (In reply to Tom Soon from comment #42)
> > All other browsers, Safari, Chrome, IE11, Opera, do support
> > this label option.
> 
> This is not entirely true. Chrome 43 and Chrome 45 fail the "Option Label
> Test" at the bottom-end of the page
> 
> http://www.mozilla.org/newlayout/samples/test8.html

I was going to attach a testcase for that to this bug. Then I noted that that failure appears to only occur in Chrome's (Chrome 43's) quirks mode (due to a missing |DOCTYPE| declaration), so it doesn't seem necessary.

(In reply to Gérard Talbot from comment #45)
> (In reply to Patrick Garies from comment #44)
> 
> > The CSS3 |content| property is a valid fix for this bug. The |label|
> > attribute is supposed to, essentially, represent an equivalent, abbreviated
> > version of |option| elements' content for use with an |optgroup| element's
> > label. 
> 
> The label attribute for an <option> element does not require an <optgroup>
> element's label. The <option> attribute label and the <optgroup> attribute
> label are independent from each other; those 2 labels are not interdependent.

You're right. There is also the use case for simply wanting to submit the longer version of an |option| element's value (i.e., the |textContent|) instead of the shortened |label| attribute-equivalent presented to users and this doesn't require an |optgroup| element.

That usage seems like it'd be even more unusual than the |optgroup| scenario though; who shows a user a shortened version of text, then wants a longer version of the same text submitted to the server? There's no utility over using the |value| attribute unless one thinks alternative viewers like search engines or maybe speech synthesizers are going to use the longform information. The |optgroup| scenario at least allows use of redundant display values with different meanings — as shown in the HTML 4.01 examples linked in comment 44 — with utility relevant to the average (sighted) user. That's why I left mention of the second scenario out.

My point was that this is a presentational feature, making a CSS enhancement a valid fix, and that people spamming this bug with "please fix" might not even need the fix because they're incorrectly using |<option label="x"/>| as a substitute for |<option>x</option>| or |<option label="x">y</option>| as a substitute for |<option value="y">x</option>|.

(In reply to Gérard Talbot from comment #45)
> > This isn't evident from the WHATWG HTML spec, which doesn't provide a
> > single example of usage, 
> 
> I agree: it isn't evident.

I'll try to get around to submitting a bug report on the HTML spec asking them to incorporate the HTML 4.01 examples and describe how this attribute should be used.

Frankly, I think the design of this feature is poor and should be changed, but I doubt anyone can be convinced considering what little relevance this feature has. It'd make more sense if the |label| attribute were implemented with another name like |abbr| as is used in the HTML 4.01 spec for tables so that authors can tell that it's not just a redundant mechanism for specifying an |option| element's display value. See "http://www.w3.org/TR/html401/struct/tables.html#adef-abbr". But, I digress…

(In reply to Gérard Talbot from comment #45)
> The ComOS example in HTML 4.01 spec has a small error in it:
> 
> <OPTION selected label="none" value="none">None</OPTION>
> 
> should render 
> 
> none and not None. Also, such label is an inappropriate way of using the
> label attribute.

Good catch.
(In reply to Patrick Garies from comment #46)

> who shows a user a shortened version of text, then wants a longer
> version of the same text submitted to the server? 

Maybe the webpage author does not want the select to be unneedlessly too wide?

Eg.

<p>Your preferred browser: <select name="prefBrowser" size="1">
    <option>Choose</option>
    <option label="IE10">Internet Explorer 10</option>
    <option label="IE11" value="Internet Explorer 11"></option>
    <option>Firefox</option>
  </select>
</p>

We are in an era where a lot of acronyms and abbreviations are used and understood on the web.

> My point was that this is a presentational feature, making a CSS enhancement
> a valid fix, and that people spamming this bug with "please fix" might not
> even need the fix because they're incorrectly using |<option label="x"/>| as
> a substitute for |<option>x</option>| or |<option label="x">y</option>| as a
> substitute for |<option value="y">x</option>|.

I agree with you. A lot of people may be (or could be) incorrectly using the label attribute once it gets implemented.

> I'll try to get around to submitting a bug report on the HTML spec asking
> them to incorporate the HTML 4.01 examples and describe how this attribute
> should be used.

A good realistical example (with appropriate usage of label) is needed.

> Frankly, I think the design of this feature is poor and should be changed,
> but I doubt anyone can be convinced considering what little relevance this
> feature has. It'd make more sense if the |label| attribute were implemented
> with another name like |abbr| as is used in the HTML 4.01 spec for tables so
> that authors can tell that it's not just a redundant mechanism for
> specifying an |option| element's display value. See
> "http://www.w3.org/TR/html401/struct/tables.html#adef-abbr". But, I digress…

I agree with you: abbr would be more semantic, more significant.
Keep in mind option values often do not match their displayed text, as when a numeric key is used.

Is clarification really needed, if judgements of usage correctness and a more suitable attribute name are already being made here?

A good example can be found at http://www.robinlionheart.com/stds/html4/forms.html#optgroup , and should probably just be added to the standard as is.

It's pretty clear that the only point to creating a second way to specify label text (which overrides the old way) was to support a transitional period during which support for optgroup was being implemented. There's no other reason to allow two ways to specify the same thing (though there's an argument to be made for the long version being displayed when a non-multiple select is collapsed/closed/folded, outside the context of a displayed optgroup label). This would have allowed older browsers to render the full text in a flat list, while newer ones could provide a hierarchy without so much redundancy. It was a good migration plan, poorly communicated in the spec, but single-handedly and  irredeemably screwed up by Mozilla crossing the chasm in two leaps.
Referring to comment 45

[...]mozilla.org/newlayout/samples/test8.html

is now at

http://www-archive.mozilla.org/newlayout/samples/test8.html

Chrome 51 and 53 still fail the "Option Label Test" at the bottom-end of the page
I filed https://github.com/whatwg/html/issues/2988 for this issue. What does Mozilla think here? Will Mozilla even receive a PR if somebody writes one?
(In reply to saschanaz from comment #52)
> I filed https://github.com/whatwg/html/issues/2988 for this issue. What does
> Mozilla think here? Will Mozilla even receive a PR if somebody writes one?

Jet, can you please clarify this?

Sebastian
Flags: needinfo?(bugs)
(In reply to Sebastian Zartner [:sebo] from comment #53)
> (In reply to saschanaz from comment #52)
> > I filed https://github.com/whatwg/html/issues/2988 for this issue. What does
> > Mozilla think here? Will Mozilla even receive a PR if somebody writes one?
> 
> Jet, can you please clarify this?
> 
> Sebastian

As noted in comment 1, Firefox has behaved this way for at least 18 years. That's 18 years worth of content that has never been tested with the proposed behavior change. Any "fix" for this will be evaluated based on the quality of the code, the matching tests, and a workable plan to measure and mitigate the web compatibility impact. 

It's that last part about web compatibility that will be the hardest to get right. We'll want to avoid breaking sites that count on the current behavior (e.g., sites that use the CSS workaround from comment 13, or sites that serve different content to Firefox.)
Removing the ni for Jet due to his feedback in comment 54.

Sebastian
Flags: needinfo?(bugs)
Whoever works on this, note that in quirks mode we should definitely not change behavior, since other browsers don't seem to support this in quirks mode.
Summary: LABELs don't work for OPTIONs (<option label> in selects) → LABELs don't work for OPTIONs (<option label> in selects) (standards mode only!)
More precisely, Edge does seem to support it in quirks mode, but Chrome and Safari do not.

Current test case/additional info: https://scottaohara.github.io/tests/html-select/label-value-attrs.html

Firefox 68.0.1 on macOS / Windows 10 do not render label. Firefox on Android does render the label.

According to spec, option elements with label attributes should show and use
those labels rather than their element text. So let's do that.

Requires some trickery because the option element is a block element (so it
lays out its width based on its text content) so we put its label (if it has
one) in its ::before and skip frame generation so it measures the text of its
label, not of its text node children.

Assignee: nobody → chutten
Status: NEW → ASSIGNED
Priority: -- → P1

Hi chutten! Thanks for looking into this. I suspect it belongs as P3 rather than P1, given that we've let it go unfixed for so long. (In layout, P3 = normal-priority bug, while P1=must-fix-ASAP,possibly-need-to-uplift-the-fix. And I think this is in the former category).

--> Adjusting priority, but let me know if I've missed something & this is super-high-priority for some reason.

Priority: P1 → P3

Nope, that's cool. In Telemetry Land P1 is "working on it presently" and P3 is "intending to work on it this quarter" (full list at the bottom of this page), which is where the mismatch is : )

Attachment #9127941 - Attachment description: Bug 40545 - Options to use label attribute when present r?emilio → Bug 40545 - Options to use label attribute when present r?emilio!
Blocks: 1626361
Pushed by chutten@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/813e1405e501
Options to use label attribute when present r=emilio,jfkthame,mats
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/22609 for changes under testing/web-platform/tests
Whiteboard: [p-ie/win][p-safari][p-opera] relnote-devel[HTML4-#adef-label-OPTION] → [p-ie/win][p-safari][p-opera] relnote-devel[HTML4-#adef-label-OPTION], [wptsync upstream]
Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.
Upstream PR was closed without merging

Well this is interesting. The failing test is checking that option.label is the same value as option.getAttribute("label"). With my change option.label is correct wrt spec in that it returns the value of option.text if it's set to the empty string... should getAttribute("label") return the same value?

Flags: needinfo?(chutten) → needinfo?(emilio)

No, getAttribute should just return the attribute value. I think the test is right. I don't think label="" should return the text if it's empty:

https://html.spec.whatwg.org/multipage/form-elements.html#dom-option-label says:

The label IDL attribute, on getting, if there is a label content attribute, must return that attribute's value; otherwise, it must return the element's label. On setting, the element's label content attribute must be set to the new value.

label="" means that there is an attribute, even if it's the empty string. So this is a bug on the patch, and we should use something else to get the "rendered" text other than GetLabel.

Flags: needinfo?(emilio)

Doesn't option's definition for the label attribute supercede the generic one for form elements, in this case?

The label attribute provides a label for element. The label of an option element is the value of the label content attribute, if there is one and its value is not the empty string, or, otherwise, the value of the element's text IDL attribute.

Flags: needinfo?(emilio)

No, the content attribute is just the attribute on the element, what getAttribute returns.

Flags: needinfo?(emilio)

(other browsers also seem to agree with this)

Okay, so it seems as though the consensus is that the label content attribute and IDL should agree with each other (which is to say, should be allowed to return "" and null even if there's text content) and the "label" that Option's part of the spec is talking about is some render-only label concept to help explain the visual behaviour.

Gonna have to rewrite some stuff : |

Attachment #9127941 - Attachment description: Bug 40545 - Options to use label attribute when present r?emilio! → Bug 40545 - Options to use label attribute when present r=emilio,jfkthame,mats
Pushed by chutten@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/41906e11f2d2
Options to use label attribute when present r=emilio,jfkthame,mats
Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.

And rename GetRenderLabel to GetRenderedLabel, as it's a slightly more
descriptive name IMHO.

Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/6c29976af974
Fix the empty-label attribute case in the select popup. r=chutten
Pushed by btara@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/bb80f48dfd8d
Fix prettier errors on browser_selectpopup.js and SelectChild.jsm CLOSED TREE

I can confirm that in Firefox 75.0 the attribute is ignored while in Nightly 77.0a1 (2020-04-07) it is recognized as expected.

Thank you for implementing this and congrats on fixing a twenty years old bug!

Sebastian

Status: RESOLVED → VERIFIED
Upstream PR merged by moz-wptsync-bot

Question: The "Milestone" field should be set to "mozilla77", right?

Sebastian

Flags: needinfo?(chutten)

According to the docs that's a sheriff-managed field, so I'm not gonna touch it : )

Flags: needinfo?(chutten)
Target Milestone: Future → mozilla77
Regressions: 1644611
You need to log in before you can comment on or make changes to this bug.