image: a11y-attributes + content + examples

bem · Dec 12, 2014 · d4a34b4 · d4a34b4
1 parent 5012c0a
commit d4a34b4
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 36 deletions.
diff --git a/common.blocks/image/image.bemhtml b/common.blocks/image/image.bemhtml
@@ -1,13 +1,20 @@
 block('image')(
-    tag()('img'),
-    attrs()(function() {
-        var ctx = this.ctx;
-        return {
-            src : ctx.url,
-            width : ctx.width,
-            height : ctx.height,
-            alt : ctx.alt,
-            title : ctx.title
-        };
-    })
+    attrs()({ role : 'img' }),
+
+    tag()('span'),
+
+    match(function() { return typeof this.ctx.content === 'undefined'; })(
+        tag()('img'),
+        attrs()(function() {
+            var ctx = this.ctx;
+            return this.extend(applyNext(),
+                {
+                    src : ctx.url,
+                    width : ctx.width,
+                    height : ctx.height,
+                    alt : ctx.alt,
+                    title : ctx.title
+                });
+        })
+    )
 );
diff --git a/common.blocks/image/image.bh.js b/common.blocks/image/image.bh.js
@@ -1,13 +1,19 @@
 module.exports = function(bh) {
     bh.match('image', function(ctx, json) {
-        ctx
-            .tag('img')
-            .attrs({
-                src : json.url,
-                width : json.width,
-                height : json.height,
-                alt : json.alt,
-                title : json.title
-            });
+        ctx.attr('role', 'img');
+
+        if(typeof json.content !== 'undefined') {
+            ctx.tag('span');
+        } else {
+            ctx
+                .tag('img')
+                .attrs({
+                    src : json.url,
+                    width : json.width,
+                    height : json.height,
+                    alt : json.alt,
+                    title : json.title
+                });
+        }
     });
 };
diff --git a/common.blocks/image/image.tests/simple.bemjson.js b/common.blocks/image/image.tests/simple.bemjson.js
@@ -9,25 +9,41 @@
         { tag : 'h2', content : 'image' },
         {
             block : 'test',
-            content : {
-                block : 'image',
-                url : '../../../test.blocks/icon/_action/download.svg',
-                alt : 'Download',
-                title : 'Download image'
-            }
+            content : [
+                'Source: ',
+                {
+                    block : 'image',
+                    url : '../../../test.blocks/image/github.svg',
+                    alt : 'Download',
+                    title : 'Download image'
+                }
+            ]
         },
         { tag : 'br' },
-        { tag : 'h3', content : 'with specified size' },
         {
             block : 'test',
-            content : {
-                block : 'image',
-                url : '../../../test.blocks/icon/_action/download.svg',
-                width : 50,
-                height : 50,
-                alt : 'Download',
-                title : 'Download image'
-            }
+            content : [
+                'Specified size: ',
+                {
+                    block : 'image',
+                    url : '../../../test.blocks/image/github.svg',
+                    width : 53,
+                    height : 24,
+                    alt : 'GitHub',
+                    title : 'GitHub logo'
+                }
+            ]
+        },
+        { tag : 'br' },
+        {
+            block : 'test',
+            content : [
+                'Inline content: ',
+                {
+                    block : 'image',
+                    content : '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M1 13v2h14v-2h-14zm13-7h-3v-5h-6v5.031l-3-.031 6 6 6-6z"/></svg>'
+                }
+            ]
         }
     ]
 });
diff --git a/common.blocks/image/image.tmpl-specs/10-simple.html b/common.blocks/image/image.tmpl-specs/10-simple.html
@@ -1 +1 @@
-<img class="image" src="#" width="16" height="16" alt="Download" title="Download image"/>
+<img class="image" role="img" src="#" width="16" height="16" alt="Download" title="Download image"/>
diff --git a/common.blocks/image/image.tmpl-specs/20-content.bemjson.js b/common.blocks/image/image.tmpl-specs/20-content.bemjson.js
@@ -0,0 +1,6 @@
+({
+    block : 'image',
+    width : '16',
+    height : '16',
+    content : '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"></svg>'
+})
diff --git a/common.blocks/image/image.tmpl-specs/20-content.html b/common.blocks/image/image.tmpl-specs/20-content.html
@@ -0,0 +1 @@
+<div class="image" role="img"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"></svg></div>
diff --git a/test.blocks/image/github.svg b/test.blocks/image/github.svg