fix: Ignore pseudo elements for accessible name by default (#736)

Author: eps1lon

package.json

@@ -41,7 +41,7 @@
     "@babel/runtime": "^7.10.3",
     "@types/aria-query": "^4.2.0",
     "aria-query": "^4.2.2",
-    "dom-accessibility-api": "^0.4.6",
+    "dom-accessibility-api": "^0.5.0",
     "pretty-format": "^25.5.0"
   },
   "devDependencies": {

src/__tests__/role.js

@@ -522,4 +522,24 @@ describe('configuration', () => {
     const {getByRole} = render('<div hidden><ul  /></div>')
     expect(getByRole('list')).not.toBeNull()
   })
+
+  test('can be configured to consider ::before and ::after for accessible names which logs errors in jsdom', () => {
+    try {
+      jest.spyOn(console, 'error').mockImplementation(() => {})
+      configure({computedStyleSupportsPseudoElements: true})
+      const {queryByRole} = render('<button>Hello, Dave!</button>')
+
+      queryByRole('button', {name: 'Hello, Dave!'})
+
+      expect(console.error).toHaveBeenCalledTimes(2)
+      expect(console.error.mock.calls[0][0]).toMatch(
+        'Error: Not implemented: window.computedStyle(elt, pseudoElt)',
+      )
+      expect(console.error.mock.calls[1][0]).toMatch(
+        'Error: Not implemented: window.computedStyle(elt, pseudoElt)',
+      )
+    } finally {
+      jest.restoreAllMocks()
+    }
+  })
 })

src/config.js

@@ -32,6 +32,7 @@ let config = {
     return error
   },
   _disableExpensiveErrorDiagnostics: false,
+  computedStyleSupportsPseudoElements: false,
 }
 
 export const DEFAULT_IGNORE_TAGS = 'script, style'

src/queries/role.js

@@ -123,7 +123,10 @@ function queryAllByRole(
       }
 
       return matches(
-        computeAccessibleName(element),
+        computeAccessibleName(element, {
+          computedStyleSupportsPseudoElements: getConfig()
+            .computedStyleSupportsPseudoElements,
+        }),
         element,
         name,
         text => text,

src/role-helpers.js

@@ -1,6 +1,7 @@
 import {elementRoles} from 'aria-query'
 import {computeAccessibleName} from 'dom-accessibility-api'
 import {prettyDOM} from './pretty-dom'
+import {getConfig} from './config'
 
 const elementRoleList = buildElementRoleList(elementRoles)
 
@@ -161,7 +162,10 @@ function prettyRoles(dom, {hidden}) {
       const delimiterBar = '-'.repeat(50)
       const elementsString = elements
         .map(el => {
-          const nameString = `Name "${computeAccessibleName(el)}":\n`
+          const nameString = `Name "${computeAccessibleName(el, {
+            computedStyleSupportsPseudoElements: getConfig()
+              .computedStyleSupportsPseudoElements,
+          })}":\n`
           const domString = prettyDOM(el.cloneNode(false))
           return `${nameString}${domString}`
         })

src/suggestions.js

@@ -92,7 +92,10 @@ export function getSuggestedQuery(element, variant = 'get', method) {
   if (role !== 'generic' && canSuggest('Role', method, role)) {
     return makeSuggestion('Role', role, {
       variant,
-      name: computeAccessibleName(element),
+      name: computeAccessibleName(element, {
+        computedStyleSupportsPseudoElements: getConfig()
+          .computedStyleSupportsPseudoElements,
+      }),
     })
   }
 

types/config.d.ts

@@ -3,6 +3,7 @@ export interface Config {
   asyncWrapper(cb: (...args: any[]) => any): Promise<any>
   eventWrapper(cb: (...args: any[]) => any): void
   asyncUtilTimeout: number
+  computedStyleSupportsPseudoElements: boolean
   defaultHidden: boolean
   showOriginalStrackTrace: boolean
   throwSuggestions: boolean