Difference between revisions of "ARIA Listbox"

From Level Access Web Labs
Jump to navigation Jump to search
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

ARIA Listbox

  • iOS
  • Android
  • Windows Phone