Resolve accessibility issues in datalist

[zcorpan]

See web-platform-tests/interop#547 by @joppekroon

Description

The datalist element is highly interesting, but due to the accessibility issues can not be relied upon to work.

MDN mentions three issues:

1. No support for Zoom.

2. No support for high contrast mode.

3. No announcement for content by some screen readers.

Rationale

Resolving these issues could lift the datalist to be a viable replacement to overengineered select/combo box solutions.

In my limited testing it looks like issue 3 has been fixed. Issue 2 seems to be fixed as well, on Windows the datalist listens to HCM although improved styling support in general would be appreciated of course. But issue 1, reacting to zoom, is still a problem.

Investigation Roadmap

No response

Also see #23 , filing this separately in case the scope is different.

[zcorpan]

For Gecko, I found these bugs for datalist in component Disability Access:

• https://bugzilla.mozilla.org/show_bug.cgi?id=641356
• https://bugzilla.mozilla.org/show_bug.cgi?id=1756203

There's also a meta bug for datalist generally: https://bugzilla.mozilla.org/show_bug.cgi?id=1638433

Per @MReschenberg, high contrast mode is also an issue.

[cookiecrook]

Possible paths forward:

• manually test with browser zoom, css zoom, contrast settings, and screen readers in each engine on each platform
• file any bugs discovered
• investigate role and label tests
• investigate if MQ test for @media (prefers-contrast: more) can be added here https://github.com/web-platform-tests/wpt/tree/07920967d79b3c88d440ddede3f7f5dc3b81c573/css/mediaqueries
• investigate device pixel ratio tests (maybe not reflected by browser zoom)???

[zcorpan]

Also see https://a11ysupport.io/tech/html/datalist_element