diff --git a/src/__tests__/role.js b/src/__tests__/role.js index af0ffd5c..109d2e62 100644 --- a/src/__tests__/role.js +++ b/src/__tests__/role.js @@ -543,3 +543,8 @@ describe('configuration', () => { } }) }) + +test('should find the input using type property instead of attribute', () => { + const {getByRole} = render('') + expect(getByRole('textbox')).not.toBeNull() +}) diff --git a/src/role-helpers.js b/src/role-helpers.js index 816e592e..c7d64076 100644 --- a/src/role-helpers.js +++ b/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), },