Accessibility bug with invalid form-items?

[hohwille]

I am setting screen reader mode as the first thing in my entry point:
SC.setScreenReaderMode(true);

I have DynamicForms with FormItems that have validators. If validation fails, a validation error icon (red cross) is showing up. The tooltip of this error icon tells the reason of the error (message from the validator that failed).

Problem:
When I tab into the invalid field, it is read as following:
Status* combo box collapsed invalid entry editable has auto complete

The bug is that the validation failure is NOT read.

Analysis:
The relevant HTML produced by SmartGwt is:
<td width="16">
<img align="TEXTTOP" width="16" height="16" border="0" suppress="TRUE" aria-label="This field may not be blank." $9a="isc_errorIcon" $89="isc_ComboBoxItem_2" style="vertical-align:top;margin-top:0px;margin-bottom:0px;" id="isc_DB" src="http://localhost:8080/portal-app/portal/sc/skins/Enterprise/images/actions/exclamation.png" role="presentation">
</td>
<td class="normalError" style="margin:0px;border:0px;padding:0px;background-image:none;background-color:transparent;-webkit-box-shadow:none;box-shadow:none;">&nbsp;
</td>
</tr>
</tbody>
</table>
</td>
<td valign="middle" style="margin:0px;border:0px;padding:0px;background-image:none;background-color:transparent;-webkit-box-shadow:none;box-shadow:none;">
<table cellspacing="0" cellpadding="0" class="" style="cursor:default;WIDTH:297px;margin:0px;border:0px;padding:0px;background-image:none;background-color:transparent;-webkit-box-shadow:none;box-shadow:none;" $9a="$9f" $89="isc_ComboBoxItem_2" id="isc_CG" role="presentation">
<tbody>
<tr>
<td style="white-space:nowrap;">
<input type="TEXT" tabindex="1707" style="WIDTH:274px;HEIGHT:16px;-moz-user-focus:normal;" class="selectItemTextError" autocomplete="OFF" oninput="isc_ComboBoxItem_2.$43g()" spellcheck="true" $9a="$9b" $89="isc_ComboBoxItem_2" handlenativeevents="false" id="isc_AC" name="Status" role="combobox" aria-label="Status*" aria-autocomplete="list" aria-invalid="true" aria-describedby="isc_DB">
</td>
<td style="" class="" id="isc_CI">
<span handlenativeevents="false" $9a="picker" $89="isc_ComboBoxItem_2" tabindex="-1" style="margin-left:0px;-moz-user-focus:ignore;cursor:pointer" id="isc_CJ" role="button">
<img align="TEXTTOP" width="18" height="22" border="0" suppress="TRUE" style=";margin-top:0px;margin-bottom:0px;margin-left:0px;display:block;" id="isc_CK" src="http://localhost:8080/portal-app/portal/sc/skins/Enterprise/images/pickers/comboBoxPicker.png" role="presentation">
</span>
</td>

Good and correct:
1. The field is marked as invalid (aria-invalid="true")
2. The field has a reference on the error-icon (aria-describedby="isc_DB")
3. The error-icon (id="isc_DB") contains the validation failure message (aria-label="This field may not be blank.")

The actual problem is that the error icon has role="presentation" set, what tells screen-readers to ignore the element.

If I manually remove this role-attribute with firebug and tab into the field again then both JAWS and NVDA read the validation failure message properly.

Additional Info:
1. I am using SmartGWT 3.1, version
"v8.3p_2012-11-23"

2. browser(s) and version(s) involved
Firefox 10.0.11 and IE 8
NVDA 2012.1 and JAWS 14.0.981

Question:
Is there a quick way to "hack" SmartGWT so that the role="presentation" will be omitted?
Do you agree that this is a problem/bug in SmartGWT that should be fixed in future version?

Thanks a lot
Jörg

[Isomorphic]

Thanks for the very clear bug report. We've gone ahead and fixed this - as of the next nightly (3.1p and 4.0d branches) the error icon will omit the 'role="presentation"' string so the aria-label text should be picked up

Regards
Isomorphic Software