Check html language

README.md

@@ -27,6 +27,8 @@ document.addEventListener('DOMContentLoaded', function() {
 
 List of errors:
 
+- `HtmlWithoutLangAttributeError`
+- `HtmlWithoutLangValueError`
 - `ImageWithoutAltAttributeError`
 - `ElementWithoutLabelError`
 - `LinkWithoutLabelOrRoleError`

example.html

@@ -45,7 +45,7 @@
     </div>
 
     <script type="text/javascript">
-      var errors = accessibilityjs.scanForProblems(document.body, function (error) {
+      var errors = accessibilityjs.scanForProblems(document, function (error) {
         error.element.style.outline = '5px solid red'
         error.element.addEventListener('click', function () {
           alert([error.name, error.message].join('\n'))

index.js

@@ -10,6 +10,18 @@ export function scanForProblems(context, errorCallback, options) {
     errorCallback(err)
   }
 
+  const html = context.querySelector('html')
+
+  if (!html.hasAttribute('lang')) {
+    logError(new HtmlWithoutLangAttributeError(html))
+  } else {
+    const getLangVal = html.getAttribute('lang')
+
+    if (getLangVal === '' || getLangVal === null) {
+      logError(new HtmlWithoutLangValueError(html))
+    }
+  }
+
   for (const img of context.querySelectorAll('img')) {
     if (!img.hasAttribute('alt')) {
       logError(new ImageWithoutAltAttributeError(img))
@@ -78,6 +90,22 @@ function errorSubclass(fn) {
   fn.prototype.constructor = fn
 }
 
+function HtmlWithoutLangAttributeError(element) {
+  this.name = 'HtmlWithoutLangAttributeError'
+  this.stack = new Error().stack
+  this.element = element
+  this.message = `Missing lang attribute on ${inspect(element)}`
+}
+errorSubclass(HtmlWithoutLangAttributeError)
+
+function HtmlWithoutLangValueError(element) {
+  this.name = 'HtmlWithoutLangValueError'
+  this.stack = new Error().stack
+  this.element = element
+  this.message = `Missing lang value on ${inspect(element)}`
+}
+errorSubclass(HtmlWithoutLangValueError)
+
 function ImageWithoutAltAttributeError(element) {
   this.name = 'ImageWithoutAltAttributeError'
   this.stack = new Error().stack

test/karma.config.js

@@ -19,7 +19,7 @@ module.exports = function(config) {
         base: 'Firefox',
         flags: ['-headless'],
         displayName: 'HeadlessFirefox'
-      },
+      }
     }
   })
 }

test/test.js

@@ -1,4 +1,18 @@
 describe('scanForProblems should catch', () => {
+  it('html without lang', () => {
+    const html = makeElement('html', {"lang": "en"})
+    document.body.appendChild(html)
+
+    assert.exists(html.getAttribute('lang'), html)
+  })
+
+  it('html without lang value', () => {
+    const html = makeElement('html', {"lang": "en"})
+    document.body.appendChild(html)
+
+    assert.isNotEmpty(html.getAttribute('lang'), html)
+  })
+
   it('empty button', () => {
     const button = makeElement('button', {type: 'button'})
     document.body.appendChild(button)