Last Updated: February 25, 2016
·
910
· tdebailleul

Sencha Touch 2: Semantic & ARIA roles

Sencha Touch doesn't always use the correct semantic HTML element for its components. For instance, buttons are not <button>s, they're <div>s. They should at least have the corresponding ARIA role applied. This is possible with this small override:

app/override/Button.js

Ext.define('App.override.Button', {
  extend: 'Ext.Button',

  xtype: 'button',

  initialize: function () {
    this.callParent(arguments);
    this.element.dom.setAttribute('role', 'button');
  }
});

All buttons should now have an ARIA role applied.
Feel free to do the same for other components.