PDA

View Full Version : Anywhere specific for logging Accessibility bugs ?



zz9pa
21 Jan 2014, 3:44 AM
I'm using 4.2.2 - followed instructions for adding ARIA accessibility - but getting a javascript error around line 1700 of "ext-aria-dev.js":



if (me.closable) {
toolBtn = me.down('tool[type=close]');
me.ariaUpdate(toolBtn.getEl(), { 'aria-label': me.closeText });
...
}


with toolBtn being null - this is searching for the button on a "closable" tab page in a tab panel.

Is this a known issue ?

Malte123
21 Jan 2014, 6:29 AM
can you post the Error-Message here please ...

I think it also could be a typo ...

Also maybe it would be helpful if you try to show a little bit more logic of your code well formated (use Preview Post Button please)



// code within afterRender
if (me.closable) {
toolBtn = me.down('tool[type=close]');
me.ariaUpdate(toolBtn.getEl(), {
'aria-label': me.closeText
});
//followed by logic ...


for example :-)

zz9pa
21 Jan 2014, 6:42 AM
TypeError: toolBtn is null
http://localhost:25035/site/accessibility/ext-aria/build/ext-aria-dev.js
Line 1703


me.ariaUpdate(toolBtn.getEl(), { 'aria-label': me.closeText });


Is what is given in the firebug console..


In Chrome - I also get the stack trace :

Uncaught TypeError: Cannot call method 'getEl' of null ext-aria-dev.js:1703
Ext.define.ariaGetRenderAttributes ext-aria-dev.js:1703
Ext.define.onBoxReady ext-aria-dev.js:1072
Base.implement.callParent ext-all-dev.js:7387
Ext.define.onBoxReady ext-aria-dev.js:1520
Base.implement.callParent ext-all-dev.js:7387
Ext.define.onBoxReady ext-all-dev.js:80726
Ext.define.afterFirstLayout ext-all-dev.js:41971
Ext.define.afterComponentLayout ext-all-dev.js:47057
Base.implement.callParent ext-all-dev.js:7387
Ext.define.afterComponentLayout ext-all-dev.js:50669
Base.implement.callParent ext-all-dev.js:7387
Ext.define.afterComponentLayout ext-all-dev.js:56554
Ext.define.notifyOwner ext-all-dev.js:55682
Ext.define.callLayout ext-all-dev.js:172162
Ext.define.flushLayouts ext-all-dev.js:172333
Ext.define.runComplete ext-all-dev.js:172887
callOverrideParent ext-all-dev.js:38
Base.implement.callParent ext-all-dev.js:7387
Ext.override.runComplete ext-all-dev.js:43546
Ext.define.run ext-all-dev.js:172868
Ext.define.statics.flushLayouts ext-all-dev.js:43554
Ext.define.statics.resumeLayouts ext-all-dev.js:43570
Ext.resumeLayouts ext-all-dev.js:47601
Ext.define.setActiveTab ext-all-dev.js:185192
Base.implement.callParent ext-all-dev.js:7387
Ext.define.setActiveTab ext-aria-dev.js:4195
(anonymous function) commonSetup.js:691 <<---- My code
Ext.define.runCallback ext-all-dev.js:118699
Ext.define.onData ext-all-dev.js:118726
Ext.apply.callback ext-all-dev.js:12671
Ext.define.onComplete ext-all-dev.js:49461
Ext.define.onStateChange ext-all-dev.js:49389
(anonymous function) ext-all-dev.js:3754



Get the point about posting more code - didn't realise it was all going to bunch up - need to check in the preview as you suggest...

zz9pa
21 Jan 2014, 8:05 AM
I'm wondering if I'm doing something wrong - because I'm getting a few of these - eg:


Line 2988 -


middleButton = me.middleBtnEl.down('[role=button]');
me.ariaUpdate(me.eventEl, {
'aria-labelledby': middleButton.id
});


middleButton is null


Also tip=null in updateErrorTip/hideErrorTip/showErrorTip

nohuhu
21 Jan 2014, 10:09 AM
zz9pa,

There is no need to call ariaUpdate(), just set the ariaLabel property on the component:



{
xtype: 'button',
ariaLabel: 'Accessible button',
text: 'A button'
}


Regards,
Alex.

zz9pa
21 Jan 2014, 10:36 AM
I'm not calling ariaUpdate - this is code from the ext-aria-dev.js file - which is sencha code.

