diff --git a/src/__tests__/role.js b/src/__tests__/role.js index ec9beff7..a2964893 100644 --- a/src/__tests__/role.js +++ b/src/__tests__/role.js @@ -321,6 +321,28 @@ Here are the accessible roles: `) }) +test('does not include the container in the queryable roles', () => { + const {getByRole} = render(`
  • `, { + container: document.createElement('ul'), + }) + expect(() => getByRole('list')).toThrowErrorMatchingInlineSnapshot(` +"Unable to find an accessible element with the role "list" + +Here are the accessible roles: + + listitem: + + Name "": +
  • + + -------------------------------------------------- + +" +`) +}) + describe('configuration', () => { let originalConfig beforeEach(() => { diff --git a/src/queries/role.js b/src/queries/role.js index a442bfd9..93a67b67 100644 --- a/src/queries/role.js +++ b/src/queries/role.js @@ -95,9 +95,12 @@ const getMissingError = ( role, {hidden = getConfig().defaultHidden, name} = {}, ) => { - const roles = prettyRoles(container, { - hidden, - includeName: name !== undefined, + let roles = '' + Array.from(container.children).forEach(childElement => { + roles += prettyRoles(childElement, { + hidden, + includeName: name !== undefined, + }) }) let roleMessage