Skip to content

WAI-ARIA Accessibility updates #102

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

WAI-ARIA Accessibility updates #102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 83 additions & 23 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery selectBox (select replacement plugin)</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.selectBox.js"></script>
<link type="text/css" rel="stylesheet" href="jquery.selectBox.css" />
<link type="text/css" rel="stylesheet" href="jquery.selectBox.css" />

<script type="text/javascript">

Expand Down Expand Up @@ -95,6 +96,13 @@
'menuSpeed' : 'fast'
});
});

$("#loopOptions").click( function() {
$("SELECT").selectBox('settings', {
'loopOptions':$(this).val()=='true'
});
$(this).val(!($(this).val()=='true'));
});


$("SELECT")
Expand Down Expand Up @@ -122,7 +130,7 @@

<form style="background: #FFF; padding: 20px; border: solid 2px #DDD;">

<div id="console" style="width: 50%; font-family: 'Courier New', monospace; border: solid 2px #000; background: #000; color: #FFF; height: 350px; overflow: auto; padding: 10px; float: right;"></div>
<div id="console" style="width: 50%; font-family: 'Courier New', monospace; border: solid 2px #000; background: #000; color: #FFF; height: 350px; overflow: auto; padding: 10px; float: right;" role="log" aria-live="off" aria-atomic="true"></div>

<div style="background: #FFFCCC; border: solid 2px #DDD999; padding: 1px 10px; width: 50%; float: right; clear: right; margin: 1em 0;">
<p><strong>Note</strong></p>
Expand All @@ -138,11 +146,11 @@
</p>
</div>

<h1>$("SELECT").selectBox();</h1>

<h1>$(&quot;SELECT&quot;).selectBox();</h1>
<div>
<p>
<label for="standard-dropdown">Standard Dropdown</label><br />
<select id="standard-dropdown" name="standard-dropdown" class="custom-class1 custom-class2" style="width: 200px;">
<select id="standard-dropdown" name="standard-dropdown" class="custom-class1 custom-class2 selectBox-Blue">
<option value="1" class="test-class-1">Item 1</option>
<option value="2" class="test-class-2" selected="selected">Item 2</option>
<option value="3" class="test-class-3">Item 3 has a really long label that will not interfere with the control's width</option>
Expand All @@ -164,16 +172,18 @@ <h1>$("SELECT").selectBox();</h1>
<option value="19">Item 19</option>
<option value="20">Item 20</option>
</select>
<label id="standard-dropdown-second-label" for="standard-dropdown">Second label for Standard Dropdown</label>
</p>

<p>
Empty Dropdown<br />
<select name="empty-dropdown"></select>
<label>Empty Dropdown<br />
<select name="empty-dropdown" class="selectBox-Blue"></select>
</label>
</p>

<p>
<label for="multi-select-control">Multi-select Control</label><br />
<select id="multi-select-control" name="multi-select-control" multiple="multiple">
<select id="multi-select-control" name="multi-select-control" multiple="multiple" class="selectBox-Blue">
<option value="1" selected="selected">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
Expand All @@ -183,33 +193,36 @@ <h1>$("SELECT").selectBox();</h1>
</p>

<p>
Empty Multi-select<br />
<select name="empty-multi-select" size="5" multiple="multiple"></select>
<label>Empty Multi-select<br />
<select name="empty-multi-select" size="5" multiple="multiple" class="selectBox-Blue"></select>
</label>
</p>

<p>
Multi-select with few options<br />
<select name="multi-select-few-options" multiple="multiple" size="5">
<label for="multi-select-few-options">Multi-select with few options<br />
<select id="multi-select-few-options" name="multi-select-few-options" multiple="multiple" size="5" class="selectBox-Blue">
<option value="1" selected="selected">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
</label>
</p>

