From e85fba1c7dd2ebf53e5d38212648cfa1b6f96dcf Mon Sep 17 00:00:00 2001
From: Dmitry Gozman <dgozman@gmail.com>
Date: Thu, 9 Sep 2021 16:01:21 -0700
Subject: [PATCH] fix(check): allow checking/unchecking role=radio elements
 (#8821)

We already do this for `role=checkbox` but not for radio.
---
 src/server/injected/injectedScript.ts |  2 +-
 tests/page/page-check.spec.ts         | 27 +++++++++++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/server/injected/injectedScript.ts b/src/server/injected/injectedScript.ts
index e7179ccb72..9d3923587a 100644
--- a/src/server/injected/injectedScript.ts
+++ b/src/server/injected/injectedScript.ts
@@ -474,7 +474,7 @@ export class InjectedScript {
       return !disabled && editable;
 
     if (state === 'checked') {
-      if (element.getAttribute('role') === 'checkbox')
+      if (['checkbox', 'radio'].includes(element.getAttribute('role') || ''))
         return element.getAttribute('aria-checked') === 'true';
       if (element.nodeName !== 'INPUT')
         return 'error:notcheckbox';
diff --git a/tests/page/page-check.spec.ts b/tests/page/page-check.spec.ts
index 6b94e3e865..0a798e2873 100644
--- a/tests/page/page-check.spec.ts
+++ b/tests/page/page-check.spec.ts
@@ -85,6 +85,24 @@ it('should check radio', async ({page}) => {
   expect(await page.evaluate(() => window['two'].checked)).toBe(true);
 });
 
+it('should check radio by aria role', async ({page}) => {
+  await page.setContent(`<div role='radio' id='checkbox'>CHECKBOX</div>
+    <script>
+      checkbox.addEventListener('click', () => checkbox.setAttribute('aria-checked', 'true'));
+    </script>`);
+  await page.check('div');
+  expect(await page.evaluate(() => window['checkbox'].getAttribute('aria-checked'))).toBe('true');
+});
+
+it('should uncheck radio by aria role', async ({page}) => {
+  await page.setContent(`<div role='radio' id='checkbox' aria-checked="true">CHECKBOX</div>
+    <script>
+      checkbox.addEventListener('click', () => checkbox.setAttribute('aria-checked', 'false'));
+    </script>`);
+  await page.uncheck('div');
+  expect(await page.evaluate(() => window['checkbox'].getAttribute('aria-checked'))).toBe('false');
+});
+
 it('should check the box by aria role', async ({page}) => {
   await page.setContent(`<div role='checkbox' id='checkbox'>CHECKBOX</div>
     <script>
@@ -94,6 +112,15 @@ it('should check the box by aria role', async ({page}) => {
   expect(await page.evaluate(() => window['checkbox'].getAttribute('aria-checked'))).toBe('true');
 });
 
+it('should uncheck the box by aria role', async ({page}) => {
+  await page.setContent(`<div role='checkbox' id='checkbox' aria-checked="true">CHECKBOX</div>
+    <script>
+      checkbox.addEventListener('click', () => checkbox.setAttribute('aria-checked', 'false'));
+    </script>`);
+  await page.uncheck('div');
+  expect(await page.evaluate(() => window['checkbox'].getAttribute('aria-checked'))).toBe('false');
+});
+
 it('should throw when not a checkbox', async ({page}) => {
   await page.setContent(`<div>Check me</div>`);
   const error = await page.check('div').catch(e => e);