From 514ad107d7d41dd91fa543ed52a702f246556f61 Mon Sep 17 00:00:00 2001
From: Alex Rudenko <OrKoN@users.noreply.github.com>
Date: Tue, 6 Jun 2023 09:46:26 +0200
Subject: [PATCH] docs: add a few examples for ARIA queries (#10320)

Co-authored-by: Nikolay Vitkov <34244704+Lightning00Blade@users.noreply.github.com>
---
 docs/guides/query-selectors.md |  3 +++
 test/src/queryhandler.spec.ts  | 22 ++++++++++++++++++++++
 2 files changed, 25 insertions(+)

diff --git a/docs/guides/query-selectors.md b/docs/guides/query-selectors.md
index 107cb8f0..731c3724 100644
--- a/docs/guides/query-selectors.md
+++ b/docs/guides/query-selectors.md
@@ -121,6 +121,9 @@ ARIA selectors can be used to find elements with a given ARIA label. These label
 
 ```ts
 const node = await page.waitForSelector('::-p-aria(Submit)');
+const node = await page.waitForSelector(
+  '::-p-aria([name="Click me"][role="button"])'
+);
 ```
 
 ### Custom selectors
diff --git a/test/src/queryhandler.spec.ts b/test/src/queryhandler.spec.ts
index f3f604f6..c138a4bf 100644
--- a/test/src/queryhandler.spec.ts
+++ b/test/src/queryhandler.spec.ts
@@ -446,6 +446,28 @@ describe('Query handler tests', function () {
       ).toBeTruthy();
     });
 
+    it('should work ARIA selectors with role', async () => {
+      const {page} = getTestState();
+      const element = await page.$('::-p-aria(world[role="button"])');
+      assert(element, 'Could not find element');
+      expect(
+        await element.evaluate(element => {
+          return element.id === 'b';
+        })
+      ).toBeTruthy();
+    });
+
+    it('should work ARIA selectors with name and role', async () => {
+      const {page} = getTestState();
+      const element = await page.$('::-p-aria([name="world"][role="button"])');
+      assert(element, 'Could not find element');
+      expect(
+        await element.evaluate(element => {
+          return element.id === 'b';
+        })
+      ).toBeTruthy();
+    });
+
     it('should work XPath selectors', async () => {
       const {page} = getTestState();
       const element = await page.$('div ::-p-xpath(//button)');