<style>
/* Changing the layout to use less space for mobiles */
@media screen and (max-device-width: 480px), screen and (-webkit-min-device-pixel-ratio: 2) {
#email-body { min-width: 30em !important; }
#email-page { padding: 8px !important; }
#email-banner { padding: 8px 8px 0 8px !important; }
#email-avatar { margin: 1px 8px 8px 0 !important; padding: 0 !important; }
#email-fields { padding: 0 8px 8px 8px !important; }
#email-gutter { width: 0 !important; }
}
</style>
<div id="email-body">
<table id="email-wrap" align="center" border="0" cellpadding="0" cellspacing="0" style="background-color:#f0f0f0;color:#000000;width:100%;">
<tr valign="top">
<td id="email-page" style="padding:16px !important;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="background-color:#ffffff;border:1px solid #bbbbbb;color:#000000;width:100%;">
<tr valign="top">
<td bgcolor="#ffffff" style="background-color:#ffffff;color:#000000;font-family:Arial,FreeSans,Helvetica,sans-serif;font-size:12px;line-height:1;"><img src="https://shibboleth.net/images/shib_240x83.png" alt="" style="vertical-align:top;" /></td>
</tr><tr valign="top">
<td id="email-banner" style="padding:32px 32px 0 32px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
<tr valign="top">
<td style="color:#505050;font-family:Arial,FreeSans,Helvetica,sans-serif;padding:0;">
<img id="email-avatar" src="https://issues.shibboleth.net/jira/secure/useravatar?ownerId=rdw%40iay.org.uk&avatarId=10124" alt="" height="48" width="48" border="0" align="left" style="padding:0;margin: 0 16px 16px 0;" />
<div id="email-action" style="padding: 0 0 8px 0;font-size:12px;line-height:18px;">
<a class="user-hover" rel="rdw@iay.org.uk" id="email_rdw@iay.org.uk" href="https://issues.shibboleth.net/jira/secure/ViewProfile.jspa?name=rdw%40iay.org.uk" style="color:#326ca6;">Rod Widdowson</a>
commented on <img src="https://issues.shibboleth.net/jira/images/icons/issuetypes/task.png" height="16" width="16" border="0" align="absmiddle" alt="Task"> <a style='color:#326ca6;text-decoration:none;' href='https://issues.shibboleth.net/jira/browse/EDS-26'>EDS-26</a>
</div>
<div id="email-summary" style="font-size:16px;line-height:20px;padding:2px 0 16px 0;">
<a style='color:#326ca6;text-decoration:none;' href='https://issues.shibboleth.net/jira/browse/EDS-26'><strong>Investigate diferentiating screen readers</strong></a>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr valign="top">
<td id="email-fields" style="padding:0 32px 32px 32px;">
<table border="0" cellpadding="0" cellspacing="0" style="padding:0;text-align:left;width:100%;" width="100%">
<tr valign="top">
<td id="email-gutter" style="width:64px;white-space:nowrap;"></td>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr valign="top">
<td colspan="2" style="color:#000000;font-family:Arial,FreeSans,Helvetica,sans-serif;font-size:12px;padding:0 0 16px 0;width:100%;">
<div class="comment-block" style="background-color:#edf5ff;border:1px solid #dddddd;color:#000000;padding:12px;"><p>I sent off an example to the guys at Illinois to 50% success. I asked one of the devs there for help and his reponse was great</p>
<p>I was able to take a look at the script. You are almost there as far as<br/>
implementing an ARIA combobox, but there are a few more things to do.</p>
<p>As an ARIA widget role, combobox causes the browser to expect the<br/>
application to handle things like updating visual state and managing focus.</p>
<p>A combobox assumes that focus will remain on the input control. It uses<br/>
the aria property aria-activedescendant to specify which of the options<br/>
have focus. The value of active descendant is the id of the selected<br/>
option, and it should be updated as a user arrows through the options or<br/>
when a user clicks on an option with the mouse. If you are setting the<br/>
control to a default value from the option list, it should be set when the<br/>
control is initialized. When a user clicks on an option, set focus back<br/>
on the input control as part of the click handler.</p>
<p>Next, since focus will remain on the input control, the aria-expanded<br/>
property must be placed on that control, not on the listbox as you have<br/>
now. Also, adding aria-owns and pointing it to the listbox (as with<br/>
aria-controls) causes assistive technologies to treat the listbox as if it<br/>
is contained by the combobox widget.</p>
<p>Lastly, the list of options should be placed in an unordered list rather<br/>
than as a series of divs. I¹ve seen some implementations that use divs for<br/>
list boxes, but it doesn¹t seem to work as well.</p>
<p>Aria-hidden should be set on the listbox and set to false when the list is<br/>
expanded. This is because some browsers and assistive technologies will<br/>
still read elements with display: none or visibility: hidden.</p>
<p>The modified markup would look something like this:</p>
<p><input id=³idpSelectInput² type=³text² role=³combobox²<br/>
aria-controls=³IdPSelectDropDown² aria-owns=³IdpSelectDropDown²<br/>
aria-expanded=³false² aria-activedescendant=³²><br/>
<ul class="IdPSelectDropDown² aria-hidden=³true² style="visibility:<br/>
hidden; left: 20px; top: 204px;"><br/>
<li id=³opt1² class="" role="option" aria-selected="false²>RENATA -<br/>
Red Nacional Academica de Tecnologia Avanz</li><br/>
<li id=³opt2² class="" role="option" aria-selected="false">AAI@EduHr<br/>
Single Sign-On Service</li><br/>
<li id=³opt3² class="" role="option" aria-selected="false"><br/>
<img width="16" height="16"<br/>
src="https://idp1.abertay.ac.uk/icons/small/shield_16x16.ico" alt=""><br/>
Abertay University<br/>
</li><br/>
</ul></p>
<p>I need to interalize this..</p></div>
<div style="color:#505050;padding:4px 0 0 0;"> </div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td><!-- End #email-page -->
</tr>
<tr valign="top">
<td style="color:#505050;font-family:Arial,FreeSans,Helvetica,sans-serif;font-size:10px;line-height:14px;padding: 0 16px 16px 16px;text-align:center;">
This message is automatically generated by JIRA.<br />
If you think it was sent incorrectly, please contact your JIRA administrators<br />
For more information on JIRA, see: <a style='color:#326ca6;' href='http://www.atlassian.com/software/jira'>http://www.atlassian.com/software/jira</a>
</td>
</tr>
</table><!-- End #email-wrap -->
</div><!-- End #email-body -->