From 937d49de389c9b101f86222782b5746b6be4bd49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vin=C3=ADcius=20Lag=C3=AAdo?= <vinicius.lagedo@vtex.com.br>
Date: Wed, 31 Aug 2022 09:40:39 -0300
Subject: [PATCH 1/4] test(ByRole): filter by name or description when hidden

---
 src/__tests__/role.js | 66 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 66 insertions(+)

diff --git a/src/__tests__/role.js b/src/__tests__/role.js
index c709d82e..ec99da79 100644
--- a/src/__tests__/role.js
+++ b/src/__tests__/role.js
@@ -233,6 +233,44 @@ test('can be filtered by accessible name', () => {
   ).not.toBeNull()
 })
 
+test('when hidden can be filtered by accessible name', () => {
+  const {getByRole} = renderIntoDocument(
+    `
+<div>
+  <h1>Order</h1>
+  <h2>Delivery Adress</h2>
+  <form aria-label="Delivery Adress" aria-hidden="true">
+    <label>
+      <div>Street</div>
+      <input type="text" />
+    </label>
+    <input type="submit" />
+  </form>
+  <h2>Invoice Adress</h2>
+  <form aria-label="Invoice Adress">
+    <label>
+      <div>Street</div>
+      <input type="text" />
+    </label>
+    <input type="submit" />
+  </form>
+</div>`,
+  )
+
+  const deliveryForm = getByRole('form', {
+    name: 'Delivery Adress',
+    hidden: true,
+  })
+  expect(deliveryForm).not.toBeNull()
+
+  expect(
+    getQueriesForElement(deliveryForm).getByRole('button', {
+      name: 'Submit',
+      hidden: true,
+    }),
+  ).not.toBeNull()
+})
+
 test('accessible name comparison is case sensitive', () => {
   const {getByRole} = render(`<h1>Sign <em>up</em></h1>`)
 
@@ -609,6 +647,34 @@ test('can be filtered by accessible description', () => {
   ).not.toBeNull()
 })
 
+test('when hidden can be filtered by accessible description', () => {
+  const targetedNotificationMessage = 'Your session is about to expire!'
+  const {getByRole} = renderIntoDocument(
+    `
+<ul>
+  <li role="alertdialog" aria-hidden="true" aria-describedby="notification-id-2">
+    <div><button>Close</button></div>
+    <div id="notification-id-2">${targetedNotificationMessage}</div>
+  </li>
+</ul>`,
+  )
+
+  const notification = getByRole('alertdialog', {
+    description: targetedNotificationMessage,
+    hidden: true,
+  })
+
+  expect(notification).not.toBeNull()
+  expect(notification).toHaveTextContent(targetedNotificationMessage)
+
+  expect(
+    getQueriesForElement(notification).getByRole('button', {
+      name: 'Close',
+      hidden: true,
+    }),
+  ).not.toBeNull()
+})
+
 test('error should include description when filtering and no results are found', () => {
   const targetedNotificationMessage = 'Your session is about to expire!'
   const {getByRole} = renderIntoDocument(

From 70a5ac9d3c26bfc58047d0880c3aa7c117f5261f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vin=C3=ADcius=20Lag=C3=AAdo?= <vinicius.lagedo@vtex.com.br>
Date: Wed, 31 Aug 2022 09:41:29 -0300
Subject: [PATCH 2/4] fix(ByRole): filter by name or description when hidden

---
 src/queries/role.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/queries/role.js b/src/queries/role.js
index a46d8a2b..79ab261f 100644
--- a/src/queries/role.js
+++ b/src/queries/role.js
@@ -165,6 +165,7 @@ function queryAllByRole(
 
       return matches(
         computeAccessibleName(element, {
+          hidden,
           computedStyleSupportsPseudoElements:
             getConfig().computedStyleSupportsPseudoElements,
         }),
@@ -181,6 +182,7 @@ function queryAllByRole(
 
       return matches(
         computeAccessibleDescription(element, {
+          hidden,
           computedStyleSupportsPseudoElements:
             getConfig().computedStyleSupportsPseudoElements,
         }),

From fdee23f08438925a11944192e16b8254c8f7e6c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vin=C3=ADcius=20Lag=C3=AAdo?= <vinicius.lagedo@vtex.com.br>
Date: Wed, 31 Aug 2022 09:43:47 -0300
Subject: [PATCH 3/4] test(ByRole): when hidden, logs elements with their names

---
 src/__tests__/role.js | 49 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)

diff --git a/src/__tests__/role.js b/src/__tests__/role.js
index ec99da79..3e9093e9 100644
--- a/src/__tests__/role.js
+++ b/src/__tests__/role.js
@@ -53,6 +53,55 @@ test('when hidden: true logs available roles when it fails', () => {
   `)
 })
 
+test('when hidden: logs elements with their names when it fails', () => {
+  const {getByRole} = render(
+    `<div><h1 hidden>Hi</h1><div hidden role="alertdialog" aria-label="My Dialog">Hello</div></div>`,
+  )
+  expect(() => getByRole('article', {hidden: true}))
+    .toThrowErrorMatchingInlineSnapshot(`
+    Unable to find an element with the role "article"
+
+    Here are the available roles:
+
+      heading:
+
+      Name "Hi":
+      <h1
+        hidden=""
+      />
+
+      --------------------------------------------------
+      alertdialog:
+
+      Name "My Dialog":
+      <div
+        aria-label="My Dialog"
+        hidden=""
+        role="alertdialog"
+      />
+
+      --------------------------------------------------
+
+    Ignored nodes: comments, script, style
+    <div>
+      <div>
+        <h1
+          hidden=""
+        >
+          Hi
+        </h1>
+        <div
+          aria-label="My Dialog"
+          hidden=""
+          role="alertdialog"
+        >
+          Hello
+        </div>
+      </div>
+    </div>
+  `)
+})
+
 test('logs error when there are no accessible roles', () => {
   const {getByRole} = render('<div />')
   expect(() => getByRole('article')).toThrowErrorMatchingInlineSnapshot(`

From 57aa847c6bb40c9d447b7f446131da6cb1e5c48b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vin=C3=ADcius=20Lag=C3=AAdo?= <vinicius.lagedo@vtex.com.br>
Date: Wed, 31 Aug 2022 09:44:18 -0300
Subject: [PATCH 4/4] fix(ByRole): when hidden logs have the name

---
 src/role-helpers.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/role-helpers.js b/src/role-helpers.js
index 500bcdd2..6103343e 100644
--- a/src/role-helpers.js
+++ b/src/role-helpers.js
@@ -196,6 +196,7 @@ function prettyRoles(dom, {hidden, includeDescription}) {
       const elementsString = elements
         .map(el => {
           const nameString = `Name "${computeAccessibleName(el, {
+            hidden,
             computedStyleSupportsPseudoElements:
               getConfig().computedStyleSupportsPseudoElements,
           })}":\n`
@@ -206,6 +207,7 @@ function prettyRoles(dom, {hidden, includeDescription}) {
             const descriptionString = `Description "${computeAccessibleDescription(
               el,
               {
+                hidden,
                 computedStyleSupportsPseudoElements:
                   getConfig().computedStyleSupportsPseudoElements,
               },