fix: use type property instead of selector when matching type=text input

close #814

Author: marcosvega91

src/role-helpers.js

@@ -65,8 +65,8 @@ function isInaccessible(element, options = {}) {
 function getImplicitAriaRoles(currentNode) {
   // eslint bug here:
   // eslint-disable-next-line no-unused-vars
-  for (const {selector, roles} of elementRoleList) {
-    if (currentNode.matches(selector)) {
+  for (const {match, roles} of elementRoleList) {
+    if (match(currentNode)) {
       return [...roles]
     }
   }
@@ -101,6 +101,31 @@ function buildElementRoleList(elementRolesMap) {
     return rightSpecificity - leftSpecificity
   }
 
+  function match(element) {
+    return node => {
+      let {attributes = []} = element
+      // https://github.com/testing-library/dom-testing-library/issues/814
+      const typeTextIndex = attributes.findIndex(
+        attribute =>
+          attribute.value &&
+          attribute.name === 'type' &&
+          attribute.value === 'text',
+      )
+      if (typeTextIndex >= 0) {
+        // not using splice to not mutate the attributes array
+        attributes = [
+          ...attributes.slice(0, typeTextIndex),
+          ...attributes.slice(typeTextIndex + 1),
+        ]
+        if (node.type !== 'text') {
+          return false
+        }
+      }
+
+      return node.matches(makeElementSelector({...element, attributes}))
+    }
+  }
+
   let result = []
 
   // eslint bug here:
@@ -109,7 +134,7 @@ function buildElementRoleList(elementRolesMap) {
     result = [
       ...result,
       {
-        selector: makeElementSelector(element),
+        match: match(element),
         roles: Array.from(roles),
         specificity: getSelectorSpecificity(element),
       },