Difference between revisions of "ARIA Tree"

From Level Access Web Labs
Jump to navigation Jump to search
 
(16 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
Please use this codepen example for testing.
 +
<html>
 +
<a href="http://codepen.io/team/universitysandbox/pen/gagXLm/"> ARIA Tree example</a>
 +
</html>
 +
 +
The content below this line is not functional.
 
<html>
 
<html>
 
<head>
 
<head>
  <script type="text/javascript">
 
  </script>
 
 
   <style type="text/css">
 
   <style type="text/css">
 
   ul {
 
   ul {
Line 8: Line 12:
 
   }
 
   }
 
   </style>
 
   </style>
 +
 +
  <script type="text/javascript">
 +
    function test() {
 +
      var col = document.querySelectorAll("#tree li");
 +
      document.getElementById("in").value = col.length;
 +
    }
 +
  </script>
 
</head>
 
</head>
 
<body>
 
<body>
  
<label id="courses">Courses</label>
+
<label id="courses">Courses 2</label>
 
<ul id="tree" class="tree" role="tree" aria-labelledby="courses">
 
<ul id="tree" class="tree" role="tree" aria-labelledby="courses">
   <li id="web" role="treeitem" tabindex="0" aria-expanded="true">Web
+
   <li aria-label="web" aria-level="1" id="web" role="treeitem" tabindex="0" aria-expanded="true">Web
 
     <ul role="group">
 
     <ul role="group">
       <li id="webbasic" role="treeitem" tabindex="-1">Web Basic</li>
+
       <li aria-label="web basics" aria-level="2" id="webbasic" role="treeitem" tabindex="0">Web Basic</li>
       <li id="webadvanced" role="treeitem" tabindex="-1">Web Advanced</li>
+
       <li aria-label="web advanced" aria-level="2" id="webadvanced" role="treeitem" tabindex="0">Web Advanced</li>
 
     </ul>
 
     </ul>
 
   </li>
 
   </li>
   <li id="pdf" role="treeitem" tabindex="0" aria-expanded="true">PDF
+
   <li aria-level="1" id="pdf" role="treeitem" tabindex="0" aria-expanded="true">PDF
 
     <ul role="group">
 
     <ul role="group">
       <li id="webbasic" role="treeitem" tabindex="-1">PDF Basic</li>
+
       <li aria-level="2" id="webbasic" role="treeitem" tabindex="0">PDF Basic</li>
       <li id="webadvanced" role="treeitem" tabindex="-1">PDF Advanced</li>
+
       <li aria-level="2" id="webadvanced" role="treeitem" tabindex="0">PDF Advanced</li>
 
     </ul>
 
     </ul>
 
   </li>
 
   </li>
 
</ul>
 
</ul>
  
</div>  
+
<div>
 +
  <input type="text" id="in" value="" />
 +
  <button onclick="test();"> test </button>
 +
</div>
 +
 
 
</body>
 
</body>
 
</html>
 
</html>
  
 
[[Category:ARIA]]
 
[[Category:ARIA]]

Latest revision as of 18:38, 20 June 2018

Please use this codepen example for testing. ARIA Tree example

The content below this line is not functional.

  • Web
    • Web Basic
    • Web Advanced
  • PDF
    • PDF Basic
    • PDF Advanced