Why isn't my locator finding this element?

[hornta]

I got this label and button. I do expect myself to target this combobox using the locator below but for some reason playwright can't find it. When I open the inspect window and record myself clicking on the element it gives me a locator like so:
locator("#floating-ui-2335").

I can even see the accesibility pane in Chrome that the name of the element is ABC and that it comes from the associcated label.

<label for="floating-ui-2335">ABC</label>
<button 
  id="floating-ui-2335" 
  type="button" 
  aria-expanded="false" 
  aria-haspopup="listbox" 
  aria-controls="floating-ui-2340" 
  role="combobox" 
  aria-invalid="false" 
  value="" 
  name="organizationalUnits"
>...</button>

// test
await page.locator('role=combobox[name="ABC"]').click();

References:
dequelabs/axe-core#3353
w3c/html-aria#396

[aslushnikov]

I can reproduce with the following test:

import { test, expect } from '@playwright/test';

test('test', async ({ page }) => {
  await page.setContent(`
    <label for="btn">ABC</label>
    <button id="btn" role="combobox">button</button>
  `);
  await page.getByRole('combobox', { name: 'ABC' }).click();
});

The accessibility panel for the button, indeed, shows that Accessible name is "ABC".