`aria-labelledby` referencing a `combobox` does not resolve accessible name correctly

[elianarlivingston]

Hi,

I’m encountering an issue with aria-labelledby in Testing Library when it references the id of an element with role="combobox". The accessible name is not being resolved as expected in this case.

Code Example:

it('Example', () => {
  render(
    <div>
      <button
        aria-labelledby="label value"
        id="trigger"
        role="combobox"
      >
        <span id="label">Label</span>
        <span id="value">Value</span>
      </button>
      <input aria-labelledby="trigger" />
    </div>,
  );

  const input = screen.getByRole('textbox');
  expect(computeAccessibleName(input)).toBe('Label Value');
});

Expected behavior:

The input's accessible name should be Label Value because aria-labelledby references an element with id="trigger", which contains accessible children with id="label" and id="value".

Observed behavior:

The accessible name is not resolved correctly, causing the test to fail.

Additional context:

It seems that this issue occurs because role="combobox" affects how aria-labelledby resolves the accessible name. According to the ARIA specification, a combobox should be associated with additional controls, such as a listbox or a textbox. However, this scenario should still be considered valid.

Question:

Is this behavior expected given the current implementation, or is it a bug in how aria-labelledby resolves when referencing a combobox?

Versions:

React Testing Library: <14.3.1>
DOM Testing Library: <9.3.4>
Dom Accessibility Api: <0.5.16>