Improve usecases in selectlist explainer #918
Conversation
josepharhar
requested review from
gregwhitworth,
mfreed7 and
dbaron
as code owners
|
|
||
| <div className="code-image-container"> | ||
| <div> | ||
| ```html | ||
| <selectlist> | ||
| <option> | ||
| <img src="usa.jpg"> | ||
| USA | ||
| <img src="swallow.jpg"> |
There was a problem hiding this comment.
Do these new images exist in the repo? I don't see them but maybe I missed it.
There was a problem hiding this comment.
don't forget alt="" or alt
There was a problem hiding this comment.
I switched back to country flags and added alt text.
The images don't exist in the repo, but they don't need to because they aren't actually downloaded or rendered anywhere on the website - the only exist in the demo which I made locally just to create the adjacent screenshot.
| <option>four</option> | ||
| <div class=container> | ||
| <div> | ||
| <div role=group>1-2</div> |
There was a problem hiding this comment.
Is this a "good" example? I would think we should use <optgroup> instead of a handful of divs with "role=group", no?
There was a problem hiding this comment.
I feel like using optgroup here would just be asking for people to say that <select> can already handle this use case.
<optgroup> has a user agent shadowroot and assigns the actual text with role=group from an attribute, which is not very robust, and <selectlist> doesn't have that limitation since youre allowed to put <div role=group>s in it.
But yeah this example does not actually do anything that optgroup can't do...
There was a problem hiding this comment.
I definitely think an example using <optgroup> can showcase things the <select> can't do. For example, it can contain a fully-styled <legend> element (per the resolution):
<selectlist>
<optgroup>
<legend><img src=cool_group_icon>Fancy group</legend>
<option>...
|
it may be worth noting specifically that just using emoji wouldn't be appropriate for many graphic + text label use cases, because emojis are exposed as content. so for instance, would be result in this option having the accessible name of "united kingdom flag united kingdom" and that's silly. There's no good way to mark that emoji as decorative with the current select > option parsing rules either. cause even if someone did |
|
Not to mention flag emojis don't actually render on all platforms. That does beg the question should aria-hidden on Scott's mentioned span have an impact on how it's parsed? Like when you're producing a value to be submitted should aria-hidden stop it being included? (Aria-hidden on the basis it's a good indication something is decorative) |
ARIA shouldn't change the behavior of HTML. It's only function is to modify how HTML is presented by the browser's accessibility tree. If someone needs to have their option submit a particular value, they should specify the |
Thanks! I'll go back to country flags then, they looked nicer than the animals anyway |
In response to this feedback: whatwg/html#9799 (comment)