Merge pull request #1558 from /issues/1492@v2

checkbox, checkbox-group: improve JAWS readability

common.blocks/checkbox-group/checkbox-group.bemhtml

@@ -1,6 +1,13 @@
 block('checkbox-group')(
     tag()('span'),
 
+    attrs()(function() {
+        return {
+            role : 'group',
+            'aria-label' : '.'
+        };
+    }),
+
     js()(true),
 
     mix()([{ block : 'control-group' }]),

common.blocks/checkbox-group/checkbox-group.bh.js

@@ -3,6 +3,10 @@ module.exports = function(bh) {
     bh.match('checkbox-group', function(ctx, json) {
         ctx
             .tag('span')
+            .attrs({
+                role : 'group',
+                'aria-label' : '.'
+            })
             .js(true)
             .mix({ block : 'control-group' });
 

common.blocks/checkbox-group/checkbox-group.tmpl-specs/10-no_type_disabled_item.html

@@ -1 +1,10 @@
-<span class="checkbox-group checkbox-group_theme_islands checkbox-group_size_m control-group i-bem" data-bem="{&quot;checkbox-group&quot;:{}}"><label class="checkbox checkbox_theme_islands checkbox_size_m i-bem" data-bem="{&quot;checkbox&quot;:{}}"><span class="checkbox__box"><input class="checkbox__control" type="checkbox" autocomplete="off" name="default" value="1"/></span>first</label><br/><label class="checkbox checkbox_theme_islands checkbox_size_m checkbox_checked checkbox_disabled i-bem" data-bem="{&quot;checkbox&quot;:{}}"><span class="checkbox__box"><input class="checkbox__control" type="checkbox" autocomplete="off" name="default" value="3" checked="checked" disabled="disabled"/></span>third</label></span>
+<span class="checkbox-group checkbox-group_theme_islands checkbox-group_size_m control-group i-bem" role="group" aria-label="." data-bem="{&quot;checkbox-group&quot;:{}}">
+    <label class="checkbox checkbox_theme_islands checkbox_size_m i-bem" data-bem="{&quot;checkbox&quot;:{}}">
+        <span class="checkbox__box"><input class="checkbox__control" type="checkbox" autocomplete="off" name="default" value="1"/></span>
+        <span aria-hidden="true" class="checkbox__text">first</span>
+    </label><br/>
+    <label class="checkbox checkbox_theme_islands checkbox_size_m checkbox_checked checkbox_disabled i-bem" data-bem="{&quot;checkbox&quot;:{}}">
+        <span class="checkbox__box"><input class="checkbox__control" type="checkbox" autocomplete="off" name="default" value="3" checked="checked" disabled="disabled"/></span>
+        <span aria-hidden="true" class="checkbox__text">third</span>
+    </label>
+</span>

common.blocks/checkbox-group/checkbox-group.tmpl-specs/20-type_button_disabled_group.html

@@ -1 +1,10 @@
-<span class="checkbox-group checkbox-group_type_button checkbox-group_disabled control-group i-bem" data-bem="{&quot;checkbox-group&quot;:{}}"><label class="checkbox checkbox_type_button checkbox_disabled i-bem" data-bem="{&quot;checkbox&quot;:{}}"><button class="button button_togglable_check button_disabled button__control i-bem" aria-pressed="false" data-bem="{&quot;button&quot;:{}}" role="button" type="button" disabled="disabled"><span class="button__text">first</span></button><input class="checkbox__control" type="checkbox" autocomplete="off" disabled="disabled"/></label><label class="checkbox checkbox_type_button checkbox_disabled i-bem" data-bem="{&quot;checkbox&quot;:{}}"><button class="button button_togglable_check button_disabled button__control i-bem" aria-pressed="false" data-bem="{&quot;button&quot;:{}}" role="button" type="button" disabled="disabled"><i aria-hidden="true" class="icon icon_social_vk"></i><span class="button__text">VK</span></button><input class="checkbox__control" type="checkbox" autocomplete="off" disabled="disabled"/></label></span>
+<span class="checkbox-group checkbox-group_type_button checkbox-group_disabled control-group i-bem" role="group" aria-label="." data-bem="{&quot;checkbox-group&quot;:{}}">
+    <label class="checkbox checkbox_type_button checkbox_disabled i-bem" data-bem="{&quot;checkbox&quot;:{}}">
+        <button class="button button_togglable_check button_disabled button__control i-bem" role="button" type="button" disabled="disabled" aria-pressed="false" data-bem="{&quot;button&quot;:{}}"><span class="button__text">first</span></button>
+        <input class="checkbox__control" type="checkbox" autocomplete="off" disabled="disabled"/>
+    </label>
+    <label class="checkbox checkbox_type_button checkbox_disabled i-bem" data-bem="{&quot;checkbox&quot;:{}}">
+        <button class="button button_togglable_check button_disabled button__control i-bem" role="button" type="button" disabled="disabled" aria-pressed="false" data-bem="{&quot;button&quot;:{}}"><i class="icon icon_social_vk" aria-hidden="true"></i><span class="button__text">VK</span></button>
+        <input class="checkbox__control" type="checkbox" autocomplete="off" disabled="disabled"/>
+    </label>
+</span>

common.blocks/checkbox-group/checkbox-group.tmpl-specs/30-empty.html

@@ -1 +1,3 @@
-<span class="checkbox-group control-group i-bem" data-bem="{&quot;checkbox-group&quot;:{}}"><label class="checkbox checkbox_checked i-bem" data-bem="{&quot;checkbox&quot;:{}}"><span class="checkbox__box"><input class="checkbox__control" type="checkbox" autocomplete="off" checked="checked" value="1"/></span></label></span>
+<span class="checkbox-group control-group i-bem" role="group" aria-label="." data-bem="{&quot;checkbox-group&quot;:{}}">
+    <label class="checkbox checkbox_checked i-bem" data-bem="{&quot;checkbox&quot;:{}}"><span class="checkbox__box"><input class="checkbox__control" type="checkbox" autocomplete="off" value="1" checked="checked"/></span></label>
+</span>

common.blocks/checkbox/__text/checkbox__text.bemhtml

@@ -0,0 +1,6 @@
+block('checkbox').elem('text')(
+    tag()('span'),
+    attrs()(function() {
+        return { 'aria-hidden' : true };
+    })
+);

common.blocks/checkbox/__text/checkbox__text.bh.js

@@ -0,0 +1,7 @@
+module.exports = function(bh) {
+    bh.match('checkbox__text', function(ctx) {
+        ctx
+            .tag('span')
+            .attr('aria-hidden', true);
+    });
+};

common.blocks/checkbox/checkbox.bemhtml

@@ -18,7 +18,10 @@ block('checkbox')(
                     val : ctx.val
                 }
             },
-            ctx.text
+            ctx.text && {
+                elem : 'text',
+                content : ctx.text
+            }
         ];
     })
 );

