fix: Consider explicit role when pretty printing roles (#568)

eps1lon · web-flow · commit 04b027c4a321 · 2020-05-13T16:08:12.000-06:00
Closes #553
diff --git a/src/__tests__/role.js b/src/__tests__/role.js
@@ -343,6 +343,35 @@ Here are the accessible roles:
 `)
 })
 
+test('explicit role is most specific', () => {
+  const {getByRole} = renderIntoDocument(
+    `<button role="tab" aria-label="my-tab" />`,
+  )
+
+  expect(() => getByRole('button')).toThrowErrorMatchingInlineSnapshot(`
+"Unable to find an accessible element with the role "button"
+
+Here are the accessible roles:
+
+  tab:
+
+  Name "my-tab":
+  <button
+    aria-label="my-tab"
+    role="tab"
+  />
+
+  --------------------------------------------------
+
+<body>
+  <button
+    aria-label="my-tab"
+    role="tab"
+  />
+</body>"
+`)
+})
+
 describe('configuration', () => {
   let originalConfig
   beforeEach(() => {
diff --git a/src/role-helpers.js b/src/role-helpers.js
@@ -134,7 +134,13 @@ function getRoles(container, {hidden = false} = {}) {
       return hidden === false ? isInaccessible(element) === false : true
     })
     .reduce((acc, node) => {
-      const roles = getImplicitAriaRoles(node)
+      let roles = []
+      // TODO: This violates html-aria which does not allow any role on every element
+      if (node.hasAttribute('role')) {
+        roles = node.getAttribute('role').split(' ').slice(0, 1)
+      } else {
+        roles = getImplicitAriaRoles(node)
+      }
 
       return roles.reduce(
         (rolesAcc, role) =>
