PDA

View Full Version : kb handling for ARIA in template?



stewardsencha
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?

slemmon
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', {
id:'imagesStore',
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}" />',
'<br/><span>{caption}</span>',
'</div>',
'</tpl>'
);


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) {
console.log(e.getTarget('.clickable'));
}
}
});