From 5747dcc298887be7aa8113b691f311eff87052e6 Mon Sep 17 00:00:00 2001
From: DavertMik <davert@testomat.io>
Date: Tue, 8 Sep 2026 21:06:35 +0300
Subject: [PATCH 1/3] feat: checkOption finds checkables by ARIA role
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`checkOption('Accept terms')` failed on every headless component library.
Radix renders a checkbox as `<button role="checkbox" aria-checked>`, Base UI
as `<span role="checkbox">`; neither is an `<input>`, and all three strategies
in `Locator.checkable` hard-code `.//input[@type='checkbox' or @type='radio']`.

Playwright's `findCheckable` now runs a `getByRole('checkbox'|'radio'|'switch',
{ name })` pass — exact across the three roles first, then substring — mirroring
what `findClickable` already does for `button`/`link`. Native inputs expose
those roles too, so the pass is a superset of the XPath strategies it precedes.
`seeCheckboxIsChecked` / `dontSeeCheckboxIsChecked` route through the same
lookup and are fixed by it.

WebDriver and Puppeteer already had an ARIA fallback but ran it *after* the
label XPath, which is too late. Base UI renders a hidden mirror `<input>`, moves
the author's id onto it and points `<label for>` at it, so the label XPath
succeeds and resolves a 1x1 `aria-hidden` input at x:-1,y:-1 — the click is then
intercepted or reported outside the viewport. `aria-hidden` keeps that input out
of the accessibility tree, so the ARIA lookup lands on the visible control
instead. Both fallbacks now run before the label XPath.

Adds Radix and Base UI fixtures under /form/checkable and a shared spec block
asserting `aria-checked` flips on the visible element. Radix checkables stay
skipped on WebDriver: webdriverio's `aria/` selector resolves `<label for>` to
input/textarea only, and a Radix `<button role=checkbox>` has no accessible name
of its own.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TcwzSXPnfaig8nBZD2Vxfi
---
 lib/helper/Playwright.js                     | 12 +++
 lib/helper/Puppeteer.js                      | 19 ++---
 lib/helper/WebDriver.js                      |  8 +-
 test/data/app/view/form/checkable/baseui.php | 58 +++++++++++++++
 test/data/app/view/form/checkable/radix.php  | 55 ++++++++++++++
 test/helper/webapi.js                        | 77 ++++++++++++++++++--
 6 files changed, 211 insertions(+), 18 deletions(-)
 create mode 100644 test/data/app/view/form/checkable/baseui.php
 create mode 100644 test/data/app/view/form/checkable/radix.php

diff --git a/lib/helper/Playwright.js b/lib/helper/Playwright.js
index 939988c9a..674b708c0 100644
--- a/lib/helper/Playwright.js
+++ b/lib/helper/Playwright.js
@@ -50,6 +50,7 @@ let defaultSelectorEnginesInitialized = false
 const popupStore = new Popup()
 const consoleLogStore = new Console()
 const availableBrowsers = ['chromium', 'webkit', 'firefox', 'electron']
+const checkableRoles = ['checkbox', 'radio', 'switch']
 
 import { setRestartStrategy, restartsSession, restartsContext, restartsBrowser } from './extras/PlaywrightRestartOpts.js'
 import { createValueEngine, createDisabledEngine } from './extras/PlaywrightPropEngine.js'
@@ -4385,6 +4386,17 @@ async function findCheckable(locator, context) {
     return findElements.call(this, contextEl, matchedLocator)
   }
 
+  for (const exact of [true, false]) {
+    for (const role of checkableRoles) {
+      try {
+        const roleEls = await contextEl.getByRole(role, { name: matchedLocator.value, exact }).all()
+        if (roleEls.length) return roleEls
+      } catch (err) {
+        // getByRole not supported or failed
+      }
+    }
+  }
+
   const literal = xpathLocator.literal(matchedLocator.value)
   let els = await findElements.call(this, contextEl, Locator.checkable.byText(literal))
   if (els.length) {
diff --git a/lib/helper/Puppeteer.js b/lib/helper/Puppeteer.js
index ff00f6dd8..c278c244a 100644
--- a/lib/helper/Puppeteer.js
+++ b/lib/helper/Puppeteer.js
@@ -3192,8 +3192,17 @@ async function findCheckable(locator, context) {
     return findElements.call(this, contextEl, matchedLocator)
   }
 
+  // Try ARIA selector for accessible name
+  let els
+  try {
+    els = await contextEl.$$(`::-p-aria(${matchedLocator.value})`)
+    if (els.length) return els
+  } catch (err) {
+    // ARIA selector not supported or failed
+  }
+
   const literal = xpathLocator.literal(matchedLocator.value)
-  let els = await findElements.call(this, contextEl, Locator.checkable.byText(literal))
+  els = await findElements.call(this, contextEl, Locator.checkable.byText(literal))
   if (els.length) {
     return els
   }
@@ -3202,14 +3211,6 @@ async function findCheckable(locator, context) {
     return els
   }
 
-  // Try ARIA selector for accessible name
-  try {
-    els = await contextEl.$$(`::-p-aria(${matchedLocator.value})`)
-    if (els.length) return els
-  } catch (err) {
-    // ARIA selector not supported or failed
-  }
-
   return findElements.call(this, contextEl, matchedLocator.value)
 }
 
diff --git a/lib/helper/WebDriver.js b/lib/helper/WebDriver.js
index 62c0b4dc2..69df1f81c 100644
--- a/lib/helper/WebDriver.js
+++ b/lib/helper/WebDriver.js
@@ -3245,10 +3245,6 @@ async function findCheckable(locator, locateFn) {
   if (locator.isRole()) return locateFn(locator, true)
   if (!locator.isFuzzy()) return locateFn(locator, true)
 
-  const literal = xpathLocator.literal(locator.value)
-  els = await locateFn(Locator.checkable.byText(literal))
-  if (els.length) return els
-
   // Try ARIA selector for accessible name
   try {
     els = await locateFn(`aria/${locator.value}`)
@@ -3257,6 +3253,10 @@ async function findCheckable(locator, locateFn) {
     // ARIA selector not supported or failed
   }
 
+  const literal = xpathLocator.literal(locator.value)
+  els = await locateFn(Locator.checkable.byText(literal))
+  if (els.length) return els
+
   els = await locateFn(Locator.checkable.byName(literal))
   if (els.length) return els
 
diff --git a/test/data/app/view/form/checkable/baseui.php b/test/data/app/view/form/checkable/baseui.php
new file mode 100644
index 000000000..c06ad5258
--- /dev/null
+++ b/test/data/app/view/form/checkable/baseui.php
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Base UI Checkables</title>
+    <style>
+        body { font-family: Arial, sans-serif; }
+        .row { margin: 12px 0; display: flex; align-items: center; gap: 8px; }
+        label { font-weight: bold; }
+        span[role="checkbox"], span[role="radio"] { display: inline-block; width: 20px; height: 20px; border: 1px solid #666; background: #fff; border-radius: 3px; }
+        span[role="checkbox"][data-checked], span[role="radio"][data-checked] { background: #2a6; }
+        span[role="switch"] { display: inline-block; width: 42px; height: 22px; border: 1px solid #666; background: #ddd; border-radius: 11px; }
+        span[role="switch"][data-checked] { background: #2a6; }
+    </style>
+    <script type="importmap">
+    {"imports": {
+      "react": "https://esm.sh/react@19.2.0",
+      "react/jsx-runtime": "https://esm.sh/react@19.2.0/jsx-runtime",
+      "react-dom": "https://esm.sh/react-dom@19.2.0",
+      "react-dom/client": "https://esm.sh/react-dom@19.2.0/client"
+    }}
+    </script>
+</head>
+<body>
+    <h1>Base UI Checkables</h1>
+    <div id="root"></div>
+    <script type="module">
+        import * as React from 'react'
+        import { createRoot } from 'react-dom/client'
+        import { Checkbox } from 'https://esm.sh/@base-ui/react@1.8.0/checkbox?external=react,react-dom'
+        import { Switch } from 'https://esm.sh/@base-ui/react@1.8.0/switch?external=react,react-dom'
+        import { Radio } from 'https://esm.sh/@base-ui/react@1.8.0/radio?external=react,react-dom'
+        import { RadioGroup } from 'https://esm.sh/@base-ui/react@1.8.0/radio-group?external=react,react-dom'
+
+        const h = React.createElement
+
+        function App() {
+            React.useEffect(() => { window.__ready = true }, [])
+            return h('div', null,
+                h('div', { className: 'row' },
+                    h(Checkbox.Root, { id: 'terms', className: 'ctl-terms' }, h(Checkbox.Indicator, null)),
+                    h('label', { htmlFor: 'terms' }, 'Accept terms')),
+                h('div', { className: 'row' },
+                    h(Switch.Root, { id: 'airplane', className: 'ctl-airplane' }, h(Switch.Thumb, null)),
+                    h('label', { htmlFor: 'airplane' }, 'Airplane mode')),
+                h(RadioGroup, { defaultValue: 'default', 'aria-label': 'Density' },
+                    h('div', { className: 'row' },
+                        h(Radio.Root, { value: 'default', id: 'r-default', className: 'ctl-default' }, h(Radio.Indicator, null)),
+                        h('label', { htmlFor: 'r-default' }, 'Default')),
+                    h('div', { className: 'row' },
+                        h(Radio.Root, { value: 'comfortable', id: 'r-comfortable', className: 'ctl-comfortable' }, h(Radio.Indicator, null)),
+                        h('label', { htmlFor: 'r-comfortable' }, 'Comfortable'))))
+        }
+
+        createRoot(document.getElementById('root')).render(h(App))
+    </script>
+</body>
+</html>
diff --git a/test/data/app/view/form/checkable/radix.php b/test/data/app/view/form/checkable/radix.php
new file mode 100644
index 000000000..357948e12
--- /dev/null
+++ b/test/data/app/view/form/checkable/radix.php
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Radix Checkables</title>
+    <style>
+        body { font-family: Arial, sans-serif; }
+        .row { margin: 12px 0; display: flex; align-items: center; gap: 8px; }
+        label { font-weight: bold; }
+        button[role="checkbox"], button[role="radio"] { width: 20px; height: 20px; border: 1px solid #666; background: #fff; border-radius: 3px; }
+        button[role="checkbox"][data-state="checked"], button[role="radio"][data-state="checked"] { background: #2a6; }
+        button[role="switch"] { width: 42px; height: 22px; border: 1px solid #666; background: #ddd; border-radius: 11px; }
+        button[role="switch"][data-state="checked"] { background: #2a6; }
+    </style>
+    <script type="importmap">
+    {"imports": {
+      "react": "https://esm.sh/react@19.2.0",
+      "react/jsx-runtime": "https://esm.sh/react@19.2.0/jsx-runtime",
+      "react-dom": "https://esm.sh/react-dom@19.2.0",
+      "react-dom/client": "https://esm.sh/react-dom@19.2.0/client"
+    }}
+    </script>
+</head>
+<body>
+    <h1>Radix Checkables</h1>
+    <div id="root"></div>
+    <script type="module">
+        import * as React from 'react'
+        import { createRoot } from 'react-dom/client'
+        import { Checkbox, Switch, RadioGroup } from 'https://esm.sh/radix-ui@1.6.7?external=react,react-dom'
+
+        const h = React.createElement
+
+        function App() {
+            React.useEffect(() => { window.__ready = true }, [])
+            return h('div', null,
+                h('div', { className: 'row' },
+                    h(Checkbox.Root, { id: 'terms', className: 'ctl-terms' }, h(Checkbox.Indicator, null)),
+                    h('label', { htmlFor: 'terms' }, 'Accept terms')),
+                h('div', { className: 'row' },
+                    h(Switch.Root, { id: 'airplane', className: 'ctl-airplane' }, h(Switch.Thumb, null)),
+                    h('label', { htmlFor: 'airplane' }, 'Airplane mode')),
+                h(RadioGroup.Root, { defaultValue: 'default', 'aria-label': 'Density' },
+                    h('div', { className: 'row' },
+                        h(RadioGroup.Item, { value: 'default', id: 'r-default', className: 'ctl-default' }, h(RadioGroup.Indicator, null)),
+                        h('label', { htmlFor: 'r-default' }, 'Default')),
+                    h('div', { className: 'row' },
+                        h(RadioGroup.Item, { value: 'comfortable', id: 'r-comfortable', className: 'ctl-comfortable' }, h(RadioGroup.Indicator, null)),
+                        h('label', { htmlFor: 'r-comfortable' }, 'Comfortable'))))
+        }
+
+        createRoot(document.getElementById('root')).render(h(App))
+    </script>
+</body>
+</html>
diff --git a/test/helper/webapi.js b/test/helper/webapi.js
index 40b51c3c3..e29b3394f 100644
--- a/test/helper/webapi.js
+++ b/test/helper/webapi.js
@@ -514,6 +514,77 @@ export function tests() {
     })
   })
 
+  describe('#checkOption - ARIA roles', function () {
+    this.timeout(60000)
+
+    async function open(page) {
+      await I.amOnPage(`/form/checkable/${page}`)
+      await I.waitForFunction(() => window.__ready === true, [], 30)
+    }
+
+    async function ariaChecked(css) {
+      return I.grabAttributeFrom(css, 'aria-checked')
+    }
+
+    for (const page of ['radix', 'baseui']) {
+      describe(page, () => {
+        beforeEach(function () {
+          // webdriverio resolves `<label for>` to input/textarea only, and a Radix
+          // `<button role=checkbox>` carries no accessible name of its own
+          if (page === 'radix' && isHelper('WebDriver')) this.skip()
+        })
+
+        it('checks and unchecks a checkbox by its label', async () => {
+          await open(page)
+          await I.dontSeeCheckboxIsChecked('Accept terms')
+
+          await I.checkOption('Accept terms')
+          expect(await ariaChecked('.ctl-terms')).to.equal('true')
+          await I.seeCheckboxIsChecked('Accept terms')
+
+          await I.uncheckOption('Accept terms')
+          expect(await ariaChecked('.ctl-terms')).to.equal('false')
+          await I.dontSeeCheckboxIsChecked('Accept terms')
+        })
+
+        it('checks a switch by its label', async () => {
+          await open(page)
+          await I.checkOption('Airplane mode')
+          expect(await ariaChecked('.ctl-airplane')).to.equal('true')
+          await I.seeCheckboxIsChecked('Airplane mode')
+        })
+
+        it('checks a radio by its label', async () => {
+          await open(page)
+          await I.dontSeeCheckboxIsChecked('Comfortable')
+
+          await I.checkOption('Comfortable')
+          expect(await ariaChecked('.ctl-comfortable')).to.equal('true')
+          expect(await ariaChecked('.ctl-default')).to.equal('false')
+          await I.seeCheckboxIsChecked('Comfortable')
+        })
+      })
+    }
+
+    it('resolves the visible control and not the hidden input the label points at', async () => {
+      await open('baseui')
+      // the author id sits on a 1x1 aria-hidden mirror input at x:-1,y:-1 which <label for> targets;
+      // [role=checkbox] can only be the visible span
+      expect(await I.grabAttributeFrom('#terms', 'aria-hidden')).to.equal('true')
+
+      await I.checkOption('Accept terms')
+      expect(await ariaChecked('[role=checkbox]')).to.equal('true')
+    })
+
+    it('still checks a plain input by its label', async () => {
+      await I.amOnPage('/form/checkbox')
+      await I.checkOption('I Agree')
+      await I.seeCheckboxIsChecked('I Agree')
+      await I.click('Submit')
+      assert.equal(formContents('terms'), 'agree')
+    })
+  })
+
   describe('#selectOption', () => {
     it('should select option by css', async () => {
       await I.amOnPage('/form/select')
@@ -2341,8 +2412,6 @@ export function tests() {
     })
 
     it('should check options by aria-label', async () => {
-      if (!isHelper('WebDriver')) return
-
       await I.amOnPage('/form/role_elements')
 
       await I.dontSeeCheckboxIsChecked('I agree to the terms and conditions')
@@ -2363,9 +2432,7 @@ export function tests() {
       await I.fillField('your@email.com', 'bob@company.com')
       await I.fillField('Enter your message', 'Test message')
 
-      if (isHelper('WebDriver')) {
-        await I.checkOption('Subscribe to newsletter')
-      }
+      await I.checkOption('Subscribe to newsletter')
 
       await I.click('Submit')
       await I.see('Form Submitted!')

From c4e7fed75c51f8e26b952953dcc2c1b8e400b9f0 Mon Sep 17 00:00:00 2001
From: DavertMik <davert@testomat.io>
Date: Tue, 8 Sep 2026 21:53:41 +0300
Subject: [PATCH 2/3] fix: role-restrict the hoisted ARIA checkable lookup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Moving the accessible-name lookup above the label XPath fixed Base UI but
widened the net: `aria/…` and `::-p-aria(…)` match on name alone, so a heading
sharing a checkbox label's text now won on document order where `byText`
previously reached the input. Measured on the new collision fixture, both
returned `[H2, INPUT#terms-box]`.

Puppeteer loops the three checkable roles as `::-p-aria([name][role])`,
following the buildRoleSelector convention already in the file. `::-p-aria`
matches names exactly and case-sensitively, so one pass per role is enough;
a name that cannot be parsed falls through to the XPath as before.

WebDriver has no attribute filter on `aria/`, so its results are post-filtered
to `input[type=checkbox|radio]` and `[role=checkbox|radio|switch]` in a single
`browser.execute` round trip regardless of match count, using the
`execute(fn, ...elements)` form already used in the file.

Both now resolve `[INPUT#terms-box]`, matching Playwright's role-scoped pass.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TcwzSXPnfaig8nBZD2Vxfi
---
 lib/helper/Puppeteer.js                         | 13 ++++++++-----
 lib/helper/WebDriver.js                         | 17 ++++++++++++++++-
 test/data/app/view/form/checkable/collision.php | 15 +++++++++++++++
 test/helper/webapi.js                           |  8 ++++++++
 4 files changed, 47 insertions(+), 6 deletions(-)
 create mode 100644 test/data/app/view/form/checkable/collision.php

diff --git a/lib/helper/Puppeteer.js b/lib/helper/Puppeteer.js
index c278c244a..4d9c709ba 100644
--- a/lib/helper/Puppeteer.js
+++ b/lib/helper/Puppeteer.js
@@ -64,6 +64,7 @@ function wrapError(e) {
 let perfTiming
 const popupStore = new Popup()
 const consoleLogStore = new Console()
+const checkableRoles = ['checkbox', 'radio', 'switch']
 
 /**
  * ## Configuration
@@ -3194,11 +3195,13 @@ async function findCheckable(locator, context) {
 
   // Try ARIA selector for accessible name
   let els
-  try {
-    els = await contextEl.$$(`::-p-aria(${matchedLocator.value})`)
-    if (els.length) return els
-  } catch (err) {
-    // ARIA selector not supported or failed
+  for (const role of checkableRoles) {
+    try {
+      els = await contextEl.$$(`::-p-aria([name="${matchedLocator.value}"][role="${role}"])`)
+      if (els.length) return els
+    } catch (err) {
+      // ARIA selector not supported or failed
+    }
   }
 
   const literal = xpathLocator.literal(matchedLocator.value)
diff --git a/lib/helper/WebDriver.js b/lib/helper/WebDriver.js
index 69df1f81c..32f6a0d8d 100644
--- a/lib/helper/WebDriver.js
+++ b/lib/helper/WebDriver.js
@@ -3247,7 +3247,7 @@ async function findCheckable(locator, locateFn) {
 
   // Try ARIA selector for accessible name
   try {
-    els = await locateFn(`aria/${locator.value}`)
+    els = await keepCheckable.call(this, await locateFn(`aria/${locator.value}`))
     if (els.length) return els
   } catch (e) {
     // ARIA selector not supported or failed
@@ -3263,6 +3263,21 @@ async function findCheckable(locator, locateFn) {
   return await locateFn(locator.value) // by css or xpath
 }
 
+async function keepCheckable(els) {
+  if (!els || !els.length) return []
+
+  const checkable = await this.browser.execute(function () {
+    return Array.prototype.slice.call(arguments).map(function (el) {
+      if (!el) return false
+      const role = el.getAttribute('role')
+      if (role) return ['checkbox', 'radio', 'switch'].indexOf(role) > -1
+      return el.tagName === 'INPUT' && (el.type === 'checkbox' || el.type === 'radio')
+    })
+  }, ...els)
+
+  return els.filter((el, index) => checkable[index])
+}
+
 function withStrictLocator(locator) {
   locator = new Locator(locator)
   return locator.simplify()
diff --git a/test/data/app/view/form/checkable/collision.php b/test/data/app/view/form/checkable/collision.php
new file mode 100644
index 000000000..eaeffbb45
--- /dev/null
+++ b/test/data/app/view/form/checkable/collision.php
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Checkable name collision</title>
+</head>
+<body>
+    <h2>Accept terms</h2>
+    <form action="/form/complex" method="POST">
+        <label for="terms-box">Accept terms</label>
+        <input type="checkbox" id="terms-box" name="terms" value="agree" />
+        <input type="submit" value="Submit" />
+    </form>
+</body>
+</html>
diff --git a/test/helper/webapi.js b/test/helper/webapi.js
index e29b3394f..a0577f33e 100644
--- a/test/helper/webapi.js
+++ b/test/helper/webapi.js
@@ -583,6 +583,14 @@ export function tests() {
       await I.click('Submit')
       assert.equal(formContents('terms'), 'agree')
     })
+
+    it('ignores a non-control sharing the accessible name', async () => {
+      await I.amOnPage('/form/checkable/collision')
+      await I.dontSeeCheckboxIsChecked('#terms-box')
+
+      await I.checkOption('Accept terms')
+      await I.seeCheckboxIsChecked('#terms-box')
+    })
   })
 
   describe('#selectOption', () => {

From b3de0d4ba23ab6b2ac3af0267e7256ccaf5a3587 Mon Sep 17 00:00:00 2001
From: DavertMik <davert@testomat.io>
Date: Tue, 8 Sep 2026 22:43:34 +0300
Subject: [PATCH 3/3] feat: checkable menu items and pressed-state toggle
 buttons

`checkOption` now reaches `role=menuitemcheckbox` and `role=menuitemradio`,
and pressed-state buttons get their own pair of actions.

Menu items are added to the ARIA role pass of all three helpers. Playwright's
`check()` clicks such an item but then waits for the state on a node the menu
may already have removed (Radix closes its menu on select, Base UI does not),
so those two roles take a click-plus-verify path instead: read `aria-checked`,
click only on a mismatch so a second `checkOption` cannot toggle the item back
off, then wait for the new state and treat a vanished element as applied.
Puppeteer and WebDriver already read `aria-checked` and already click only on
a mismatch, so only their role lists changed; WebDriver's
`seeCheckboxIsChecked` went through `findFields`, which no menu item can
satisfy, and now falls back to `findCheckable`.

`aria-pressed` is a different semantic from checked-ness, so Toggle and Toggle
Group (multiple) get `toggleButton`, `seeButtonIsPressed` and
`dontSeeButtonIsPressed` rather than an overloaded `checkOption`.
`seeCheckboxIsChecked` on such a button now names the right action instead of
surfacing Playwright's "Not a checkbox or radio button".

`grabCheckedElementStatus` reads `aria-checked` and `aria-pressed` instead of
requiring `type=checkbox|radio`, and names what it found when it still cannot
answer.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TcwzSXPnfaig8nBZD2Vxfi
---
 docs/webapi/dontSeeButtonIsPressed.mustache |   9 ++
 docs/webapi/seeButtonIsPressed.mustache     |   9 ++
 docs/webapi/toggleButton.mustache           |  13 +++
 lib/helper/Playwright.js                    | 112 ++++++++++++++++++-
 lib/helper/Puppeteer.js                     |  67 ++++++++++-
 lib/helper/WebDriver.js                     |  72 +++++++++++-
 test/data/app/view/form/menu/baseui.php     |  52 +++++++++
 test/data/app/view/form/menu/radix.php      |  51 +++++++++
 test/data/app/view/form/toggle/baseui.php   |  45 ++++++++
 test/data/app/view/form/toggle/radix.php    |  44 ++++++++
 test/helper/Playwright_test.js              |  34 +++++-
 test/helper/webapi.js                       | 117 ++++++++++++++++++++
 12 files changed, 615 insertions(+), 10 deletions(-)
 create mode 100644 docs/webapi/dontSeeButtonIsPressed.mustache
 create mode 100644 docs/webapi/seeButtonIsPressed.mustache
 create mode 100644 docs/webapi/toggleButton.mustache
 create mode 100644 test/data/app/view/form/menu/baseui.php
 create mode 100644 test/data/app/view/form/menu/radix.php
 create mode 100644 test/data/app/view/form/toggle/baseui.php
 create mode 100644 test/data/app/view/form/toggle/radix.php

diff --git a/docs/webapi/dontSeeButtonIsPressed.mustache b/docs/webapi/dontSeeButtonIsPressed.mustache
new file mode 100644
index 000000000..0a19d0823
--- /dev/null
+++ b/docs/webapi/dontSeeButtonIsPressed.mustache
@@ -0,0 +1,9 @@
+Verifies that a toggle button is not pressed, by reading its `aria-pressed` attribute.
+
+```js
+I.dontSeeButtonIsPressed('Bold');
+I.dontSeeButtonIsPressed('#bold');
+```
+
+@param {CodeceptJS.LocatorOrString} locator button located by text|CSS|XPath|strict locator.
+@returns {void} automatically synchronized promise through #recorder
diff --git a/docs/webapi/seeButtonIsPressed.mustache b/docs/webapi/seeButtonIsPressed.mustache
new file mode 100644
index 000000000..1f4b358e9
--- /dev/null
+++ b/docs/webapi/seeButtonIsPressed.mustache
@@ -0,0 +1,9 @@
+Verifies that a toggle button is pressed, by reading its `aria-pressed` attribute.
+
+```js
+I.seeButtonIsPressed('Bold');
+I.seeButtonIsPressed('#bold');
+```
+
+@param {CodeceptJS.LocatorOrString} locator button located by text|CSS|XPath|strict locator.
+@returns {void} automatically synchronized promise through #recorder
diff --git a/docs/webapi/toggleButton.mustache b/docs/webapi/toggleButton.mustache
new file mode 100644
index 000000000..efced45ba
--- /dev/null
+++ b/docs/webapi/toggleButton.mustache
@@ -0,0 +1,13 @@
+Toggles a button that reports its state with `aria-pressed`, like a Toggle or a Toggle Group item.
+
+Such a button is not a checkbox, so `checkOption` does not apply to it: this action flips it and
+waits until `aria-pressed` has changed.
+
+```js
+I.toggleButton('Bold');
+I.toggleButton('#bold');
+I.toggleButton({ css: '[aria-label=Bold]' });
+```
+
+@param {CodeceptJS.LocatorOrString} locator button located by text|CSS|XPath|strict locator.
+@returns {void} automatically synchronized promise through #recorder
diff --git a/lib/helper/Playwright.js b/lib/helper/Playwright.js
index 674b708c0..2bc0291e5 100644
--- a/lib/helper/Playwright.js
+++ b/lib/helper/Playwright.js
@@ -50,7 +50,8 @@ let defaultSelectorEnginesInitialized = false
 const popupStore = new Popup()
 const consoleLogStore = new Console()
 const availableBrowsers = ['chromium', 'webkit', 'firefox', 'electron']
-const checkableRoles = ['checkbox', 'radio', 'switch']
+const ariaCheckableRoles = ['menuitemcheckbox', 'menuitemradio']
+const checkableRoles = ['checkbox', 'radio', 'switch', ...ariaCheckableRoles]
 
 import { setRestartStrategy, restartsSession, restartsContext, restartsBrowser } from './extras/PlaywrightRestartOpts.js'
 import { createValueEngine, createDisabledEngine } from './extras/PlaywrightPropEngine.js'
@@ -1564,7 +1565,14 @@ class Playwright extends Helper {
     if (supportedTypes.includes(type)) {
       return el.isChecked(options)
     }
-    throw new Error(`Element is not a ${supportedTypes.join(' or ')} input`)
+
+    for (const attribute of ['aria-checked', 'aria-pressed']) {
+      const state = await el.getAttribute(attribute)
+      if (state !== null) return state === 'true'
+    }
+
+    const role = await el.getAttribute('role')
+    throw new Error(`Element is not a ${supportedTypes.join(' or ')} input and has no aria-checked or aria-pressed state (role: ${role || 'none'})`)
   }
   /**
    * Return the disabled status of given element.
@@ -2163,7 +2171,7 @@ class Playwright extends Helper {
    */
   async checkOption(field, context = null, options = { force: true }) {
     const elm = await this._locateCheckable(field, context)
-    await elm.check(options)
+    await setCheckableState.call(this, elm, true, field, options)
     return this._waitForAction()
   }
 
@@ -2183,7 +2191,7 @@ class Playwright extends Helper {
    */
   async uncheckOption(field, context = null, options = { force: true }) {
     const elm = await this._locateCheckable(field, context)
-    await elm.uncheck(options)
+    await setCheckableState.call(this, elm, false, field, options)
     return this._waitForAction()
   }
 
@@ -2201,6 +2209,39 @@ class Playwright extends Helper {
     return proceedIsChecked.call(this, 'negate', field)
   }
 
+  /**
+   * {{> toggleButton }}
+   */
+  async toggleButton(locator, options = {}) {
+    const els = await this._locateClickable(locator)
+    assertElementExists(els, locator, 'Toggle button')
+    const el = selectElement(els, locator, this)
+    const pressed = await el.getAttribute('aria-pressed')
+    if (pressed === null) {
+      throw new Error(`Element ${new Locator(locator)} is not a toggle button, it has no aria-pressed attribute`)
+    }
+
+    await highlightActiveElement.call(this, el)
+    await el.click(options)
+    await waitForAriaState(el, 'aria-pressed', pressed !== 'true', locator)
+
+    return this._waitForAction()
+  }
+
+  /**
+   * {{> seeButtonIsPressed }}
+   */
+  async seeButtonIsPressed(locator) {
+    return proceedIsPressed.call(this, 'assert', locator)
+  }
+
+  /**
+   * {{> dontSeeButtonIsPressed }}
+   */
+  async dontSeeButtonIsPressed(locator) {
+    return proceedIsPressed.call(this, 'negate', locator)
+  }
+
   /**
    * {{> pressKeyDown }}
    */
@@ -4412,11 +4453,72 @@ async function findCheckable(locator, context) {
 async function proceedIsChecked(assertType, option) {
   let els = await findCheckable.call(this, option)
   assertElementExists(els, option, 'Checkable')
-  els = await Promise.all(els.map(el => el.isChecked()))
+  els = await Promise.all(els.map(el => isElementChecked(el, option)))
   const selected = els.reduce((prev, cur) => prev || cur)
   return truth(`checkable ${option}`, 'to be checked')[assertType](selected)
 }
 
+async function isElementChecked(el, locator) {
+  try {
+    return await el.isChecked()
+  } catch (err) {
+    const checked = await el.getAttribute('aria-checked')
+    if (checked !== null) return checked === 'true'
+
+    const pressed = await el.getAttribute('aria-pressed')
+    if (pressed !== null) {
+      throw new Error(`Element ${new Locator(locator)} is a toggle button with aria-pressed="${pressed}", use seeButtonIsPressed to assert its state`)
+    }
+    throw err
+  }
+}
+
+async function setCheckableState(el, expected, locator, options = {}) {
+  const role = await el.getAttribute('role')
+  if (!ariaCheckableRoles.includes(role)) {
+    return expected ? el.check(options) : el.uncheck(options)
+  }
+
+  const current = await el.getAttribute('aria-checked')
+  if (current === null) {
+    throw new Error(`Element ${new Locator(locator)} with role "${role}" has no aria-checked state`)
+  }
+  if ((current === 'true') === expected) return
+
+  await el.click(options)
+  await waitForAriaState(el, 'aria-checked', expected, locator)
+}
+
+async function waitForAriaState(el, attribute, expected, locator) {
+  const deadline = Date.now() + 2000
+
+  while (Date.now() < deadline) {
+    if (!(await el.isVisible().catch(() => false))) return
+
+    const state = await el.getAttribute(attribute, { timeout: 1000 }).catch(() => null)
+    if (state === null) return
+    if ((state === 'true') === expected) return
+
+    await new Promise(resolve => setTimeout(resolve, 50))
+  }
+
+  throw new Error(`Element ${new Locator(locator)} was clicked but its ${attribute} did not become "${expected}"`)
+}
+
+async function proceedIsPressed(assertType, locator) {
+  const matcher = await this._getContext()
+  const els = await findClickable.call(this, matcher, locator)
+  assertElementExists(els, locator, 'Toggle button')
+
+  const states = await Promise.all(els.map(el => el.getAttribute('aria-pressed')))
+  if (states.every(state => state === null)) {
+    throw new Error(`Element ${new Locator(locator)} is not a toggle button, it has no aria-pressed attribute`)
+  }
+
+  const pressed = states.some(state => state === 'true')
+  return truth(`toggle button ${locator}`, 'to be pressed')[assertType](pressed)
+}
+
 async function findFields(locator, context = null) {
   let contextEl
   if (context) {
diff --git a/lib/helper/Puppeteer.js b/lib/helper/Puppeteer.js
index 4d9c709ba..ee713eee1 100644
--- a/lib/helper/Puppeteer.js
+++ b/lib/helper/Puppeteer.js
@@ -64,7 +64,7 @@ function wrapError(e) {
 let perfTiming
 const popupStore = new Popup()
 const consoleLogStore = new Console()
-const checkableRoles = ['checkbox', 'radio', 'switch']
+const checkableRoles = ['checkbox', 'radio', 'switch', 'menuitemcheckbox', 'menuitemradio']
 
 /**
  * ## Configuration
@@ -1516,6 +1516,40 @@ class Puppeteer extends Helper {
     return proceedIsChecked.call(this, 'negate', field)
   }
 
+  /**
+   * {{> toggleButton }}
+   */
+  async toggleButton(locator) {
+    const els = await this._locateClickable(locator)
+    assertElementExists(els, locator, 'Toggle button')
+    const el = selectElement(els, locator, this)
+    const pressed = await grabAriaState(el, 'aria-pressed')
+    if (pressed === null) {
+      throw new Error(`Element ${new Locator(locator)} is not a toggle button, it has no aria-pressed attribute`)
+    }
+
+    highlightActiveElement.call(this, el, await this._getContext())
+
+    await el.click()
+    await waitForAriaState(el, 'aria-pressed', pressed !== 'true', locator)
+
+    return this._waitForAction()
+  }
+
+  /**
+   * {{> seeButtonIsPressed }}
+   */
+  async seeButtonIsPressed(locator) {
+    return proceedIsPressed.call(this, 'assert', locator)
+  }
+
+  /**
+   * {{> dontSeeButtonIsPressed }}
+   */
+  async dontSeeButtonIsPressed(locator) {
+    return proceedIsPressed.call(this, 'negate', locator)
+  }
+
   /**
    * {{> pressKeyDown }}
    */
@@ -3241,6 +3275,37 @@ async function proceedIsChecked(assertType, option) {
   return truth(`checkable ${option}`, 'to be checked')[assertType](selected)
 }
 
+async function grabAriaState(el, attribute) {
+  return el.evaluate((node, name) => node.getAttribute(name), attribute).catch(() => null)
+}
+
+async function waitForAriaState(el, attribute, expected, locator) {
+  const deadline = Date.now() + 2000
+
+  while (Date.now() < deadline) {
+    const state = await grabAriaState(el, attribute)
+    if (state === null) return
+    if ((state === 'true') === expected) return
+
+    await new Promise(resolve => setTimeout(resolve, 50))
+  }
+
+  throw new Error(`Element ${new Locator(locator)} was clicked but its ${attribute} did not become "${expected}"`)
+}
+
+async function proceedIsPressed(assertType, locator) {
+  const els = await this._locateClickable(locator)
+  assertElementExists(els, locator, 'Toggle button')
+
+  const states = await Promise.all(els.map(el => grabAriaState(el, 'aria-pressed')))
+  if (states.every(state => state === null)) {
+    throw new Error(`Element ${new Locator(locator)} is not a toggle button, it has no aria-pressed attribute`)
+  }
+
+  const pressed = states.some(state => state === 'true')
+  return truth(`toggle button ${locator}`, 'to be pressed')[assertType](pressed)
+}
+
 async function findVisibleFields(locator, context = null) {
   const els = await findFields.call(this, locator, context)
   const visible = await Promise.all(els.map(el => el.boundingBox()))
diff --git a/lib/helper/WebDriver.js b/lib/helper/WebDriver.js
index 32f6a0d8d..722d9a573 100644
--- a/lib/helper/WebDriver.js
+++ b/lib/helper/WebDriver.js
@@ -1635,6 +1635,41 @@ class WebDriver extends Helper {
     return proceedSeeCheckbox.call(this, 'negate', field)
   }
 
+  /**
+   * {{> toggleButton }}
+   */
+  async toggleButton(locator) {
+    const clickMethod = this.browser.isMobile && this.browser.capabilities.platformName !== 'android' ? 'touchClick' : 'elementClick'
+    const locateFn = prepareLocateFn.call(this)
+
+    const res = await findClickable.call(this, locator, locateFn)
+    assertElementExists(res, locator, 'Toggle button')
+    const elem = selectElement(res, locator, this)
+    const elementId = getElementId(elem)
+    const pressed = await this.browser.getElementAttribute(elementId, 'aria-pressed')
+    if (pressed === null) {
+      throw new Error(`Element ${new Locator(locator)} is not a toggle button, it has no aria-pressed attribute`)
+    }
+    highlightActiveElement.call(this, elem)
+
+    await this.browser[clickMethod](elementId)
+    return waitForAriaState.call(this, elementId, 'aria-pressed', pressed !== 'true', locator)
+  }
+
+  /**
+   * {{> seeButtonIsPressed }}
+   */
+  async seeButtonIsPressed(locator) {
+    return proceedIsPressed.call(this, 'assert', locator)
+  }
+
+  /**
+   * {{> dontSeeButtonIsPressed }}
+   */
+  async dontSeeButtonIsPressed(locator) {
+    return proceedIsPressed.call(this, 'negate', locator)
+  }
+
   /**
    * {{> seeElement }}
    *
@@ -3189,7 +3224,10 @@ function toArray(item) {
 }
 
 async function proceedSeeCheckbox(assertType, field) {
-  const res = await findFields.call(this, field)
+  let res = await findFields.call(this, field)
+  if (!res.length) {
+    res = await findCheckable.call(this, field, prepareLocateFn.call(this))
+  }
   assertElementExists(res, field, 'Field')
 
   const selected = await forEachAsync(res, async el => {
@@ -3224,6 +3262,36 @@ async function getElementTextAttributes(element) {
   return [ariaLabel, placeholder, innerText, labelText]
 }
 
+async function waitForAriaState(elementId, attribute, expected, locator) {
+  const deadline = Date.now() + 2000
+
+  while (Date.now() < deadline) {
+    const state = await this.browser.getElementAttribute(elementId, attribute).catch(() => null)
+    if (state === null) return
+    if ((state === 'true') === expected) return
+
+    await new Promise(resolve => setTimeout(resolve, 50))
+  }
+
+  throw new Error(`Element ${new Locator(locator)} was clicked but its ${attribute} did not become "${expected}"`)
+}
+
+async function proceedIsPressed(assertType, locator) {
+  const res = await findClickable.call(this, locator, prepareLocateFn.call(this))
+  assertElementExists(res, locator, 'Toggle button')
+
+  const states = []
+  for (const el of res) {
+    states.push(await this.browser.getElementAttribute(getElementId(el), 'aria-pressed'))
+  }
+  if (states.every(state => state === null)) {
+    throw new Error(`Element ${new Locator(locator)} is not a toggle button, it has no aria-pressed attribute`)
+  }
+
+  const pressed = states.some(state => state === 'true')
+  return truth(`toggle button ${locator}`, 'to be pressed')[assertType](pressed)
+}
+
 async function isElementChecked(browser, elementId) {
   let isChecked = await browser.isElementSelected(elementId)
   if (!isChecked) {
@@ -3270,7 +3338,7 @@ async function keepCheckable(els) {
     return Array.prototype.slice.call(arguments).map(function (el) {
       if (!el) return false
       const role = el.getAttribute('role')
-      if (role) return ['checkbox', 'radio', 'switch'].indexOf(role) > -1
+      if (role) return ['checkbox', 'radio', 'switch', 'menuitemcheckbox', 'menuitemradio'].indexOf(role) > -1
       return el.tagName === 'INPUT' && (el.type === 'checkbox' || el.type === 'radio')
     })
   }, ...els)
diff --git a/test/data/app/view/form/menu/baseui.php b/test/data/app/view/form/menu/baseui.php
new file mode 100644
index 000000000..468b6935e
--- /dev/null
+++ b/test/data/app/view/form/menu/baseui.php
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Base UI Menu</title>
+    <style>
+        body { font-family: Arial, sans-serif; }
+        .row { margin: 12px 0; }
+        .menu-content { background: #fff; border: 1px solid #666; padding: 4px; min-width: 200px; }
+        .menu-content [role^="menuitem"] { padding: 4px 8px; cursor: pointer; }
+        .menu-content [role^="menuitem"][aria-checked="true"] { background: #2a6; color: #fff; }
+    </style>
+    <script type="importmap">
+    {"imports": {
+      "react": "https://esm.sh/react@19.2.0",
+      "react/jsx-runtime": "https://esm.sh/react@19.2.0/jsx-runtime",
+      "react-dom": "https://esm.sh/react-dom@19.2.0",
+      "react-dom/client": "https://esm.sh/react-dom@19.2.0/client"
+    }}
+    </script>
+</head>
+<body>
+    <h1>Base UI Menu</h1>
+    <div id="root"></div>
+    <script type="module">
+        import * as React from 'react'
+        import { createRoot } from 'react-dom/client'
+        import { Menu } from 'https://esm.sh/@base-ui/react@1.8.0/menu?external=react,react-dom'
+
+        const h = React.createElement
+
+        function App() {
+            const [statusBar, setStatusBar] = React.useState(false)
+            const [activity, setActivity] = React.useState(false)
+            const [person, setPerson] = React.useState('pedro')
+            React.useEffect(() => { window.__ready = true }, [])
+            return h(Menu.Root, null,
+                h(Menu.Trigger, { className: 'row' }, 'Open menu'),
+                h(Menu.Portal, null,
+                    h(Menu.Positioner, null,
+                        h(Menu.Popup, { className: 'menu-content' },
+                            h(Menu.CheckboxItem, { className: 'ctl-status-bar', checked: statusBar, onCheckedChange: setStatusBar }, 'Show status bar'),
+                            h(Menu.CheckboxItem, { className: 'ctl-activity-bar', checked: activity, onCheckedChange: setActivity }, 'Show activity bar'),
+                            h(Menu.RadioGroup, { value: person, onValueChange: setPerson },
+                                h(Menu.RadioItem, { value: 'pedro', className: 'ctl-pedro' }, 'Pedro Duarte'),
+                                h(Menu.RadioItem, { value: 'colm', className: 'ctl-colm' }, 'Colm Tuite'))))))
+        }
+
+        createRoot(document.getElementById('root')).render(h(App))
+    </script>
+</body>
+</html>
diff --git a/test/data/app/view/form/menu/radix.php b/test/data/app/view/form/menu/radix.php
new file mode 100644
index 000000000..d227cbc53
--- /dev/null
+++ b/test/data/app/view/form/menu/radix.php
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Radix Menu</title>
+    <style>
+        body { font-family: Arial, sans-serif; }
+        .row { margin: 12px 0; }
+        .menu-content { background: #fff; border: 1px solid #666; padding: 4px; min-width: 200px; }
+        .menu-content [role^="menuitem"] { padding: 4px 8px; cursor: pointer; }
+        .menu-content [role^="menuitem"][aria-checked="true"] { background: #2a6; color: #fff; }
+    </style>
+    <script type="importmap">
+    {"imports": {
+      "react": "https://esm.sh/react@19.2.0",
+      "react/jsx-runtime": "https://esm.sh/react@19.2.0/jsx-runtime",
+      "react-dom": "https://esm.sh/react-dom@19.2.0",
+      "react-dom/client": "https://esm.sh/react-dom@19.2.0/client"
+    }}
+    </script>
+</head>
+<body>
+    <h1>Radix Menu</h1>
+    <div id="root"></div>
+    <script type="module">
+        import * as React from 'react'
+        import { createRoot } from 'react-dom/client'
+        import { DropdownMenu } from 'https://esm.sh/radix-ui@1.6.7?external=react,react-dom'
+
+        const h = React.createElement
+
+        function App() {
+            const [statusBar, setStatusBar] = React.useState(false)
+            const [activity, setActivity] = React.useState(false)
+            const [person, setPerson] = React.useState('pedro')
+            React.useEffect(() => { window.__ready = true }, [])
+            return h(DropdownMenu.Root, null,
+                h(DropdownMenu.Trigger, { className: 'row' }, 'Open menu'),
+                h(DropdownMenu.Portal, null,
+                    h(DropdownMenu.Content, { className: 'menu-content' },
+                        h(DropdownMenu.CheckboxItem, { className: 'ctl-status-bar', checked: statusBar, onCheckedChange: setStatusBar }, 'Show status bar'),
+                        h(DropdownMenu.CheckboxItem, { className: 'ctl-activity-bar', checked: activity, onCheckedChange: setActivity }, 'Show activity bar'),
+                        h(DropdownMenu.RadioGroup, { value: person, onValueChange: setPerson },
+                            h(DropdownMenu.RadioItem, { value: 'pedro', className: 'ctl-pedro' }, 'Pedro Duarte'),
+                            h(DropdownMenu.RadioItem, { value: 'colm', className: 'ctl-colm' }, 'Colm Tuite')))))
+        }
+
+        createRoot(document.getElementById('root')).render(h(App))
+    </script>
+</body>
+</html>
diff --git a/test/data/app/view/form/toggle/baseui.php b/test/data/app/view/form/toggle/baseui.php
new file mode 100644
index 000000000..6c47c8256
--- /dev/null
+++ b/test/data/app/view/form/toggle/baseui.php
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Base UI Toggles</title>
+    <style>
+        body { font-family: Arial, sans-serif; }
+        .row { margin: 12px 0; display: flex; align-items: center; gap: 8px; }
+        button { min-width: 90px; height: 28px; border: 1px solid #666; background: #fff; }
+        button[aria-pressed="true"] { background: #2a6; color: #fff; }
+    </style>
+    <script type="importmap">
+    {"imports": {
+      "react": "https://esm.sh/react@19.2.0",
+      "react/jsx-runtime": "https://esm.sh/react@19.2.0/jsx-runtime",
+      "react-dom": "https://esm.sh/react-dom@19.2.0",
+      "react-dom/client": "https://esm.sh/react-dom@19.2.0/client"
+    }}
+    </script>
+</head>
+<body>
+    <h1>Base UI Toggles</h1>
+    <div id="root"></div>
+    <script type="module">
+        import * as React from 'react'
+        import { createRoot } from 'react-dom/client'
+        import { Toggle } from 'https://esm.sh/@base-ui/react@1.8.0/toggle?external=react,react-dom'
+        import { ToggleGroup } from 'https://esm.sh/@base-ui/react@1.8.0/toggle-group?external=react,react-dom'
+
+        const h = React.createElement
+
+        function App() {
+            React.useEffect(() => { window.__ready = true }, [])
+            return h('div', null,
+                h('div', { className: 'row' },
+                    h(Toggle, { className: 'ctl-bold' }, 'Bold')),
+                h(ToggleGroup, { toggleMultiple: true, className: 'row', 'aria-label': 'Text formatting' },
+                    h(Toggle, { value: 'italic', className: 'ctl-italic' }, 'Italic'),
+                    h(Toggle, { value: 'underline', className: 'ctl-underline' }, 'Underline')))
+        }
+
+        createRoot(document.getElementById('root')).render(h(App))
+    </script>
+</body>
+</html>
diff --git a/test/data/app/view/form/toggle/radix.php b/test/data/app/view/form/toggle/radix.php
new file mode 100644
index 000000000..b956d0a46
--- /dev/null
+++ b/test/data/app/view/form/toggle/radix.php
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Radix Toggles</title>
+    <style>
+        body { font-family: Arial, sans-serif; }
+        .row { margin: 12px 0; display: flex; align-items: center; gap: 8px; }
+        button { min-width: 90px; height: 28px; border: 1px solid #666; background: #fff; }
+        button[aria-pressed="true"] { background: #2a6; color: #fff; }
+    </style>
+    <script type="importmap">
+    {"imports": {
+      "react": "https://esm.sh/react@19.2.0",
+      "react/jsx-runtime": "https://esm.sh/react@19.2.0/jsx-runtime",
+      "react-dom": "https://esm.sh/react-dom@19.2.0",
+      "react-dom/client": "https://esm.sh/react-dom@19.2.0/client"
+    }}
+    </script>
+</head>
+<body>
+    <h1>Radix Toggles</h1>
+    <div id="root"></div>
+    <script type="module">
+        import * as React from 'react'
+        import { createRoot } from 'react-dom/client'
+        import { Toggle, ToggleGroup } from 'https://esm.sh/radix-ui@1.6.7?external=react,react-dom'
+
+        const h = React.createElement
+
+        function App() {
+            React.useEffect(() => { window.__ready = true }, [])
+            return h('div', null,
+                h('div', { className: 'row' },
+                    h(Toggle.Root, { className: 'ctl-bold' }, 'Bold')),
+                h(ToggleGroup.Root, { type: 'multiple', className: 'row', 'aria-label': 'Text formatting' },
+                    h(ToggleGroup.Item, { value: 'italic', className: 'ctl-italic' }, 'Italic'),
+                    h(ToggleGroup.Item, { value: 'underline', className: 'ctl-underline' }, 'Underline')))
+        }
+
+        createRoot(document.getElementById('root')).render(h(App))
+    </script>
+</body>
+</html>
diff --git a/test/helper/Playwright_test.js b/test/helper/Playwright_test.js
index 0355dde0c..20b181cd3 100644
--- a/test/helper/Playwright_test.js
+++ b/test/helper/Playwright_test.js
@@ -134,7 +134,9 @@ describe('Playwright', function () {
       await I.click('Hello World')
     })
   })
-  describe('#grabCheckedElementStatus', () => {
+  describe('#grabCheckedElementStatus', function () {
+    this.timeout(60000)
+
     it('check grabCheckedElementStatus', async () => {
       await I.amOnPage('/invisible_elements')
       let result = await I.grabCheckedElementStatus({ id: 'html' })
@@ -148,9 +150,37 @@ describe('Playwright', function () {
       try {
         await I.grabCheckedElementStatus({ id: 'basic' })
       } catch (e) {
-        assert.equal(e.message, 'Element is not a checkbox or radio input')
+        assert.equal(e.message, 'Element is not a checkbox or radio input and has no aria-checked or aria-pressed state (role: none)')
       }
     })
+
+    it('reads aria-checked of a role=checkbox', async () => {
+      await I.amOnPage('/form/checkable/radix')
+      await I.waitForFunction(() => window.__ready === true, [], 30)
+
+      assert.equal(await I.grabCheckedElementStatus('.ctl-terms'), false)
+      await I.checkOption('Accept terms')
+      assert.equal(await I.grabCheckedElementStatus('.ctl-terms'), true)
+    })
+
+    it('reads aria-checked of a menu item', async () => {
+      await I.amOnPage('/form/menu/radix')
+      await I.waitForFunction(() => window.__ready === true, [], 30)
+      await I.click('Open menu')
+      await I.waitForElement('[role=menu]', 5)
+
+      assert.equal(await I.grabCheckedElementStatus('.ctl-status-bar'), false)
+      assert.equal(await I.grabCheckedElementStatus('.ctl-pedro'), true)
+    })
+
+    it('reads aria-pressed of a toggle button', async () => {
+      await I.amOnPage('/form/toggle/radix')
+      await I.waitForFunction(() => window.__ready === true, [], 30)
+
+      assert.equal(await I.grabCheckedElementStatus('.ctl-bold'), false)
+      await I.toggleButton('Bold')
+      assert.equal(await I.grabCheckedElementStatus('.ctl-bold'), true)
+    })
   })
   describe('#grabDisabledElementStatus', () => {
     it('check isElementDisabled', async () => {
diff --git a/test/helper/webapi.js b/test/helper/webapi.js
index a0577f33e..51441fb78 100644
--- a/test/helper/webapi.js
+++ b/test/helper/webapi.js
@@ -593,6 +593,123 @@ export function tests() {
     })
   })
 
+  describe('#checkOption - menu items', function () {
+    this.timeout(60000)
+
+    async function openMenu() {
+      if (await I.grabNumberOfVisibleElements('[role=menu]')) return
+      await I.click('Open menu')
+      await I.waitForElement('[role=menu]', 5)
+    }
+
+    async function open(page) {
+      await I.amOnPage(`/form/menu/${page}`)
+      await I.waitForFunction(() => window.__ready === true, [], 30)
+      await openMenu()
+    }
+
+    async function ariaChecked(css) {
+      await openMenu()
+      return I.grabAttributeFrom(css, 'aria-checked')
+    }
+
+    for (const page of ['radix', 'baseui']) {
+      describe(page, () => {
+        it('checks a menu checkbox item by its label', async () => {
+          await open(page)
+          await I.dontSeeCheckboxIsChecked('Show status bar')
+
+          await I.checkOption('Show status bar')
+          expect(await ariaChecked('.ctl-status-bar')).to.equal('true')
+          expect(await ariaChecked('.ctl-activity-bar')).to.equal('false')
+          await I.seeCheckboxIsChecked('Show status bar')
+        })
+
+        it('leaves an already checked menu item checked', async () => {
+          await open(page)
+          await I.checkOption('Show status bar')
+
+          await openMenu()
+          await I.checkOption('Show status bar')
+          expect(await ariaChecked('.ctl-status-bar')).to.equal('true')
+          await I.seeCheckboxIsChecked('Show status bar')
+        })
+
+        it('unchecks a menu checkbox item by its label', async () => {
+          await open(page)
+          await I.checkOption('Show status bar')
+
+          await openMenu()
+          await I.uncheckOption('Show status bar')
+          expect(await ariaChecked('.ctl-status-bar')).to.equal('false')
+          await I.dontSeeCheckboxIsChecked('Show status bar')
+        })
+
+        it('checks a menu radio item and unchecks its siblings', async () => {
+          await open(page)
+          await I.seeCheckboxIsChecked('Pedro Duarte')
+
+          await I.checkOption('Colm Tuite')
+          expect(await ariaChecked('.ctl-colm')).to.equal('true')
+          expect(await ariaChecked('.ctl-pedro')).to.equal('false')
+          await I.seeCheckboxIsChecked('Colm Tuite')
+          await I.dontSeeCheckboxIsChecked('Pedro Duarte')
+        })
+      })
+    }
+  })
+
+  describe('#toggleButton', function () {
+    this.timeout(60000)
+
+    async function open(page) {
+      await I.amOnPage(`/form/toggle/${page}`)
+      await I.waitForFunction(() => window.__ready === true, [], 30)
+    }
+
+    async function ariaPressed(css) {
+      return I.grabAttributeFrom(css, 'aria-pressed')
+    }
+
+    for (const page of ['radix', 'baseui']) {
+      describe(page, () => {
+        it('presses and unpresses a toggle button', async () => {
+          await open(page)
+          await I.dontSeeButtonIsPressed('Bold')
+
+          await I.toggleButton('Bold')
+          expect(await ariaPressed('.ctl-bold')).to.equal('true')
+          await I.seeButtonIsPressed('Bold')
+
+          await I.toggleButton('Bold')
+          expect(await ariaPressed('.ctl-bold')).to.equal('false')
+          await I.dontSeeButtonIsPressed('Bold')
+        })
+
+        it('presses a single item of a toggle group', async () => {
+          await open(page)
+          await I.toggleButton('Italic')
+
+          expect(await ariaPressed('.ctl-italic')).to.equal('true')
+          expect(await ariaPressed('.ctl-underline')).to.equal('false')
+          await I.seeButtonIsPressed('Italic')
+          await I.dontSeeButtonIsPressed('Underline')
+        })
+      })
+    }
+
+    it('refuses an element that is not a toggle button', async () => {
+      await I.amOnPage('/form/checkbox')
+
+      try {
+        await I.toggleButton('Submit')
+        throw Error('Should not get this far')
+      } catch (err) {
+        expect(err.message).to.include('not a toggle button')
+      }
+    })
+  })
+
   describe('#selectOption', () => {
     it('should select option by css', async () => {
       await I.amOnPage('/form/select')