1479854 - Feature Request: Allow adding icons/images to <select> and <datalist> <option>s

Status: UNCONFIRMED

(Core :: Layout: Form Controls, enhancement)

Description

[aleksey.gladysh]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1.2 Safari/605.1.15

Steps to reproduce:

1. Create a <select> or <datalist> element
2. Put an image or SVG element or anything other than plain text into an <option> element
3. Replace the <select> element with a complex JavaScript control.


Actual results:

Images and icons don't work in <option> elements. In the best case scenario, developers will replace it with a list of <input type="radio"> elements, but even though with a fair bit of work, such a custom control may be made somewhat accessible on desktop, it still creates an inferior form flow experience on mobile in most cases.


Expected results:

Have a way to render icons/images in the options so that developers wouldn't have to resort to JavaScript based controls which tend to be bad for accessibility on mobile and desktop. No browser supports this yet. This is a feature proposal that I'm going to do for all browsers. Here's a discussion on WHATWG's GitHub about it.
https://github.com/whatwg/html/issues/3596

Comment 1

[aleksey.gladysh]

Links to bug reports on other browsers:
https://bugs.chromium.org/p/chromium/issues/detail?id=869480
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/18470126/
https://bugs.webkit.org/show_bug.cgi?id=188200

Comment 2

[Daniel Bodea [:danibodea]]

This bug is an enhancement. With the information given, I am not able to reproduce or confirm it, but I will set this issue's component as (Core) Layout: Form Controls and let the developers decide whether this issue is valid and worth addressing.

@aleksey.gladysh: Can you provide us with a complete test case (with exact steps to reproduce) so I could confirm it and supposedly verify it when it gets fixed?

Thank you for your contribution!

Comment 3

[aleksey.gladysh]

How would I go about making a test case for a proposed feature? Especially when the implementation of said feature is very much up in the air.

I suppose if the solution is to render limited HTML within an <option> element, then the test code could look something like the following:

<select name="animal">
  <option><img src="puppy.svg"> Puppy</option>
  <option><img src="kitten.png"> Kitten</option>
</select>

The result would have the referenced images show up in the dropdown when it is open.