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