feat: Export isInaccessible (#364)

* feat: Export shouldExcludeFromA11yTree

* Add tests for negative assertions

* shouldExcludeFromA11yTree -> isInaccessible

Author: eps1lon

src/__tests__/role-helpers.js

@@ -1,4 +1,9 @@
-import {getRoles, logRoles, getImplicitAriaRoles} from '../role-helpers'
+import {
+  getRoles,
+  logRoles,
+  getImplicitAriaRoles,
+  isInaccessible,
+} from '../role-helpers'
 import {render} from './helpers/test-utils'
 
 beforeEach(() => {
@@ -160,4 +165,19 @@ test('getImplicitAriaRoles returns expected roles for various dom nodes', () =>
   expect(getImplicitAriaRoles(input)).toEqual(['textbox'])
 })
 
+test.each([
+  ['<div />', false],
+  ['<div aria-hidden="false" />', false],
+  ['<div style="visibility: visible" />', false],
+  ['<div hidden />', true],
+  ['<div style="display: none;"/>', true],
+  ['<div style="visibility: hidden;"/>', true],
+  ['<div aria-hidden="true" />', true],
+])('shouldExcludeFromA11yTree for %s returns %p', (html, expected) => {
+  const {container} = render(html)
+  container.firstChild.appendChild(document.createElement('button'))
+
+  expect(isInaccessible(container.querySelector('button'))).toBe(expected)
+})
+
 /* eslint no-console:0 */

src/index.js

@@ -12,7 +12,7 @@ export * from './get-node-text'
 export * from './events'
 export * from './get-queries-for-element'
 export * from './query-helpers'
-export {getRoles, logRoles} from './role-helpers'
+export {getRoles, logRoles, isInaccessible} from './role-helpers'
 export * from './pretty-dom'
 export {configure} from './config'
 

src/queries/role.js

@@ -1,7 +1,7 @@
 import {
   getImplicitAriaRoles,
   prettyRoles,
-  shouldExcludeFromA11yTree,
+  isInaccessible,
 } from '../role-helpers'
 import {buildQueries, fuzzyMatches, makeNormalizer, matches} from './all-utils'
 
@@ -15,9 +15,7 @@ function queryAllByRole(
 
   return Array.from(container.querySelectorAll('*'))
     .filter(element => {
-      return hidden === false
-        ? shouldExcludeFromA11yTree(element) === false
-        : true
+      return hidden === false ? isInaccessible(element) === false : true
     })
     .filter(node => {
       const isRoleSpecifiedExplicitly = node.hasAttribute('role')

src/role-helpers.js

@@ -14,7 +14,7 @@ const elementRoleList = buildElementRoleList(elementRoles)
  * @param {Element} element -
  * @returns {boolean} true if excluded, otherwise false
  */
-function shouldExcludeFromA11yTree(element) {
+function isInaccessible(element) {
   const window = element.ownerDocument.defaultView
   const computedStyle = window.getComputedStyle(element)
   // since visibility is inherited we can exit early
@@ -120,9 +120,7 @@ function getRoles(container, {hidden = false} = {}) {
 
   return flattenDOM(container)
     .filter(element => {
-      return hidden === false
-        ? shouldExcludeFromA11yTree(element) === false
-        : true
+      return hidden === false ? isInaccessible(element) === false : true
     })
     .reduce((acc, node) => {
       const roles = getImplicitAriaRoles(node)
@@ -155,12 +153,6 @@ function prettyRoles(dom, {hidden}) {
 const logRoles = (dom, {hidden = false} = {}) =>
   console.log(prettyRoles(dom, {hidden}))
 
-export {
-  getRoles,
-  logRoles,
-  getImplicitAriaRoles,
-  prettyRoles,
-  shouldExcludeFromA11yTree,
-}
+export {getRoles, logRoles, getImplicitAriaRoles, prettyRoles, isInaccessible}
 
 /* eslint no-console:0 */