Select with aria-label generates invalid aria-labelled-by attribute for options list

[BenWard]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.8.1

What package has an issue?

@mantine/core

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

All

Describe the bug

When using a Select component labelled with an aria-label, rather than visible label, the options listbox is still rendered with an aria-labelled-by attribute that references the non-existent <label> element, causing the listbox to be unlabelled in accessibility contexts.

e.g.

<Select aria-label={label} />

Produces mark-up:

<div class="m_46b77525 mantine-InputWrapper-root mantine-Select-root">
  <div
    class="m_6c018570 mantine-Input-wrapper mantine-Select-wrapper"
    data-variant="default"
    data-with-right-section="true">
    <input
      class="m_8fb7ebe7 mantine-Input-input mantine-Select-input"
      data-variant="default"
      aria-label="Test Item"
      aria-haspopup="listbox"
      autocomplete="off"
      aria-invalid="false"
      id="mantine-mock1007"
      value=""
      aria-controls="mantine-mock1005"
      data-expanded="true"
      data-mantine-stop-propagation="true">
    
    <div
      data-position="right"
      class="m_82577fc2 mantine-Input-section mantine-Select-section">
        <svg ... />
    </div>
  </div>
</div>
<div
  style="z-index: 300; top: 8px; left: 0px; width: 0px;"
  class="m_38a85659 mantine-Popover-dropdown m_88b62a41 mantine-Select-dropdown"
  role="presentation"
  data-position="bottom">
  <div
    class="m_b2821a6e mantine-Select-options"
    id="mantine-mock1005"
    role="listbox"
    aria-labelledby="mantine-mock1007-label">
  <!-- etc. -->

Here, there is no element with ID mantine-mock1007-label.

(Note on the above: I've stripped out style attributes for legibility, and our test framework mocks @mantine/hooks#randomId to produce stable IDs, hence all the mantine-mock100… names above where you'd normally see alphanumeric codes.)

---

Thanks!

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

In cases where the Select has no label prop but has an aria-label, the listbox should have its own aria-label rather than labelled-by.

While it would also be an option to have the listbox reference the Select-input (e.g. aria-labelledby="mantine-mock1007 in the above), Mozilla's docs point out that <input> elements functioning as a label will also include the current value of the input as part of that label. That would mean if I had a Select labelled “Pick a Number” with options 1, 2, 3, the listbox would have an announced label of “Pick a number, 2”, when a value was picked. That's probably confusing for the list. Therefore, just having its own aria-label="Pick a Number” would be more straightforward.

Self-service

• I would be willing to implement a fix for this issue

[rtivital]

Fixed in 7.9.1