Add alt tag to Sencha image buttons for 508 Compliance

Here’s an override for Sencha v1.1.1 to allow for a label field to be added to a button that is applied as an alt tag to an image button.  It’s pretty cool.

Ext.override(Ext.Button, {
  label   : '',
  setIconClass: function(cls) {
      var me = this;

      if (me.rendered) {
          if (!me.iconEl && cls) {
              me.iconEl = me.el.createChild({
                  tag: 'img',
                  src: Ext.BLANK_IMAGE_URL,
                  cls: cls
              });
              me.iconEl.set({
                'alt'   : this.label
              });
              me.setIconAlign(me.iconAlign);
          }
          else if (me.iconEl && cls != me.iconCls) {
              if (cls) {
                  if (me.iconCls) {
                      me.iconEl.removeCls(me.iconCls);
                  }
                  me.iconEl.addCls(cls);
                  me.setIconAlign(me.iconAlign);
              }
              else {
                  me.setIconAlign(false);
                  me.iconEl.remove();
                  me.iconEl = null;
              }
          }
      }
      me.iconCls = cls;
      return me;
  },
  setIcon : function(icon) {
    var me = this;
    if (me.rendered) {
      if (!me.iconEl && icon) {
        me.iconEl = me.el.createChild({
          tag: 'img',
          src: Ext.BLANK_IMAGE_URL,
          style: 'background-image: ' + (icon ? 'url(' + icon + ')' : '')
        });
        me.iconEl.set({
          'alt'   : this.label
        });
        me.setIconAlign(me.iconAlign);
      } else if (me.iconEl && icon != me.icon) {
        if (icon) {
          me.iconEl.setStyle('background-image', icon ? 'url(' + icon + ')' : '');
          me.setIconAlign(me.iconAlign);
        }
        else {
          me.setIconAlign(false);
          me.iconEl.remove();
          me.iconEl = null;
        }
      }
    }
    me.icon = icon;
    return me;
  }
});

©2005-2017 Blog – Epiphany Digital is proudly powered by Badgers and Web Design is by Epiphany Digital
Entries (RSS) and Comments (RSS). 35 queries. 10.778 seconds.

Thank you for visiting this site. The web fairy will visit you in your sleep... you know, I was going somewhere with this, but it really doesn't have as much innocent charm as the tooth fairy, especially when I picture the web fairy as someone much like the Simpsons' Comic Book Guy but with wings. It's just not something I want.