Accessibility issues on IE

[Isomorphic]

Good to hear you finally sorted that out.

Correct roles are already present on everything in 2.5 *for Firefox*. We have no plans to backport IE changes, as accessibility compliance technically only requires support for a specific browser and Firefox is by far the browser of choice for users who require accessibility features.

[chacomo]

You are right both issues are fixed.

I didn't download the nightly from the wrong place though (I don't know any other sources than your download page). I guess I have made a mistake in the environment setup.

Sorry and thanks for fixing the issues.

Is there a chance to get the fix with the missing Canvas roles into the 2.5 hotfix branch? It seems the ListGrid issue has been integrated to the hotfix branch, but the missing Canvas roles issue are only fixed in the 3.0 branch.

Best regards,
Manuel

[Isomorphic]

Both of us are confirmed fixed in 3.0. You may have downloaded a "nightly" from somewhere else - smartclient.com/builds is the right place.

[chacomo]

Hi Isomorphic,

1) Focus traversal with ListGrids
I have tested the latest nightly. The tab focus handling issue still persists.

2) Missing aria roles for Canvas objects on IE
You stated that you will also check on possible missing roles for IE.
Any updates here?

Best regards,
Manuel

[kk8322]

Hi Isomorphic,
any updates on the TAB - Focus issue in List grid. I am also facing this issue in IE6/8/9. Is it fixed in nightly build ? if so, can you please let me know which nightly build i have to use ?

P.S: Currently i am using SmartGWT 2.5.

[Isomorphic]

Thanks for the update. We see the problem and have made a change to address it. Please try the next nightly and let us know if you still see it.

[chacomo]

Hi Isomorphic,

sorry, for the late reply, but I haven't noticed your latest post.
I cannot find any email notification matching your response date. Is it possible that your post hasn't been notifed by email for some reason?

Anyway thanks a lot for your instant reaction, we appreciate it a lot.

The focus traversal with TAB is moving the focus out of the list grid now. But unfortunatelly the focus is only shortly set to the next element then it is automatically set to the following element.

You can easily reproduce it in the example which I have added to my initial post. You will notice that the focus is set to the "Show" button. The "Hide" button is skipped.

I have tested your changes with the 3.0 nightlies "2011-10-14" and "2011-10-26".

Best regards,
Manuel

[Isomorphic]

Ok we've made some changes which should improve behavior in IE.
Please try the next nightly (3.0) build - dated Oct 14th or greater and let us know if you continue to encounter problems

Thanks
Isomorphic Software

[Isomorphic]

We have an engineer working on this at the moment. We'll keep you posted!

[chacomo]

Hi Isomorphic,

are you going to fix the ListGrid focus traversal issue in screen reader mode on IE? A screen reader user cannot navigate within a UI containing a ListGrid.

I have tested it again on the latest nightly build (2011-10-11).

Best regards,
Manuel

[chacomo]

Hi Isomorphic,

thanks a lot for checking the missing role settings for Canvas objects on IE.

You are right, if I set the flag screenReader to true the flag ariaEnabled is true for IE 8 and IE 9. But I am referring to the liteAria flag setting. It is also true for IE8, which means that FormItem ARIA settings are never processed. I think FormItems definately should get aria roles and states.

isc.liteAria = isc.Browser.isIE && isc.Browser.version < 9;

