Hi,
our application is required to be accessible for screenreaders (JAWS). We are currently facing an issue when defining ARIA labels on SmartGWT Label objects.
We would like to define different ARIA labels (that are read by the screenreader) for different Label objects. However, we observe a strange behavior: The ARIA label set on the last Label object is set on all previously defined Label objects as well.
The sample code below illustrates the issue: label1, label2 and label3 all have different ARIA labels defined in Java, however, in the resulting HTML code the attribute "aria-label" is set to "This is label 3" for all of them.
The issue appears both in IE 11 and Firefox ESR 24.8.1. Our SmartGWT version is v10.0p_2015-02-12/PowerEdition Deployment (built 2015-02-12).
In previous versions of Smart GWT the code worked as expected. Maybe this is a bug in the latest Smart GWT version?
Java:
HTML:
our application is required to be accessible for screenreaders (JAWS). We are currently facing an issue when defining ARIA labels on SmartGWT Label objects.
We would like to define different ARIA labels (that are read by the screenreader) for different Label objects. However, we observe a strange behavior: The ARIA label set on the last Label object is set on all previously defined Label objects as well.
The sample code below illustrates the issue: label1, label2 and label3 all have different ARIA labels defined in Java, however, in the resulting HTML code the attribute "aria-label" is set to "This is label 3" for all of them.
The issue appears both in IE 11 and Firefox ESR 24.8.1. Our SmartGWT version is v10.0p_2015-02-12/PowerEdition Deployment (built 2015-02-12).
In previous versions of Smart GWT the code worked as expected. Maybe this is a bug in the latest Smart GWT version?
Java:
Code:
public class LabelScreenreaderTest implements EntryPoint {
@Override
public void onModuleLoad() {
SC.setScreenReaderMode(true);
Label label1 = new Label("Label 1");
label1.setCanFocus(true);
label1.setAriaRole("label");
label1.setAriaState("label", "This is label 1");
Label label2 = new Label("Label 2");
label2.setCanFocus(true);
label2.setAriaRole("label");
label2.setAriaState("label", "This is label 2");
Label label3 = new Label("Label 3");
label3.setCanFocus(true);
label3.setAriaRole("label");
label3.setAriaState("label", "This is label 3");
VLayout vLayout = new VLayout();
vLayout.addMembers(label1, label2, label3);
vLayout.draw();
}
}Code:
<div tabIndex="1101" id="isc_2" role="label"
style="left: 0px; top: 0px; width: 100px; height: 100px; overflow: visible; position: absolute; z-index: 200036; cursor: default;"
aria-label="This is label 3"
onfocus="isc.EH.focusInCanvas(isc_Label_0,true);"
onblur="if(window.isc)isc.EH.blurFocusCanvas(isc_Label_0,true);"
onscroll="return isc_Label_0.$lh()" eventProxy="isc_Label_0">
<div id="isc_3"
style="width: 100%; vertical-align: top; display: inline-block; visibility: inherit; position: relative; z-index: 200036; cursor: default; box-sizing: border-box;"
eventProxy="isc_Label_0">
<table width="100" height="100" role="presentation" cellSpacing="0"
cellPadding="0">
<tbody>
<tr>
<td tabIndex="-1" align="left" class="normal" vAlign="middle"
onfocus="isc_Label_0.$47()">Label 1</td>
</tr>
</tbody>
</table>
</div>
</div>
<div tabIndex="1152" id="isc_4" role="label"
style="left: 0px; top: 100px; width: 100px; height: 100px; overflow: visible; position: absolute; z-index: 200054; cursor: default;"
aria-label="This is label 3"
onfocus="isc.EH.focusInCanvas(isc_Label_1,true);"
onblur="if(window.isc)isc.EH.blurFocusCanvas(isc_Label_1,true);"
onscroll="return isc_Label_1.$lh()" eventProxy="isc_Label_1">
<div id="isc_5"
style="width: 100%; vertical-align: top; display: inline-block; visibility: inherit; position: relative; z-index: 200054; cursor: default; box-sizing: border-box;"
eventProxy="isc_Label_1">
<table width="100" height="100" role="presentation" cellSpacing="0"
cellPadding="0">
<tbody>
<tr>
<td tabIndex="-1" align="left" class="normal" vAlign="middle"
onfocus="isc_Label_1.$47()">Label 2</td>
</tr>
</tbody>
</table>
</div>
</div>
<div tabIndex="1203" id="isc_6" role="label"
style="left: 0px; top: 200px; width: 100px; height: 100px; overflow: visible; position: absolute; z-index: 200072; cursor: default;"
aria-label="This is label 3"
onfocus="isc.EH.focusInCanvas(isc_Label_2,true);"
onblur="if(window.isc)isc.EH.blurFocusCanvas(isc_Label_2,true);"
onscroll="return isc_Label_2.$lh()" eventProxy="isc_Label_2">
<div id="isc_7"
style="width: 100%; vertical-align: top; display: inline-block; visibility: inherit; position: relative; z-index: 200072; cursor: default; box-sizing: border-box;"
eventProxy="isc_Label_2">
<table width="100" height="100" role="presentation" cellSpacing="0"
cellPadding="0">
<tbody>
<tr>
<td tabIndex="-1" align="left" class="normal" vAlign="middle"
onfocus="isc_Label_2.$47()">Label 3</td>
</tr>
</tbody>
</table>
</div>
</div>