Merge pull request #1557 from /issues/1512@v2

radio, radio-group: improve JAWS readability
bem · Aug 10, 2015 · 7091daf · 7091daf
2 parents cf5ec16 + 5bd2f1c
commit 7091daf
Show file tree

Hide file tree

Showing 12 changed files with 64 additions and 6 deletions.
diff --git a/common.blocks/radio-group/radio-group.bemhtml b/common.blocks/radio-group/radio-group.bemhtml
@@ -1,6 +1,13 @@
 block('radio-group')(
     tag()('span'),
 
+    attrs()(function() {
+        return {
+            role : 'radiogroup',
+            'aria-label' : '.'
+        };
+    }),
+
     js()(true),
 
     mix()([{ block : 'control-group' }]),

diff --git a/common.blocks/radio-group/radio-group.bh.js b/common.blocks/radio-group/radio-group.bh.js
@@ -3,6 +3,10 @@ module.exports = function(bh) {
     bh.match('radio-group', function(ctx, json) {
         ctx
             .tag('span')
+            .attrs({
+                role : 'radiogroup',
+                'aria-label' : '.'
+            })
             .js(true)
             .mix({ block : 'control-group' });
 

diff --git a/common.blocks/radio-group/radio-group.tmpl-specs/10-no_type_disabled_item.html b/common.blocks/radio-group/radio-group.tmpl-specs/10-no_type_disabled_item.html
@@ -1 +1,11 @@
-<span class="radio-group radio-group_theme_islands radio-group_size_m control-group i-bem" data-bem="{&quot;radio-group&quot;:{}}"><label class="radio radio_theme_islands radio_size_m i-bem" data-bem="{&quot;radio&quot;:{}}"><span class="radio__box"><input class="radio__control" type="radio" autocomplete="off" name="default" value="1"/></span>first</label><br/><label class="radio radio_theme_islands radio_size_m radio_checked radio_disabled i-bem" data-bem="{&quot;radio&quot;:{}}"><span class="radio__box"><input class="radio__control" type="radio" autocomplete="off" name="default" value="3" checked="checked" disabled="disabled"/></span>third</label></span>
+<span class="radio-group radio-group_theme_islands radio-group_size_m control-group i-bem" role="radiogroup" aria-label="." data-bem="{&quot;radio-group&quot;:{}}">
+    <label class="radio radio_theme_islands radio_size_m i-bem" data-bem="{&quot;radio&quot;:{}}">
+        <span class="radio__box"><input class="radio__control" type="radio" autocomplete="off" name="default" value="1"/></span>
+        <span aria-hidden="true" class="radio__text">first</span>
+    </label>
+    <br/>
+    <label class="radio radio_theme_islands radio_size_m radio_checked radio_disabled i-bem" data-bem="{&quot;radio&quot;:{}}">
+        <span class="radio__box"><input class="radio__control" type="radio" autocomplete="off" name="default" value="3" checked="checked" disabled="disabled"/></span>
+        <span aria-hidden="true" class="radio__text">third</span>
+    </label>
+</span>
diff --git a/common.blocks/radio-group/radio-group.tmpl-specs/20-type_button_disabled_group.html b/common.blocks/radio-group/radio-group.tmpl-specs/20-type_button_disabled_group.html
@@ -1 +1,10 @@
-<span class="radio-group radio-group_type_button radio-group_disabled control-group i-bem" data-bem="{&quot;radio-group&quot;:{}}"><label class="radio radio_type_button radio_disabled i-bem" data-bem="{&quot;radio&quot;:{}}"><button class="button button_togglable_radio 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="radio__control" type="radio" autocomplete="off" name="radio-group_type_button" value="1" disabled="disabled"/></label><label class="radio radio_type_button radio_disabled i-bem" data-bem="{&quot;radio&quot;:{}}"><button class="button button_togglable_radio 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="radio__control" type="radio" autocomplete="off" name="radio-group_type_button" value="2" disabled="disabled"/></label></span>
+<span class="radio-group radio-group_type_button radio-group_disabled control-group i-bem" role="radiogroup" aria-label="." data-bem="{&quot;radio-group&quot;:{}}">
+    <label class="radio radio_type_button radio_disabled i-bem" data-bem="{&quot;radio&quot;:{}}">
+        <button class="button button_togglable_radio 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="radio__control" type="radio" autocomplete="off" name="radio-group_type_button" value="1" disabled="disabled"/>
+    </label>
+    <label class="radio radio_type_button radio_disabled i-bem" data-bem="{&quot;radio&quot;:{}}">
+        <button class="button button_togglable_radio 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="radio__control" type="radio" autocomplete="off" name="radio-group_type_button" value="2" disabled="disabled"/>
+    </label>
+</span>
diff --git a/common.blocks/radio/__text/radio__text.bemhtml b/common.blocks/radio/__text/radio__text.bemhtml
@@ -0,0 +1,6 @@
+block('radio').elem('text')(
+    tag()('span'),
+    attrs()(function() {
+        return { 'aria-hidden' : true };
+    })
+);
diff --git a/common.blocks/radio/__text/radio__text.bh.js b/common.blocks/radio/__text/radio__text.bh.js
@@ -0,0 +1,7 @@
+module.exports = function(bh) {
+    bh.match('radio__text', function(ctx) {
+        ctx
+            .tag('span')
+            .attr('aria-hidden', true);
+    });
+};
diff --git a/common.blocks/radio/radio.bemhtml b/common.blocks/radio/radio.bemhtml
@@ -14,7 +14,10 @@ block('radio')(
                     val : ctx.val
                 }
             },
-            ctx.text
+            ctx.text && {
+                elem : 'text',
+                content : ctx.text
+            }
         ];
     })
 );