// called after a FormItem is drawn
addContentRoles : function () {
   if (!isc.Canvas.ariaEnabled() || isc.liteAria) return;

   if (!this._canFocus() || !this.ariaRole) return;
   this.setAriaRole(this.ariaRole);

You also use the liteAria flag to prevent the setting of row states for
ListGrids and TreeGrids on IE 8. Your comment in the code says it is too expensive. Is the performance really unacceptable?

Regarding the tabIndex issue: I have tried the latest nightly,
but it seems it is still not possible to tab out of the list grid in screen reader mode on IE.

Best regards,
Manuel

[Isomorphic]

You've misread some of the code: IE8 and IE9 support don't differ if you call SC.setScreenReaderMode(true). The only difference is that in IE9, more ARIA features are enabled *without* this call.

As far as the tabIndex issue, try a nightly of 2.5.x (smartclient.com/builds), this should be resolved.

We're checking on possible missing roles for IE.

[chacomo]

Hi Isomporhic,

I want to report two issues related to accessibility. I am using SmartGWT 2.5 and IE9.

In the Screenreader.js JavaDoc you recommend to use Firefox in combination with JAWS or NVDA screen readers. Unfortunatelly almost all our customers are using Internet Explorer and have strict internal regulations which disallow any other browsers.

I want to report two issues which can be reproduced with IE9. Accessibility support for IE 9 is enabled in the Screenreader.js according to the two flags: ariaEnabled an liteAria. Due to these flags there is only limited support for IE 8, which is not good for us as almost all our customers are still using this browser version. Therefore we have already implemented some accessibility related functionality for IE 8 ourselves.

You should be able to reproduce the issues with the following sample code on IE 9:

     
public void onModuleLoad() {  
         SC.setScreenReaderMode(true);
 		 
         Window window = new Window();
         window.setAutoCenter(true);
         window.setSize("500", "400");
         window.setOverflow(Overflow.VISIBLE);		
         window.setIsModal(true);
 		
         Canvas canvas = new Canvas();  
         final ListGrid countryGrid = new ListGrid();  
         countryGrid.setWidth(500);  
         countryGrid.setHeight(224);  
         countryGrid.setShowAllRecords(true);  
   
         ListGridField nameField = new ListGridField("countryName", "Country");  
         countryGrid.setFields(nameField);  
         countryGrid.setCanResizeFields(true); 
         
         ListGridRecord[] result = new ListGridRecord[2];
         result[0] = new ListGridRecord();
         result[0].setAttribute("countryName", "England");
         result[1] = new ListGridRecord();
         result[1].setAttribute("countryName", "France");	         
         countryGrid.setData(result);  
         canvas.addChild(countryGrid);  
   
         IButton hideCapital = new IButton("Hide");  
         hideCapital.setLeft(0);  
         hideCapital.setTop(240);  
         hideCapital.addClickHandler(new ClickHandler() {	  
             public void onClick(ClickEvent event) {  
                 countryGrid.hideField("countryName");  
             }  
         });  
         canvas.addChild(hideCapital);  
   
         IButton showCapitals = new IButton("Show");  
         showCapitals.setLeft(120);  
         showCapitals.setTop(240);  
         showCapitals.addClickHandler(new ClickHandler() {  
             public void onClick(ClickEvent event) {  
                 countryGrid.showField("countryName");  
             }  
         });  
         canvas.addChild(showCapitals);
         window.addChild(canvas);
         window.show();
     }

1) No focus traversal with ListGrid

- Put the focus into the ListGrid
- Press tab to traverse focus to the first button

No traversal. The focus remains on the ListGrid.
It seems to be related to the new method putNativeFocusInRow in GridBody.

2) No initial ariaRole or ariaState is set to instances of Canvas

You can check the defined aria role of the buttons with the Web Accessibility Toolbar for IE.

It seems that no role is set for Canvas objects as it is entirely limited to Firefox in your code. See Canvas getTagStart():

var isFF3 = isc.Browser.isMoz && isc.Browser.geckoVersion >= 20080529;

// use two DIVs: an inner one to hold the content, and an outer one for clipping       
        var output = isc.StringBuffer.concat(
       
            // the clipDiv           
            "<div id='" , this._getClipDivDOMID(),
            "' eventProxy=" , eventProxy,
            (isFF3 && this.ariaRole ? " role='" + this.ariaRole + "'" : ""),
            (isFF3 && this.ariaState ? this.getAriaStateAttributes() : ""),
            (this.className ? " class='" + this.className + "'" : ""),
            focusString,

Best regards,
Manuel