Allow HTML content with rules as for LI tag to OPTION tag

[koteisaev]

What problem are you trying to solve?

Many JavaScript libraries has been created because controls hard to style according to site theme or design system. This is especially prominent for OPTION tag that is used by SELECT and DATALIST tags.

Sites that try to use raw controls and avoid JavaScript, can not reach expected behavior for select tag and other option usages, if just simple string like name is not enough to make an informed choice or describe items in the list offered via the select tag or in the input with data list.

What solutions exist today?

Today all solutions involve usage of complicated (and often buggy) JavaScript libraries which often are not provide proper metadata for accessibility/assistive technologies and screen readers.

How would you solve it?

Allow for OPTION contents (children tags and text nodes) same rules for allowed children tags and styling features that are applied today to content of LI tag, except list-style CSS property (or use different defaults for this, such as none) for the OPTION tag.

Anything else?

Examples where it can be useful for no-javascript sites:

• country pickers and country code pickers can have country flags
• team members pickers implemented via select or datalist can have users avatars with their names and duties descriptions/departments

This will allow wider usage of more accessible select tag and input+datalist pairs across websites and improve experience of users who need screen reader, as these controls more obvious for them, also, will make such experience more obvious for mobile context.

[YummyBacon5]

Slightly different from what you said, but a styleable <select> element (known as <selectlist>) is being worked on in the Open UI CG. Where images will be allowed as children of the <option> element.

Explainer: https://open-ui.org/components/selectlist
GitHub: https://github.com/openui/open-ui

[koteisaev]

Slightly different from what you said, but a styleable <select> element (known as <selectlist>) is being worked on in the Open UI CG. Where images will be allowed as children of the <option> element.

Explainer: https://open-ui.org/components/selectlist GitHub: https://github.com/openui/open-ui

Does it mean my feature request will be declined as duplicate because if that explainer on some website was not so easy to find?

[annevk]

I think this is a duplicate of #5791.

[koteisaev]

I agree if this specific issue will be closed as duplicate of that one (which I had issues to find using search UI) only with hope that this will result to some progress in improving existing or creating new customizable select replacement via of any of existing issues describing improvements. Essentially I don't care on which issue (mine or not) the improvement will be made, What I really care is that progress will be made.
Problem is that if that progress will be done via some new large full-blown standard, it will be a long adventure, and may be we will se that improvement after I will retire...