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',
- },
- },
- },
- },
],
})