In fact - i'm not calling any aria specific code - just including the required .css and ext-aria-dev.js and hoping ExtJS takes care of most of the rest (I realise there are a couple of issues in my app I will need to take care of after I get this sorted)

Malte123
21 Jan 2014, 12:10 PM
You can use fiddle - so we maybe can see the errors and play around

https://fiddle.sencha.com/#home

zz9pa
22 Jan 2014, 4:17 AM
That doesnt seem set up for ARIA/Accessibility..
I did try to follow the instructions to generate a test app using the instructions :
http://docs.sencha.com/extjs/4.2.2/#!/guide/accessibility


But - using 4.2.2 - I get an error doing the "sencha app build" :
[ERR]
[ERR] BUILD FAILED
[ERR] com.sencha.exceptions.ExProcess: phantomjs process exited with code 2
[ERR] at com.sencha.util.MethodInvoker$Arguments.invoke(MethodInvoke
[ERR] r.java:175)
[ERR]
[ERR] Total time: 16 seconds
[ERR] The following error occurred while executing this line:
D:\sencha\testAria\my-workspace\my-aria-app\.sencha\app\build-impl.xml:321: The following error occurred while executing this line:
D:\sencha\testAria\my-workspace\my-aria-app\.sencha\app\slice-impl.xml:208: The following error occurred while executing this line:
D:\sencha\testAria\my-workspace\my-aria-app\.sencha\app\slice-impl.xml:209: The following error occurred while executing this line:
D:\sencha\testAria\my-workspace\my-aria-app\.sencha\app\slice-impl.xml:80: com.sencha.exceptions.ExProcess: phantomjs process exited with code 2




If I change the theme back to "ext-theme-classic" - the command executes correctly...

nohuhu
22 Jan 2014, 10:10 AM
zz9pa,

I'm guessing but it looks like exit code 2 means "file not found" - there's something missing in the classpath, probably. Try running "sencha -debug app build testing" and look for the errors. Be prepared though, the output is *very* verbose...

Regards,
Alex.

jannic
22 Jan 2014, 11:06 AM
That doesnt seem set up for ARIA/Accessibility..
I did try to follow the instructions to generate a test app using the instructions :
http://docs.sencha.com/extjs/4.2.2/#!/guide/accessibility


But - using 4.2.2 - I get an error doing the "sencha app build" :


Does the error also contain the message?
TypeError: '''null''' is not an object (evaluating '''middleButton.id''')

Then it's probably a bug in Cmd. Had the same issue and just got a confirmation today from the support team. (btw, good performance of the support team: Mitchell had a lot of patience following the steps I described for reproducing the issue!)

For now, I work around the issue by skipping the slicer:


sencha config -p skip.slice=1 then app build

Malte123
22 Jan 2014, 3:44 PM
Don't forget to select a "best answer" .. I think it is jannic !

(and vote up every helpful answer - it is motivation)

:)

zz9pa
23 Jan 2014, 1:23 AM
Ok - using the

sencha config -p skip.slice=1 then app build

gets the test app built :)


If I edit the sample app/view/Main.js and add a "closable:true" - ie - it looks like :



{ closable:true, title: 'Center Tab 1' }


I get the same error I'm seeing in my app - so looks like a bug in the aria code ?

nohuhu
27 Jan 2014, 12:01 PM
zz9pa,

Not sure which sample app you are referring to; the demo app shipped with ARIA package doesn't have an app/view/Main.js file. Make sure you're using the aria-4.2.2 package on top of the extjs-4.2.2 framework, that is the latest supported option.

Regards,
Alex.

zz9pa
27 Jan 2014, 12:51 PM
The app I'm on about is just the default initial app created by "sencha cmd" as per the instructions in

http://docs.sencha.com/extjs/4.2.2/#!/guide/accessibility


j (http://docs.sencha.com/extjs/4.2.2/#!/guide/accessibility)ust follow that guide under "Building an Accessible Ext JS Application (http://docs.sencha.com/extjs/4.2.2/#!/guide/accessibility-section-building-an-accessible-ext-js-application)"
then change the tab page to be closable ...

nohuhu
27 Jan 2014, 4:17 PM
zz9pa,

Thanks for the explanations, I can reproduce the error now. I've opened a bug ticket: EXTJSIV-12143.

Regards,
Alex.