PDA

View Full Version : [CLASSIC] Grid Paging Toolbar ARIA compatibility



maciej.zabielski
11 Jul 2019, 6:13 AM
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
8 Aug 2019, 9:39 AM
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.