WebAIM - Web Accessibility In Mind

E-mail List Archives

Optgroup with onchange event in IE6 (keyboard accessibility question)

for

From: Chadwick-Dias, AnnMarie
Date: Nov 3, 2009 10:15AM

Hi Folks,

We're encountering a bug in IE6 when using an onchange event with an
optgroup. The onchange event is not working with the keyboard in IE6.
(IE7 and FF3 work fine).

Here's the use case:

It's a date range select optgroup that when you select "custom," it then
displays two new fields (To and From). It only works with the mouse in
IE6 and works perfectly with both the mouse and keyboard in Firefox3 and
IE7.

Anyone know of this bug and/or a potential workaround? This is very
specifically related to using an optgroup (not just a select). It also
looks like the To and From fields are Dojo, in case that's relevant.

Here's the source:

***********************************

<label for="timePeriod">Time Period:</label></td>
<td
class="ofTxt" style="padding-bottom: 7px;">
<select
name="timePeriod" id="timePeriod" title="Select a fixed time period from
10 to 90 days" onChange="onChangeTimePeriod(this);">

<option value="10/23/2009,11/02/2009">Past 10 Days</option>
<option value="10/03/2009,11/02/2009">Past 30 Days</option>
<option value="09/03/2009,11/02/2009">Past 60 Days</option>
<option value="08/04/2009,11/02/2009">Past 90 Days</option><optgroup
label='------------------'></optgroup>
<option value="07/01/2009,09/30/2009">Q3 2009 (Jul-Sep)</option>
<option value="04/01/2009,06/30/2009">Q2 2009 (Apr-Jun)</option>
<option value="01/01/2009,03/31/2009">Q1 2009 (Jan-Mar)</option>
<optgroup label='------------------'></optgroup>
<option value="10/01/2008,12/31/2008">Q4 2008 (Oct-Dec)</option>
<option value="07/01/2008,09/30/2008">Q3 2008 (Jul-Sep)</option>
<option value="04/01/2008,06/30/2008">Q2 2008 (Apr-Jun)</option>
<option value="01/01/2008,03/31/2008">Q1 2008 (Jan-Mar)</option>
<optgroup label='------------------'></optgroup>
<option value="10/01/2007,12/31/2007">Q4 2007 (Oct-Dec)</option>


<optgroup label='------------------'></optgroup>

<option value="RANGE">Custom</option>

</select>


<span
id="fromto" style="display:none">

<script type="text/javascript"
src="https://wwwre3.fmr.com/rct/1.1.1/dojo/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>

<script type="text/javascript">

dojo.require("dojo.parser");

dojo.require("dijit.form.DateTextBox");



dojo.addOnLoad(

function(){

clearHintFromDate();

clearHintToDate();

checkDateRange();



}

);


</script>


<label for="fromDate">From:</label>

<input name="fromDate" style="width:100px" id="fromDate" type="text"
maxlength="10" onchange="clearHintFromDate();"
onclick="clearHintFromDate();" onblur="clearHintFromDate();"
onfocus="clearHintFromDate();"

constraints="{datePattern:'MM/dd/yyyy'}"
dojoType="dijit.form.DateTextBox" validate="return true;"/>


<label for="toDate">To:</label>

<input name="toDate" style="width:100px" id="toDate" type="text"
maxlength="10" onchange="clearHintToDate();" onblur="clearHintToDate();"
onfocus="clearHintToDate();"

constraints="{datePattern:'MM/dd/yyyy'}"
dojoType="dijit.form.DateTextBox" validate="return true;"/>
</span>

*********************************************
Thanks for your help!

Ann Chadwick-Dias
> P Please consider the environment before printing this e-mail
>
>