fix: use node property instead of selector for type=text input (#823)

Author: marcosvega91

src/__tests__/role.js

@@ -543,3 +543,8 @@ describe('configuration', () => {
  }
  })
 })
+
+test('should find the input using type property instead of attribute', () => {
+ const {getByRole} = render('<input type="124">')
+ expect(getByRole('textbox')).not.toBeNull()
+})

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]
  }
  }
@@ -75,7 +75,7 @@ function getImplicitAriaRoles(currentNode) {
 }
 
 function buildElementRoleList(elementRolesMap) {
- function makeElementSelector({name, attributes = []}) {
+ function makeElementSelector({name, attributes}) {
  return `${name}${attributes
  .map(({name: attributeName, value, constraints = []}) => {
  const shouldNotExist = constraints.indexOf('undefined') !== -1
@@ -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),
  },