Update: legend to provide name to optgroup

[scottaohara]

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

Test, Documentation and Implementation tracking

Once this PR has been reviewed and has consensus from the working group, tests should be written and issues should be opened on browsers. Add N/A and check when not applicable.

• "author MUST" tests:
• "user agent MUST" tests:
• Browser implementations (link to issue or commit):
  • WebKit:
  • Gecko:
  • Blink:
• Does this need AT implementations?
• Related APG Issue/PR:
• MDN Issue/PR:

[netlify]

✅ Deploy Preview for wai-aria ready!

Name	Link
🔨 Latest commit	e543559
🔍 Latest deploy log	https://app.netlify.com/sites/wai-aria/deploys/6725291214eaf90008245668
😎 Deploy Preview	https://deploy-preview-2360--wai-aria.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[keithamus]

Couple of minor formatting comments, but this LGTM from a spec position, modulo new resolutions from the WHATWG.

[scottaohara]

@keithamus would you mind taking another look? I've updated the ordering for the optgroup naming, and added new content to how a description should be calculated.

cc @josepharhar as updates here related to my comments in the update content model for customized select PR

[scottaohara]

examples for tests for how name/desc steps should work

<!-- name of optgroup: foo -->
<select>
    
    <optgroup aria-label=foo label=bar>
        <option>test
    </optgroup>
</select>

<!-- name of optgroup: foo 
        desc of optgroup: bar
-->
<select>
    
    <optgroup aria-label=foo title=bar>
        <option>test
    </optgroup>
</select>


<!-- name of optgroup: foo 
        desc of optgroup: bar
-->
<select>
    
    <optgroup label=foo title=bar>
        <option>test
    </optgroup>
</select>

<!-- name of optgroup: bar -->
<select>
    
    <optgroup title=bar>
        <option>test
    </optgroup>
</select>

<!-- name of optgroup: bar -->
<select>
    
    <optgroup label=bar>
        <option>test
    </optgroup>
</select>

<!-- name of optgroup: foo 
        desc of optgroup: bar
-->
<select>
    
    <optgroup aria-labelledby=x label=bar>
        <legend id=x>foo</legend>
        <option>test
    </optgroup>
</select>


<!-- name of optgroup: bar 
        desc of optgroup: foo
-->
<select>
    
    <optgroup label=bar>
        <legend>foo</legend>
        <option>test
    </optgroup>
</select>


<!-- name of optgroup: foo 
     desc of optgroup: bar baz
-->
<select>
    
    <optgroup aria-label=foo label=bar>
        <legend>baz</legend>
        <option>test
    </optgroup>
</select>


<!-- name of optgroup: foo 
     desc of optgroup: bar baz
-->
<select>
    
    <optgroup aria-label=foo label=bar title=ignored>
        <legend>baz</legend>
        <option>test
    </optgroup>
</select>

[keithamus]

Still LGTM

[scottaohara]

put back into the draft state as I need to revise the bits about how a label attribute and legend element should no longer be expected to render at the same time. re: https://issues.chromium.org/issues/378601807

[josepharhar]

put back into the draft state as I need to revise the bits about how a label attribute and legend element should no longer be expected to render at the same time. re: https://issues.chromium.org/issues/378601807

If you have a recommendation for what to do in this case, let me know and/or comment on the crbug. I haven't implemented anything yet to account for the case where both are present.

[scottaohara]

@josepharhar i think it's totally fine to only have one render / and have a preference for the legend element in this case since it'll allow for authors to do more.

• if only label attribute is specified, render that to be consistent with prior select functionality
• if only legend is specified, render that and if the select is loaded in a browser that doesn't support customization, there is no fallback
• if both are specified,
  • in browsers that support customization render legend element as the group label and do not render label attribute text
  • in browsers that don't support customization render the fallback label attribute text as the group label