Merge pull request #38 from takenspc/alt-not-empty

Add rule: alt-require

src/rules/alt-require.js

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2013, Yanis Wang <yanis.wang@gmail.com>
+ * Copyright (c) 2014, Takeshi Kurosawa <taken.spc@gmail.com>
+ * MIT Licensed
+ */
+HTMLHint.addRule({
+    id: 'alt-require',
+    description: 'Alt of img must be present and alt of area[href] and input[type=image] must be set value.',
+    init: function(parser, reporter){
+        var self = this;
+        parser.addListener('tagstart', function(event){
+            var tagName = event.tagName.toLowerCase(),
+                mapAttrs = parser.getMapAttrs(event.attrs),
+                col = event.col + tagName.length + 1,
+                selector;
+            if(tagName === 'img' && !('alt' in mapAttrs)){
+                reporter.warn('Alt of img tag must be present.', event.line, col, self, event.raw);
+            }
+            else if((tagName === 'area' && 'href' in mapAttrs) ||
+                (tagName === 'input' && mapAttrs['type'] === 'image')){
+                if(!('alt' in mapAttrs) || mapAttrs['alt'] === ''){
+                    selector = tagName === 'area' ? 'area[href]' : 'input[type=image]';
+                    reporter.warn('Alt of ' + selector + ' must be set value.', event.line, col, self, event.raw);
+                }
+            }
+        });
+    }
+});

test/core-spec.js

@@ -12,7 +12,7 @@ describe('Core', function(){
     it('Set false to rule no effected should result in an error', function(){
         var code = '<img src="test.gif" />';
         var messages = HTMLHint.verify(code, {
-            'img-alt-require': false
+            'alt-require': false
         });
         expect(messages.length).to.be(0);
     });
@@ -30,18 +30,18 @@ describe('Core', function(){
     });
 
     it('Inline ruleset not worked should result in an error', function(){
-        var code = '<!-- htmlhint img-alt-require:true-->\r\n<img src="test.gif" />';
+        var code = '<!-- htmlhint alt-require:true-->\r\n<img src="test.gif" />';
         var messages = HTMLHint.verify(code, {
-            'img-alt-require': false
+            'alt-require': false
         });
         expect(messages.length).to.be(1);
-        expect(messages[0].rule.id).to.be('img-alt-require');
+        expect(messages[0].rule.id).to.be('alt-require');
         expect(messages[0].line).to.be(2);
-        expect(messages[0].col).to.be(1);
+        expect(messages[0].col).to.be(5);
 
-        code = '<!-- htmlhint img-alt-require:false-->\r\n<img src="test.gif" />';
+        code = '<!-- htmlhint alt-require:false-->\r\n<img src="test.gif" />';
         messages = HTMLHint.verify(code, {
-            'img-alt-require': true
+            'alt-require': true
         });
         expect(messages.length).to.be(0);
     });

test/rules/alt-require.js

@@ -0,0 +1,116 @@
+/**
+ * Copyright (c) 2013, Yanis Wang <yanis.wang@gmail.com>
+ * Copyright (c) 2014, Takeshi Kurosawa <taken.spc@gmail.com>
+ * MIT Licensed
+ */
+
+var expect  = require("expect.js");
+
+var HTMLHint  = require("../../index").HTMLHint;
+
+var ruldId = 'alt-require',
+    ruleOptions = {};
+
+ruleOptions[ruldId] = true;
+
+describe('Rules: '+ruldId, function(){
+
+    it('Img tag have empty alt attribute should not result in an error', function(){
+        var code = '<img width="200" height="300" alt="">';
+        var messages = HTMLHint.verify(code, ruleOptions);
+        expect(messages.length).to.be(0);
+    });
+
+    it('Img tag have non empty alt attribute should not result in an error', function(){
+        var code = '<img width="200" height="300" alt="test">';
+        var messages = HTMLHint.verify(code, ruleOptions);
+        expect(messages.length).to.be(0);
+    });
+
+    it('Img tag have not alt attribute should result in an error', function(){
+        var code = '<img width="200" height="300">';
+        var messages = HTMLHint.verify(code, ruleOptions);
+        expect(messages.length).to.be(1);
+        expect(messages[0].rule.id).to.be(ruldId);
+        expect(messages[0].line).to.be(1);
+        expect(messages[0].col).to.be(5);
+        expect(messages[0].type).to.be('warning');
+    });
+
+    /* A tag can have shape and coords attributes and not have alt attribute */
+    it('A tag have not alt attribute should not result in an error', function(){
+        var code = '<a>';
+        var messages = HTMLHint.verify(code, ruleOptions);
+        expect(messages.length).to.be(0);
+    });
+
+    it('Area tag have not href and alt attributes should not result in an error', function(){
+        var code = '<area>';
+        var messages = HTMLHint.verify(code, ruleOptions);
+        expect(messages.length).to.be(0);
+    });
+
+    it('Area[href] tag have not alt attribute should result in an error', function(){
+        var code = '<area href="#test">';
+        var messages = HTMLHint.verify(code, ruleOptions);
+        expect(messages.length).to.be(1);
+        expect(messages[0].rule.id).to.be(ruldId);
+        expect(messages[0].line).to.be(1);
+        expect(messages[0].col).to.be(6);
+        expect(messages[0].type).to.be('warning');
+    });
+
+    it('Area[href] tag have empty alt attribute should result in an error', function(){
+        var code = '<area href="#test" alt="">';
+        var messages = HTMLHint.verify(code, ruleOptions);
+        expect(messages.length).to.be(1);
+        expect(messages[0].rule.id).to.be(ruldId);
+        expect(messages[0].line).to.be(1);
+        expect(messages[0].col).to.be(6);
+        expect(messages[0].type).to.be('warning');
+    });
+
+    it('Area[href] tag have non emtpy alt attribute should not result in an error', function(){
+        var code = '<area href="#test" alt="test">';
+        var messages = HTMLHint.verify(code, ruleOptions);
+        expect(messages.length).to.be(0);
+    });
+
+    it('Input tag have not type and alt attributes should not result in an error', function(){
+        var code = '<input>';
+        var messages = HTMLHint.verify(code, ruleOptions);
+        expect(messages.length).to.be(0);
+    });
+
+    it('Input[type="text"] tag have not alt attribute should not result in an error', function(){
+        var code = '<input type="text">';
+        var messages = HTMLHint.verify(code, ruleOptions);
+        expect(messages.length).to.be(0);
+    });
+
+    it('Input[type="image"] tag have not alt attribute should result in an error', function(){
+        var code = '<input type="image">';
+        var messages = HTMLHint.verify(code, ruleOptions);
+        expect(messages.length).to.be(1);
+        expect(messages[0].rule.id).to.be(ruldId);
+        expect(messages[0].line).to.be(1);
+        expect(messages[0].col).to.be(7);
+        expect(messages[0].type).to.be('warning');
+    });
+
+    it('Input[type="image"] tag have empty alt attribute should result in an error', function(){
+        var code = '<input type="image" alt="">';
+        var messages = HTMLHint.verify(code, ruleOptions);
+        expect(messages.length).to.be(1);
+        expect(messages[0].rule.id).to.be(ruldId);
+        expect(messages[0].line).to.be(1);
+        expect(messages[0].col).to.be(7);
+        expect(messages[0].type).to.be('warning');
+    });
+
+    it('Input[type="image"] tag have non emtpy alt attribute should not result in an error', function(){
+        var code = '<input type="image" alt="test">';
+        var messages = HTMLHint.verify(code, ruleOptions);
+        expect(messages.length).to.be(0);
+    });
+});