fix: Unexpected behavior of the html lang require rule (#655)

baleyko · web-flow · commit 068645e9111f · 2021-06-11T08:12:49.000-04:00
* fix(rules): html-lang-require rule should be applied only for HTML tag

* fix(rules): html-lang-require rule show false result in valid cases because of reusing of the RegExp object which keeps the state after previous check
diff --git a/src/core/rules/html-lang-require.ts b/src/core/rules/html-lang-require.ts
@@ -22,7 +22,6 @@ const langtag =
   `(-${privateUse})?` +
   ')'
 const languageTag = `(${grandfathered}|${langtag}|${privateUse2})`
-const LANG_VALIDITY_PATTERN = new RegExp(languageTag, 'g')
 
 export default {
   id: 'html-lang-require',
@@ -33,33 +32,36 @@ export default {
       const tagName = event.tagName.toLowerCase()
       const mapAttrs = parser.getMapAttrs(event.attrs)
       const col = event.col + tagName.length + 1
+      const langValidityPattern = new RegExp(languageTag, 'g')
 
-      if (tagName === 'html' && 'lang' in mapAttrs) {
-        if (!mapAttrs['lang']) {
+      if (tagName === 'html') {
+        if ('lang' in mapAttrs) {
+          if (!mapAttrs['lang']) {
+            reporter.warn(
+              'The lang attribute of <html> element must have a value.',
+              event.line,
+              col,
+              this,
+              event.raw
+            )
+          } else if (!langValidityPattern.test(mapAttrs['lang'])) {
+            reporter.warn(
+              'The lang attribute value of <html> element must be a valid BCP47.',
+              event.line,
+              col,
+              this,
+              event.raw
+            )
+          }
+        } else {
           reporter.warn(
-            'The lang attribute of <html> element must have a value.',
-            event.line,
-            col,
-            this,
-            event.raw
-          )
-        } else if (!LANG_VALIDITY_PATTERN.test(mapAttrs['lang'])) {
-          reporter.warn(
-            'The lang attribute value of <html> element must be a valid BCP47.',
+            'An lang attribute must be present on <html> elements.',
             event.line,
             col,
             this,
             event.raw
           )
         }
-      } else {
-        reporter.warn(
-          'An lang attribute must be present on <html> elements.',
-          event.line,
-          col,
-          this,
-          event.raw
-        )
       }
     })
   },
diff --git a/test/rules/html-lang-require.spec.js b/test/rules/html-lang-require.spec.js
@@ -8,6 +8,11 @@ const ruleOptions = {}
 ruleOptions[ruldId] = true
 
 describe(`Rules: ${ruldId}`, () => {
+  it('All the rest(non HTML) tags should not result in an error', () => {
+    const code = '<html lang="en-EN"><body><p></p></body></html>'
+    const messages = HTMLHint.verify(code, ruleOptions)
+    expect(messages.length).to.be(0)
+  })
   it('HTML tag have no a lang attribute should result in an error', () => {
     const code = '<html></html>'
     const messages = HTMLHint.verify(code, ruleOptions)
@@ -23,9 +28,14 @@ describe(`Rules: ${ruldId}`, () => {
     const messages = HTMLHint.verify(code, ruleOptions)
     expect(messages.length).to.be(1)
   })
-  it('HTML tag have an non emtpy and valid lang attribute should not result in an error', () => {
+  it('HTML tag have an non emtpy and valid(en-EN) lang attribute should not result in an error', () => {
     const code = '<html lang="en-EN"></html>'
     const messages = HTMLHint.verify(code, ruleOptions)
     expect(messages.length).to.be(0)
   })
+  it('HTML tag have an non emtpy and valid(en) lang attribute should not result in an error', () => {
+    const code = '<html lang="en"></html>'
+    const messages = HTMLHint.verify(code, ruleOptions)
+    expect(messages.length).to.be(0)
+  })
 })
