Difference between revisions of "ARIA Tree"

From Level Access Web Labs
Jump to navigation Jump to search
 
(6 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>
Line 13: Line 24:
 
<label id="courses">Courses 2</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 aria-label="web" aria-level="1"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 aria-label="web basics" aria-level="2" id="webbasic" role="treeitem" tabindex="0">Web Basic</li>
 
       <li aria-label="web basics" aria-level="2" id="webbasic" role="treeitem" tabindex="0">Web Basic</li>
Line 27: Line 38:
 
</ul>
 
</ul>
  
<div id="tree" class="tree" role="tree" aria-labelledby="courses">
+
<div>
   <div aria-level="1"id="web" role="treeitem" tabindex="0" aria-expanded="true">Web
+
   <input type="text" id="in" value="" />
    <div role="group">
+
   <button onclick="test();"> test </button>
      <div aria-label="web basics" aria-level="2" id="webbasic" role="treeitem" tabindex="0">Web Basic</div>
 
      <div aria-label="web advanced" aria-level="2" id="webadvanced" role="treeitem" tabindex="0">Web Advanced</div>
 
    </div>
 
  </div>
 
   <div aria-level="1" id="pdf" role="treeitem" tabindex="0" aria-expanded="true">PDF
 
    <div role="group">
 
      <div aria-level="2" id="webbasic" role="treeitem" tabindex="0">PDF Basic</div>
 
      <div aria-level="2" id="webadvanced" role="treeitem" tabindex="0">PDF Advanced</div>
 
    </div>
 
  </div>
 
 
</div>
 
</div>
  
</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