View Full Version : kb handling for ARIA in template?

26 Jun 2013, 9:13 AM
I have a template for a data view that includes class=clickable and delegates the click handling.

Now I find I have wrecked the site for visually impaired users. Never knew I had any.

I'm going to try adding role="button" to the markup.

But my understanding from what I read is that I also need to enable keystrokes.

Anyone familiar with this situation?

28 Jun 2013, 1:18 PM
I'm not totally sure I follow what you're asking for, but would something like this work?

Ext.define('Image', {
extend: 'Ext.data.Model',
fields: [
{ name:'src', type:'string' },
{ name:'caption', type:'string' }

Ext.create('Ext.data.Store', {
model: 'Image',
data: [
{ src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing & Charts' },
{ src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data' },
{ src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme' },
{ src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned' }

var imageTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div style="margin-bottom: 10px;" class="thumb-wrap clickable">',
'<img src="{src}" />',

Ext.create('Ext.view.View', {
store: Ext.data.StoreManager.lookup('imagesStore'),
tpl: imageTpl,
itemSelector: 'div.thumb-wrap',
emptyText: 'No images available',
renderTo: Ext.getBody(),
listeners: {
itemclick: function (view, record, el, i, e) {