<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: v1.32.3</li>
<li>Operating System: [All, Windows 11, Ubuntu 20, macOS 13.2, etc.] All</li>
<li>Browser: [All, Chromium, Firefox, WebKit] All</li>
</ul>
<h3 dir="auto">Source code</h3>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I provided exact source code that allows reproducing the issue locally.</li>
</ul>
<p dir="auto">This is applicable in any project. Here's the specific line that I'm discussing in this project though: <a href="https://github.com/epicweb-dev/rocket-rental/blob/373d10b51186fe9bfdfe6ff3d98ec252e17d9e89/tests/e2e/onboarding.test.ts#L70">https://github.com/epicweb-dev/rocket-rental/blob/373d10b51186fe9bfdfe6ff3d98ec252e17d9e89/tests/e2e/onboarding.test.ts#L70</a></p>
<p dir="auto">It's for this UI:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1500684/232770548-e0d6b868-3d98-46b8-b8b7-a4e3ef63d956.png"><img src="https://user-images.githubusercontent.com/1500684/232770548-e0d6b868-3d98-46b8-b8b7-a4e3ef63d956.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>Test file (self-contained)</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="it('should check the box using setChecked', async ({ page }) =&gt; {
  await page.setContent(`
&lt;div class=&quot;flex gap-2&quot;&gt;
  &lt;button
    type=&quot;button&quot;
    role=&quot;checkbox&quot;
    aria-checked=&quot;false&quot;
    aria-required=&quot;true&quot;
    data-state=&quot;unchecked&quot;
    value=&quot;on&quot;
    id=&quot;field-agreeToTermsOfServiceAndPrivacyPolicy&quot;
  &gt;&lt;/button&gt;
  &lt;input
    type=&quot;checkbox&quot;
    aria-hidden=&quot;true&quot;
    name=&quot;agreeToTermsOfServiceAndPrivacyPolicy&quot;
    required=&quot;&quot;
    tabindex=&quot;-1&quot;
    value=&quot;on&quot;
    style=&quot;
      transform: translateX(-100%);
      position: absolute;
      pointer-events: none;
      opacity: 0;
      margin: 0px;
      width: 23.8594px;
      height: 24px;
    &quot;
  /&gt;
  &lt;label
    for=&quot;field-agreeToTermsOfServiceAndPrivacyPolicy&quot;
    class=&quot;text-body-xs text-night-200&quot;
  &gt;
    Do you agree to our Terms of Service and Privacy Policy?
  &lt;/label&gt;
&lt;/div&gt;
`);

  await expect(page.getByRole('checkbox', { name: /terms/i })).toBeVisible();
});"><pre class="notranslate"><span class="pl-en">it</span><span class="pl-kos">(</span><span class="pl-s">'should check the box using setChecked'</span><span class="pl-kos">,</span> <span class="pl-k">async</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> page <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">setContent</span><span class="pl-kos">(</span><span class="pl-s">`</span>
<span class="pl-s">&lt;div class="flex gap-2"&gt;</span>
<span class="pl-s">  &lt;button</span>
<span class="pl-s">    type="button"</span>
<span class="pl-s">    role="checkbox"</span>
<span class="pl-s">    aria-checked="false"</span>
<span class="pl-s">    aria-required="true"</span>
<span class="pl-s">    data-state="unchecked"</span>
<span class="pl-s">    value="on"</span>
<span class="pl-s">    id="field-agreeToTermsOfServiceAndPrivacyPolicy"</span>
<span class="pl-s">  &gt;&lt;/button&gt;</span>
<span class="pl-s">  &lt;input</span>
<span class="pl-s">    type="checkbox"</span>
<span class="pl-s">    aria-hidden="true"</span>
<span class="pl-s">    name="agreeToTermsOfServiceAndPrivacyPolicy"</span>
<span class="pl-s">    required=""</span>
<span class="pl-s">    tabindex="-1"</span>
<span class="pl-s">    value="on"</span>
<span class="pl-s">    style="</span>
<span class="pl-s">      transform: translateX(-100%);</span>
<span class="pl-s">      position: absolute;</span>
<span class="pl-s">      pointer-events: none;</span>
<span class="pl-s">      opacity: 0;</span>
<span class="pl-s">      margin: 0px;</span>
<span class="pl-s">      width: 23.8594px;</span>
<span class="pl-s">      height: 24px;</span>
<span class="pl-s">    "</span>
<span class="pl-s">  /&gt;</span>
<span class="pl-s">  &lt;label</span>
<span class="pl-s">    for="field-agreeToTermsOfServiceAndPrivacyPolicy"</span>
<span class="pl-s">    class="text-body-xs text-night-200"</span>
<span class="pl-s">  &gt;</span>
<span class="pl-s">    Do you agree to our Terms of Service and Privacy Policy?</span>
<span class="pl-s">  &lt;/label&gt;</span>
<span class="pl-s">&lt;/div&gt;</span>
<span class="pl-s">`</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-k">await</span> <span class="pl-en">expect</span><span class="pl-kos">(</span><span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">getByRole</span><span class="pl-kos">(</span><span class="pl-s">'checkbox'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">name</span>: <span class="pl-pds"><span class="pl-c1">/</span>terms<span class="pl-c1">/</span>i</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toBeVisible</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Steps</strong></p>
<ul dir="auto">
<li>Run the test</li>
<li>Notice it fails to find the terms checkbox button</li>
</ul>
<p dir="auto"><strong>Expected</strong></p>
<p dir="auto">I expect the button to be found.</p>
<p dir="auto"><strong>Actual</strong></p>
<p dir="auto">The button is not found.</p>
<p dir="auto">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:<br>
<code class="notranslate">locator("#floating-ui-2335")</code>.</p>
<p dir="auto">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.</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;label for=&quot;floating-ui-2335&quot;&gt;ABC&lt;/label&gt;
&lt;button 
  id=&quot;floating-ui-2335&quot; 
  type=&quot;button&quot; 
  aria-expanded=&quot;false&quot; 
  aria-haspopup=&quot;listbox&quot; 
  aria-controls=&quot;floating-ui-2340&quot; 
  role=&quot;combobox&quot; 
  aria-invalid=&quot;false&quot; 
  value=&quot;&quot; 
  name=&quot;organizationalUnits&quot;
&gt;...&lt;/button&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">label</span> <span class="pl-c1">for</span>="<span class="pl-s">floating-ui-2335</span>"<span class="pl-kos">&gt;</span>ABC<span class="pl-kos">&lt;/</span><span class="pl-ent">label</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">button</span> 
  <span class="pl-c1">id</span>="<span class="pl-s">floating-ui-2335</span>" 
  <span class="pl-c1">type</span>="<span class="pl-s">button</span>" 
  <span class="pl-c1">aria-expanded</span>="<span class="pl-s">false</span>" 
  <span class="pl-c1">aria-haspopup</span>="<span class="pl-s">listbox</span>" 
  <span class="pl-c1">aria-controls</span>="<span class="pl-s">floating-ui-2340</span>" 
  <span class="pl-c1">role</span>="<span class="pl-s">combobox</span>" 
  <span class="pl-c1">aria-invalid</span>="<span class="pl-s">false</span>" 
  <span class="pl-c1">value</span>="" 
  <span class="pl-c1">name</span>="<span class="pl-s">organizationalUnits</span>"
<span class="pl-kos">&gt;</span>...<span class="pl-kos">&lt;/</span><span class="pl-ent">button</span><span class="pl-kos">&gt;</span></pre></div>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// test
await page.locator('role=combobox[name=&quot;ABC&quot;]').click();"><pre class="notranslate"><span class="pl-c">// test</span>
<span class="pl-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">locator</span><span class="pl-kos">(</span><span class="pl-s">'role=combobox[name="ABC"]'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">click</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">References:<br>
<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1104829973" data-permission-text="Title is private" data-url="https://github.com/dequelabs/axe-core/issues/3353" data-hovercard-type="issue" data-hovercard-url="/dequelabs/axe-core/issues/3353/hovercard" href="https://github.com/dequelabs/axe-core/issues/3353">dequelabs/axe-core#3353</a><br>
<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1104826539" data-permission-text="Title is private" data-url="https://github.com/w3c/html-aria/issues/396" data-hovercard-type="pull_request" data-hovercard-url="/w3c/html-aria/pull/396/hovercard" href="https://github.com/w3c/html-aria/pull/396">w3c/html-aria#396</a></p>