diff --git a/lib/rules/a11y-no-title-attribute.js b/lib/rules/a11y-no-title-attribute.js index 83d61719..cc3ec1d0 100644 --- a/lib/rules/a11y-no-title-attribute.js +++ b/lib/rules/a11y-no-title-attribute.js @@ -50,7 +50,7 @@ module.exports = { create(context) { return { JSXElement: node => { - const elementType = getElementType(context, node.openingElement) + const elementType = getElementType(context, node.openingElement, true) if (elementType !== `iframe` && ifSemanticElement(context, node)) { const titleProp = getPropValue(getProp(node.openingElement.attributes, `title`)) if (titleProp) { diff --git a/lib/utils/get-element-type.js b/lib/utils/get-element-type.js index 29bff36b..16d7c07f 100644 --- a/lib/utils/get-element-type.js +++ b/lib/utils/get-element-type.js @@ -7,15 +7,19 @@ If a prop determines the type, it can be specified with `props`. For now, we only support the mapping of one prop type to an element type, rather than combinations of props. */ -function getElementType(context, node, ignoreMap = false) { +function getElementType(context, node, lazyElementCheck = false) { const {settings} = context + if (lazyElementCheck) { + return elementType(node) + } + // check if the node contains a polymorphic prop const polymorphicPropName = settings?.github?.polymorphicPropName ?? 'as' const rawElement = getLiteralPropValue(getProp(node.attributes, polymorphicPropName)) ?? elementType(node) // if a component configuration does not exists, return the raw element - if (ignoreMap || !settings?.github?.components?.[rawElement]) return rawElement + if (!settings?.github?.components?.[rawElement]) return rawElement const defaultComponent = settings.github.components[rawElement] diff --git a/tests/a11y-no-title-attribute.js b/tests/a11y-no-title-attribute.js index 3f620ea8..f87f043f 100644 --- a/tests/a11y-no-title-attribute.js +++ b/tests/a11y-no-title-attribute.js @@ -40,20 +40,13 @@ ruleTester.run('a11y-no-title-attribute', rule, { }, }, }, + { + // Note: we are only checking semantic elements. We cannot make assumptions about how a React Components is using the title prop. + code: 'Submit', + }, ], invalid: [ {code: 'GitHub', errors: [{message: errorMessage}]}, {code: '', errors: [{message: errorMessage}]}, - { - code: 'Submit', - errors: [{message: errorMessage}], - settings: { - github: { - components: { - Component: 'iframe', - }, - }, - }, - }, ], })