common.blocks/checkbox/checkbox.bh.js

@@ -14,7 +14,10 @@ module.exports = function(bh) {
                         val : json.val
                     }
                 },
-                json.text
+                json.text && {
+                    elem : 'text',
+                    content : json.text
+                }
             ]);
     });
 

common.blocks/checkbox/checkbox.deps.js

@@ -2,7 +2,7 @@
     mustDeps : { block : 'i-bem', elems : 'dom' },
     shouldDeps : [
         {
-            elems : ['box', 'control'],
+            elems : ['box', 'control', 'text'],
             mods : { disabled : true, focused : true, checked : true }
         },
         { block : 'jquery', elem : 'event', mods : { type : 'pointer' } },

common.blocks/checkbox/checkbox.tmpl-specs/10-default.html

@@ -1 +1,4 @@
-<label class="checkbox checkbox_checked checkbox_disabled i-bem" data-bem="{&quot;checkbox&quot;:{}}"><span class="checkbox__box"><input class="checkbox__control" type="checkbox" autocomplete="off" name="checkbox-name" value="checkbox-val" checked="checked" disabled="disabled"/></span>checkbox-text</label>
+<label class="checkbox checkbox_checked checkbox_disabled i-bem" data-bem="{&quot;checkbox&quot;:{}}">
+    <span class="checkbox__box"><input class="checkbox__control" type="checkbox" autocomplete="off" name="checkbox-name" value="checkbox-val" checked="checked" disabled="disabled"/></span>
+    <span aria-hidden="true" class="checkbox__text">checkbox-text</span>
+</label>

common.blocks/checkbox/checkbox.tmpl-specs/30-empty.html

@@ -1 +1,3 @@
-<label class="checkbox i-bem" data-bem="{&quot;checkbox&quot;:{}}"><span class="checkbox__box"><input class="checkbox__control" type="checkbox" autocomplete="off"/></span></label>
+<label class="checkbox i-bem" data-bem="{&quot;checkbox&quot;:{}}">
+    <span class="checkbox__box"><input class="checkbox__control" type="checkbox" autocomplete="off"/></span>
+</label>