diff --git a/src/__tests__/role.js b/src/__tests__/role.js
index c709d82e..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(
+ `
`,
+ )
+ expect(() => getByRole('article', {hidden: true}))
+ .toThrowErrorMatchingInlineSnapshot(`
+ Unable to find an element with the role "article"
+
+ Here are the available roles:
+
+ heading:
+
+ Name "Hi":
+
+
+ --------------------------------------------------
+ alertdialog:
+
+ Name "My Dialog":
+
+
+ --------------------------------------------------
+
+ Ignored nodes: comments, script, style
+
+ `)
+})
+
test('logs error when there are no accessible roles', () => {
const {getByRole} = render('')
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(
+ `
+
+
Order
+
Delivery Adress
+
+
Invoice Adress
+
+
`,
+ )
+
+ 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(`Sign up
`)
@@ -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(
+ `
+`,
+ )
+
+ 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(
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,
}),
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,
},