Difference between revisions of "ARIA Listbox"
Jump to navigation
Jump to search
ARIA Listbox
| Line 13: | Line 13: | ||
} | } | ||
| − | ul [aria-selected="true"] { | + | ul.lb [aria-selected="true"] { |
background-color:blue; | background-color:blue; | ||
color:white; | color:white; | ||
} | } | ||
| − | ul { | + | ul.lb { |
border: thin solid black; | border: thin solid black; | ||
width:10em; | width:10em; | ||
| Line 92: | Line 92: | ||
<label id="lbl1">Platform:</label> | <label id="lbl1">Platform:</label> | ||
<div role="listbox" onfocus="" id="lb1" onkeyup="change(event); return true;" aria-owns="l1" aria-activedescendant="li1" aria-labelledby="lbl1" aria-expanded="true" onblur="" tabindex="0" > | <div role="listbox" onfocus="" id="lb1" onkeyup="change(event); return true;" aria-owns="l1" aria-activedescendant="li1" aria-labelledby="lbl1" aria-expanded="true" onblur="" tabindex="0" > | ||
| − | <ul role="listbox" id="l1" aria-labelledby="lbl1" tabindex="-1"> | + | <ul class="lb" role="listbox" id="l1" aria-labelledby="lbl1" tabindex="-1"> |
<li onclick="select(this);" aria-selected="true" id="li1" role="option" tabindex="-1" aria-hidden="false">iOS</li> | <li onclick="select(this);" aria-selected="true" id="li1" role="option" tabindex="-1" aria-hidden="false">iOS</li> | ||
<li onclick="select(this);" aria-selected="false" id="li2" role="option" tabindex="-1" aria-hidden="false">Android</li> | <li onclick="select(this);" aria-selected="false" id="li2" role="option" tabindex="-1" aria-hidden="false">Android</li> | ||
Revision as of 14:56, 20 October 2014
- Uses aria-activedescendant
- iOS
- Android
- Windows Phone
