[CLASSIC] Grid Paging Toolbar ARIA compatibility

[maciej.zabielski]

So... another chapter for fixing 1001 ARIA errors in Ext (That could have been easily avoided).

Paging toolbar 'Ext.toolbar.Paging' does not offer almost any ARIA compliance, violating some rules.

1) Buttons do not have ARIA labels (and they do not have any text!)
I have added an override to getPagingItems and added the same text as the one used for tooltips:

{ itemId: 'first',
tooltip: me.firstText,

//ADD ARIA LABEL
ariaLabel: me.firstText,
overflowText: me.firstText,
iconCls: Ext.baseCSSPrefix + 'tbar-page-first',
disabled: true,
handler: me.moveFirst,
scope: me
}

2) numberfield used, does not have a required attribute: aria-valuemax
It only has these two:
aria-valuemin="1"
aria-valuenow="1"

I have added an override for updateInfo method, and added this property

/**
* @private
*/
updateInfo: function() {
var me = this,
displayItem = me.child('#displayItem'),
inputItem = me.child('#inputItem'),
store = me.store,
pageData = me.getPageData(),
count, msg;

if (displayItem) {
count = store.getCount();

if (count === 0) {
msg = me.emptyMsg;
}
else {
msg = Ext.String.format(
me.displayMsg,
pageData.fromRecord,
pageData.toRecord,
pageData.total
);
}

displayItem.setText(msg);
inputItem.setMaxValue(pageData.pageCount === 0 ? 1 : pageData.pageCount);
}
},

I guess alternatively this could be used:

inputItem.clearInvalid();
inputItem.setMaxValue(pageData.pageCount);


or to avoid this violations at all, change this part in onLoad method


item = me.getInputItem();


if (item) {
item.clearInvalid();
item.setMaxValue(pageCount);
item.setDisabled(isEmpty).setValue(currPage);
}




@Sencha please fix this :)

[rakumar]

Hello Maciej,

We have registered this in our bug tracker under reference number EXTJS-28588, please be assured that this will be taken care of.

Regards,
Kumar
Sencha Support.