html.elements.hr - Its standardized use in <select> is not widely supported

[aardrian]

What type of issue is this?

Missing compatibility data

What information was incorrect, unhelpful, or incomplete?

The <hr> element, when used in a <select>, is not exposed visually and/or programmatically in all cases. The entry lists <hr> as having full support in all browsers. However, when used in <select> that is not the case.

What browsers does this problem apply to, if applicable?

Chromium (Chrome, Edge 79+, Opera, Samsung Internet), Firefox, Safari

What did you expect to see?

Partial support in all browsers.

Did you test this? If so, how?

Yes, with this test case:
https://adrianroselli.com/demos/splitting-within-selects/index.html

Test results:

Firefox 118 / Windows 11:

• does not expose the <hr> visually in the page;
• does not expose the <hr> programmatically in the rendered DOM;
• does not expose the <hr> within the accessibility tree;
• does not announce the <hr> when using NVDA;
• has no contrast concern since it does not appear.

Firefox 115 / Ubuntu 22.04.2 LTS:

• does not expose the <hr> visually in the page;
• does not expose the <hr> programmatically in the rendered DOM;
• does not expose the <hr> within the accessibility tree;
• does not announce the <hr> when using NVDA;
• has no contrast concern since it does not appear.

Chrome Canary (120) / Windows 11:

• exposes the <hr> visually in the page only when the menu is expanded (arrowing within the collapsed menu does not show them);
• exposes the <hr> programmatically in the rendered DOM;
• does not expose the <hr> within the accessibility tree;
• does not announce the <hr> when using JAWS;
• has sufficient contrast since it matches the text color.

Safari 17 / macOS 14.0:

• exposes the <hr> visually in the page (arrowing within the collapsed menu expands it);
• exposes the <hr> programmatically in the rendered DOM;
• does not expose the <hr> within the accessibility tree;
• does not announce the <hr> when using VoiceOver;
• has insufficient contrast (1.3:1), though the spacing arguably does the job.

Firefox 118 / Android 13:

• does not expose the <hr> visually in the page;
• does not announce the <hr> when using TalkBack;
• has no contrast concern since it does not appear.

Chrome Canary (120) / Android 13:

• exposes the <hr> as its own empty selectable option;
• does not announce the <hr> when using TalkBack, but is a swipe-stop;
• has unknown contrast since it is blank.

Safari 17 / iPadOS 17.0.3:

• does not expose the <hr> visually in the page;
• does not announce the <hr> when using VoiceOver, because it is not in the page;
• has unknown contrast since it is blank.

Can you link to any release notes, bugs, pull requests, or MDN pages related to this?

• Added to WHATWG HTML in May 2023: #9124 Allow <hr> to be used inside <select> as a separator
• Added to HTML-AAM in October 2023: #504 Update: hr within select element

Do you have anything more you want to share?

No response

MDN URL

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr

MDN metadata

MDN page report details

• Query: html.elements.hr
• Report started: 2023-12-17T15:30:38.327Z

[extra808]

I also filed an MDN content issue about updating the Technical Summary section: hr missing new Permitted parent #31085

[Elchi3]

Thanks for your detailed research!

Looks like <hr>-in-<select> is not in BCD at all yet. It probably makes sense to add it to the data for both the <hr> and the <select> element, so I think we probably want to introduce two sub features here:

• html.elements.hr.hr_in_select
• html.elements.select.hr_in_select

As far as versions go, I think we have this:

• Ships in Firefox 122 according to https://bugzilla.mozilla.org/show_bug.cgi?id=1830909
• Ships in Safari 17 according to https://webkit.org/blog/14445/webkit-features-in-safari-17-0/ (although it seems that it was implemented before? Early as Safari 2?)
• Ships in Chrome 119 according to https://chromestatus.com/feature/6198448366026752

Seems like we will need partial support and notes for the issues you mention at least for Safari 17+ and Chrome 119+. For Firefox, I guess we need to check if the issues are still present in 122+.

Using https://adrianroselli.com/demos/splitting-within-selects/index.html in Firefox 122 Nightly, I can see

• the <hr> visually in the page;
• the <hr> programmatically in the rendered DOM;

I think I don't see:

• the <hr> within the accessibility tree; (there is combobox, listbox and then just a bunch of option objects)

I'm not quite sure how to test (can you help?):

• the <hr> when using NVDA;
• the contrast

[Elchi3]

I opened #21652 to record <hr> in <select>. Let me know what you think!

I didn't mention the issues with NVDA, JAWS, VoiceOver, Talkback. Unfortunately, BCD currently doesn't record compat data combination with AT software. I've looked at a11ysupport.io and they have a better data structure (AT software version + browser version + OS version):

"versions": {
    "jaws": {
      "browsers": {
        "chrome": {
          "at_version": "2021.2107.12",
          "browser_version": "92",
          "os_version": "Windows 10 version 21h1",
        },
        "edge": { },
        "ie": {},
    "nvda": {
      "browsers": {
        "chrome": { }
    }
  }
}

BCD's structure is a lot simpler and we only record browser compat data :(. If support is limited to particular operating system, we use partial_implementation.

Maybe it would be good to bring the research you have done to a11ysupport.io so that the AT support data could be recorded there?

[Elchi3]

Ah, already merged without you taking a look, @aardrian ...
Let me know if you have more thoughts on the BCD data. Happy to make changes to it.

[aardrian]

@Elchi3

• Ships in Safari 17 according to https://webkit.org/blog/14445/webkit-features-in-safari-17-0/ (although it seems that it was implemented before? Early as Safari 2?)

It was implemented in Safari 2.02 (2005), before it existed in the spec, and required JS to work.

Regarding Firefox 122:

I think I don't see:

• the <hr> within the accessibility tree; (there is combobox, listbox and then just a bunch of option objects)

The accessibility tree is an abstraction, so while it is not there it seems either position information is being transmitted or NVDA is using heuristics (too time constrained to look in NVDA or Firefox code today).

I'm not quite sure how to test (can you help?):
*the <hr> when using NVDA;

Not announced, but treated similarly to a grouping container by resetting count of items after each <hr>.

• the contrast

Screen shot and eyedropper. Has a 1.7:1 contrast ratio.

I opened #21652 to record <hr> in <select>. Let me know what you think!

At a glance it looks good.

I didn't mention the issues with NVDA, JAWS, VoiceOver, Talkback. Unfortunately, BCD currently doesn't record compat data combination with AT software.

I am aware, but sometimes (usually) how something is exposed in AT is a function of browser issues.