<p>
No multi-select, size = 4<br />
<select name="no-multi-with-size-4" size="4">
<label>No multi-select, size = 4<br />
<select name="no-multi-with-size-4" size="4" class="selectBox-Blue">
<option value="1" selected="selected">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3 has &lt;a&gt; really long label but it won't affect the control's display at all</option>
<option value="4">Item 4</option>
<option value="5" disabled="disabled">Item 5 (disabled)</option>
</select>
</label>
</p>

<p>
Standard control with OPTGROUPS<br />
<select name="standard-with-optgroups">
<label for="standard-with-optgroups">Standard control with OPTGROUPS</label><br />
<select id="standard-with-optgroups" name="standard-with-optgroups" class="selectBox-Gray">
<optgroup label="Section 1">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
Expand Down Expand Up @@ -248,10 +261,10 @@ <h1>$("SELECT").selectBox();</h1>
</optgroup>
</select>
</p>

<p>
Multi-select control with OPTGROUPS<br />
<select name="multi-with-optgroups" multiple="multiple">
<p>
<label for="standard-with-optgroups-blue">Standard control with OPTGROUPS</label><br />
<select id="standard-with-optgroups-blue" name="standard-with-optgroups-blue" class="selectBox-Blue" size="9">
<optgroup label="Section 1">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
Expand Down Expand Up @@ -290,10 +303,53 @@ <h1>$("SELECT").selectBox();</h1>
</optgroup>
</select>
</p>

<p>
<label>Multi-select control with OPTGROUPS<br />
<select name="multi-with-optgroups" multiple="multiple" class="selectBox-Blue" size="9">
<optgroup label="Section 1">
<option value="1">Item 1</option>
<option value="2" selected="selected">Item 2</option>
<option value="3">Item 3</option>
<option value="4">Item 4</option>
</optgroup>
<optgroup label="Section 2">
<option value="5">Item 5</option>
<option value="6" selected="selected">Item 6</option>
<option value="7">Item 7</option>
<option value="8">Item 8</option>
</optgroup>
<optgroup label="Section 3">
<option value="9">Item 9</option>
<option value="10">Item 10</option>
<option value="11">Item 11</option>
<option value="12">Item 12</option>
</optgroup>
<optgroup label="Section 4">
<option value="13">Item 13</option>
<option value="14" selected="selected">Item 14</option>
<option value="15">Item 15</option>
<option value="16">Item 16</option>
</optgroup>
<optgroup label="Section 5">
<option value="17">Item 17</option>
<option value="18">Item 18</option>
<option value="19">Item 19</option>
<option value="20">Item 20</option>
</optgroup>
<optgroup label="Section 6">
<option value="21">Item 21</option>
<option value="22">Item 22</option>
<option value="23" selected="selected">Item 23</option>
<option value="24">Item 24</option>
</optgroup>
</select>
</label>
</p>

<p>
<label for="obscured-dropdown">Dropdown positioned above control</label> <br />
<select id="obscured-dropdown" name="obscured-dropdown" style="width: 200px">
<select id="obscured-dropdown" name="obscured-dropdown" style="width: 250px">
<option value="1" class="test-class-1">Item 1</option>
<option value="2" class="test-class-2" selected="selected">Item 2</option>
<option value="3" class="test-class-3">Item 3 has a really long label that will not interfere with the control's width</option>
Expand All @@ -316,7 +372,7 @@ <h1>$("SELECT").selectBox();</h1>
<option value="20">Item 20</option>
</select>
</p>

</div>
<hr align="left" style="height: 1px; background-color: #DDD; width: 40%; margin-top: 1.5em; border: 0;" />

<p>
Expand All @@ -342,6 +398,10 @@ <h1>$("SELECT").selectBox();</h1>
<input type="button" id="fade" value="Fade" />
<input type="button" id="slide" value="Slide" />
</p>
<p>
Loop options:
<input type="button" id="loopOptions" value="true" />
</p>

<div style="clear: both;"></div>

Expand Down
Loading