fix(ByRole): filter by name or description when hidden

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(`
@@ -233,6 +282,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 +696,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(

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,
         }),

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,
               },