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

WPT - web-platform-tests/wpt#49645

[netlify]

✅ Deploy Preview for wai-aria ready!

Name	Link
🔨 Latest commit	3a08912
🔍 Latest deploy log	https://app.netlify.com/sites/wai-aria/deploys/6759ea2efdf3ac00083dfc45
😎 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 from aria-labelledby and description expectation tests

test 1: name = foo
        description = n/a
<select>
    <button><selectedcontent></selectedcontent></button>
    <optgroup aria-labelledby=f>
       <div id=f>foo</div> <!-- invalid per content model -->
       <option>test
    </optgroup>
</select>


test 2: name = foo
        description = n/a
<select>
    <button><selectedcontent></selectedcontent></button>
    <optgroup aria-labelledby=f aria-label=bar>
       <div id=f>foo</div> <!-- invalid per content model -->
       <option>test
    </optgroup>
</select>


test 3: name = foo
        description = bar
<select>
    <button><selectedcontent></selectedcontent></button>
    <optgroup aria-labelledby=f title=bar>
       <div id=f>foo</div> <!-- invalid per content model -->
       <option>test
    </optgroup>
</select>


## Name from aria-label and description expectation tests

test 1: name = foo
        description = n/a
<select>
    <button><selectedcontent></selectedcontent></button>
    <optgroup aria-label=foo>
        <option>test
    </optgroup>
</select>

test 2: name = foo
        description = bar
<select>
    <button><selectedcontent></selectedcontent></button>
    <optgroup aria-label=foo title=bar>
        <option>test
    </optgroup>
</select>



## Name from label attribute and description expectation tests

test 1: name = foo
        description = n/a
<!-- primary use case, no naming mechanism aside from label attribute -->
<select>
    <button><selectedcontent></selectedcontent></button>
    <optgroup label=foo>
        <option>test
    </optgroup>
</select>


test 2: name = bar
        description = foo
<!-- aria-label provided which wins out over label attr, but label attr's value is rendered, so still
     expose it as a description so the information is at least still available to AT -->
<select>
    <button><selectedcontent></selectedcontent></button>
    <optgroup aria-label=bar label=foo>
        <option>test
    </optgroup>
</select>


test 3: name = foo
        description = bar
<select>
    <button><selectedcontent></selectedcontent></button>
    <optgroup label=foo title=bar>
        <option>test
    </optgroup>
</select>


## Name from legend element and description expectation tests

test 1: name = foo 
        description = n/a
<!-- primary use case, no naming mechanism aside from legend element -->
<select>
    <button><selectedcontent></selectedcontent></button>
    <optgroup>
        <legend>foo</legend>
        <option>test
    </optgroup>
</select>

test 2: name = foo 
        description = n/a
<!-- label attr value is not to render because legend is specified -->
<select>
    <button><selectedcontent></selectedcontent></button>
    <optgroup label=bar>
        <legend>foo</legend>
        <option>test
    </optgroup>
</select>

test 3: name = bar 
        description = foo
<!-- aria-label provided which wins out over legend, but legend is rendered, so still
     expose it as a description so the information is at least still available to AT -->
<select>
    <button><selectedcontent></selectedcontent></button>
    <optgroup aria-label=bar>
        <legend>foo</legend>
        <option>test
    </optgroup>
</select>

test 4: name = bar 
        description = foo
<!-- aria-labelledby provided which wins out over legend, but legend is rendered, so still
     expose it as a description so the information is at least still available to AT -->
<select>
    <button><selectedcontent></selectedcontent></button>
    <optgroup aria-labelledby=b>
        <div id=b>bar</div> <!-- invalid per content model -->
        <legend>foo</legend>
        <option>test
    </optgroup>
</select>


test 5: name = foo 
        description = bar
<!-- legend provides name, title provides description -->
<select>
    <button><selectedcontent></selectedcontent></button>
    <optgroup title=bar>
        <legend>foo</legend>
        <option>test
    </optgroup>
</select>


## Name from title attribute and description expectation tests

test 1: name = foo 
        description = n/a
<!-- primary use case, no naming mechanism provided aside from title attribute -->
<select>
    <button><selectedcontent></selectedcontent></button>
    <optgroup title=foo>
        <option>test
    </optgroup>
</select>


test 2: name = foo 
        description = n/a
<!-- empty label would otherwise result in no accName - use title as fallback -->
<select>
    <button><selectedcontent></selectedcontent></button>
    <optgroup label title=foo>
        <option>test
    </optgroup>
</select>

test 3: name = foo 
        description = n/a
<!-- empty legend would otherwise result in no accName - use title as fallback -->
<select>
    <button><selectedcontent></selectedcontent></button>
    <optgroup title=foo>
        <legend></legend>
        <option>test
    </optgroup>
</select>

test 4: name = foo
        description = n/a
<!-- empty aria-label would otherwise result in no accName - use title as fallback -->
<select>
    <button><selectedcontent></selectedcontent></button>
    <optgroup aria-label title=foo>
        <legend></legend>
        <option>test
    </optgroup>
</select>

test 5: name = foo
        description = n/a
<!-- aria-labelledby points to empty element which would otherwise result in no accName - use title as fallback -->
<select>
    <button><selectedcontent></selectedcontent></button>
    <optgroup aria-labelledby=f title=foo>
        <div id=f></div>
        <legend></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