button: fix wrong definition of real button

bem · Jul 1, 2015 · 0cf0e98 · 0cf0e98
1 parent 0a060e7
commit 0cf0e98
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 15 deletions.
diff --git a/common.blocks/button/button.bemhtml b/common.blocks/button/button.bemhtml
@@ -1,4 +1,11 @@
 block('button')(
+    def()(function() {
+        var isRealButton = (['button', 'input'].indexOf(apply('tag')) >= 0) &&
+                (!this.mods.type || this.mods.type === 'submit');
+
+        applyNext({ _isRealButton : isRealButton });
+    }),
+
     tag()(function() {
         return this.ctx.tag || 'button';
     }),
@@ -11,18 +18,22 @@ block('button')(
     attrs()(
         // Common attributes
         function() {
-            var ctx = this.ctx;
-
-            return {
-                role : 'button',
-                tabindex : ctx.tabIndex,
-                id : ctx.id,
-                title : ctx.title
-            };
+            var ctx = this.ctx,
+                attrs = {
+                    role : 'button',
+                    tabindex : ctx.tabIndex,
+                    id : ctx.id,
+                    title : ctx.title
+                };
+
+            this.mods.disabled &&
+                !this._isRealButton && (attrs['aria-disabled'] = ctx.mods.disabled);
+
+            return attrs;
         },
 
         // Attributes for button variant
-        match(function() { return !this.mods.type || this.mods.type === 'submit'; })(function() {
+        match(function() { return this._isRealButton; })(function() {
             var ctx = this.ctx,
                 attrs = {
                     type : this.mods.type || 'button',

diff --git a/common.blocks/button/button.bh.js b/common.blocks/button/button.bh.js
@@ -1,12 +1,14 @@
 module.exports = function(bh) {
 
     bh.match('button', function(ctx, json) {
+        ctx.tag(json.tag || 'button'); // NOTE: need to predefine tag
+
         var modType = ctx.mod('type'),
-            isRealButton = !modType || modType === 'submit';
+            isRealButton = (['button', 'input'].indexOf(ctx.tag()) >= 0) &&
+                (!modType || modType === 'submit');
 
         ctx
             .tParam('_button', json)
-            .tag(json.tag || 'button')
             .js(true)
             .attrs({
                 role : 'button',
@@ -19,9 +21,9 @@ module.exports = function(bh) {
             })
             .mix({ elem : 'control' }); // NOTE: satisfy interface of `control`
 
-        isRealButton &&
-            ctx.mod('disabled') &&
-            ctx.attr('disabled', 'disabled');
+        if(ctx.mod('disabled')) {
+            isRealButton? ctx.attr('disabled', 'disabled') : ctx.attr('aria-disabled', true);
+        }
 
         var content = ctx.content();
         if(typeof content === 'undefined') {

diff --git a/common.blocks/button/button.tmpl-specs/30-custom_tag.html b/common.blocks/button/button.tmpl-specs/30-custom_tag.html
@@ -1 +1 @@
-<div class="button button__control i-bem" data-bem="{&quot;button&quot;:{}}" role="button" type="button"></div>
+<div class="button button__control i-bem" data-bem="{&quot;button&quot;:{}}" role="button"></div>
diff --git a/common.blocks/button/button.tmpl-specs/35-custom_tag_disabled.bemjson.js b/common.blocks/button/button.tmpl-specs/35-custom_tag_disabled.bemjson.js
@@ -0,0 +1,5 @@
+({
+    block : 'button',
+    mods : { disabled : true },
+    tag : 'div'
+});
diff --git a/common.blocks/button/button.tmpl-specs/35-custom_tag_disabled.html b/common.blocks/button/button.tmpl-specs/35-custom_tag_disabled.html
@@ -0,0 +1 @@
+<div class="button button_disabled button__control i-bem" role="button" aria-disabled="true" data-bem="{&quot;button&quot;:{}}"></div>