diff --git a/common.blocks/radio/radio.bh.js b/common.blocks/radio/radio.bh.js
@@ -15,7 +15,10 @@ module.exports = function(bh) {
                         val : json.val
                     }
                 },
-                json.text
+                json.text && {
+                    elem : 'text',
+                    content : json.text
+                }
             ]);
     });
 

diff --git a/common.blocks/radio/radio.deps.js b/common.blocks/radio/radio.deps.js
@@ -2,7 +2,7 @@
     mustDeps : { block : 'i-bem', elems : ['dom'] },
     shouldDeps : [
         {
-            elems : ['box', 'control'],
+            elems : ['box', 'control', 'text'],
             mods : { disabled : true, checked : true, focused : true }
         },
         { block : 'jquery', elem : 'event', mods : { type : 'pointer' } },

diff --git a/common.blocks/radio/radio.tmpl-specs/10-checked_disabled.html b/common.blocks/radio/radio.tmpl-specs/10-checked_disabled.html
@@ -1 +1,4 @@
-<label class="radio radio_checked radio_disabled i-bem" data-bem="{&quot;radio&quot;:{}}"><span class="radio__box"><input class="radio__control" type="radio" autocomplete="off" name="radio" value="1" checked="checked" disabled="disabled"/></span>radio</label>
+<label class="radio radio_checked radio_disabled i-bem" data-bem="{&quot;radio&quot;:{}}">
+    <span class="radio__box"><input class="radio__control" type="radio" autocomplete="off" name="radio" value="1" checked="checked" disabled="disabled"/></span>
+    <span aria-hidden="true" class="radio__text">radio</span>
+</label>
diff --git a/common.blocks/radio/radio.tmpl-specs/30-empty.bemjson.js b/common.blocks/radio/radio.tmpl-specs/30-empty.bemjson.js
@@ -0,0 +1,3 @@
+({
+    block : 'radio'
+})
diff --git a/common.blocks/radio/radio.tmpl-specs/30-empty.html b/common.blocks/radio/radio.tmpl-specs/30-empty.html
@@ -0,0 +1,3 @@
+<label class="radio i-bem" data-bem="{&quot;radio&quot;:{}}">
+    <span class="radio__box"><input class="radio__control" type="radio" autocomplete="off"/></span>
+</label>