apex4x
Version:
The Comprehensive ARIA Development Suite
467 lines (459 loc) • 18.8 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tree (Internal Content) - 4X Technical Style Guide</title>
<meta name="description" content="Scalable ARIA Components" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
type="text/css"
href="../../_common/css/components-style.css"
/>
<link rel="stylesheet" type="text/css" href="css/customize.css" />
<script src="/4X/4X.js"></script>
<script src="js/setup.js"></script>
</head>
<body>
<div class="bypass">
<ul class="list-unstyled">
<li>
<a
class="skip--link"
href="javascript:void(0);"
onclick="document.getElementById('main').focus();"
>
Skip to Main Content
</a>
</li>
</ul>
</div>
<div class="outer-wrapper">
<header class="header flex-container">
<div class="logo flex-item">
<a href="https://whatsock.com">
<img
alt="WhatSock : Changing the world one step at a time"
src="../../_common/img/whatsock.svg"
/></a>
</div>
<div class="site-name flex-item">
<strong>Apex 4X</strong> Technical Style Guide
</div>
</header>
<div class="wrapper">
<div class="left-aside">
<nav>
<p>
<a href="/Tutorials/Beginner-Introduction.htm"
>Beginner Tutorial</a
>
</p>
<h2>Template Examples</h2>
<ul>
<li><a href="../../index.htm">Back to Components</a></li>
<li><a href="../index.htm">Back to Parent Widget</a></li>
<li><a href="../External/index.htm">External</a></li>
<li>
<a href="../Internal/index.htm" aria-current="page">Internal</a>
</li>
</ul>
</nav>
</div>
<main id="main" class="main" tabindex="-1">
<div class="demo-block flex-container">
<div class="component flex-item">
<h1 class="pageTitle">Tree <small>Internal Content</small></h1>
<section class="sample-block">
<div class="viewport">
<div id="container">
<div
class="treeview"
role="navigation"
aria-label="Library"
>
<!-- Tree structure does not require ID attribute mapping, and may be nested to any level.
The focusable A tags may include any type of markup for formatting purposes. -->
<ul aria-label="Digital Library Index" class="top tree">
<!-- First branch -->
<li>
<a href="#" class="branch"><span>Cyberpunk</span></a>
<ul hidden class="tree">
<li>
<a href="#" class="branch"
><span>Neal Stephenson</span></a
>
<ul hidden class="tree">
<li>
<a
data-author="Neal Stephenson"
data-check
href="#"
class="leaf"
><span>Snow Crash</span></a
>
</li>
<li>
<a
data-author="Neal Stephenson"
data-check
href="#"
class="leaf"
><span>The Diamond Age</span></a
>
</li>
</ul>
</li>
<li>
<a href="#" class="branch"
><span>Richard K. Morgan</span></a
>
<ul hidden class="tree">
<li>
<a
data-author="Richard K. Morgan"
data-check
href="#"
class="leaf"
><span>Altered Carbon</span></a
>
</li>
<li>
<a
data-author="Richard K. Morgan"
data-check
href="#"
class="leaf"
><span>Broken Angels</span></a
>
</li>
<li>
<a
data-author="Richard K. Morgan"
data-check
href="#"
class="leaf"
><span>Woken Furies</span></a
>
</li>
</ul>
</li>
<li>
<a href="#" class="branch"
><span>William Gibson</span></a
>
<ul hidden class="tree">
<li>
<a
data-author="William Gibson"
data-check
href="#"
class="leaf"
><span>Neuromancer</span></a
>
</li>
<li>
<a
data-author="William Gibson"
data-check
href="#"
class="leaf"
><span>Count Zero</span></a
>
</li>
<li>
<a
data-author="William Gibson"
data-check
href="#"
class="leaf"
><span>Mona Lisa Overdrive</span></a
>
</li>
</ul>
</li>
</ul>
</li>
<!-- Third branch -->
<li>
<a href="#" class="branch"><span>Humor</span></a>
<ul hidden class="tree">
<li>
<a href="#" class="branch"
><span>Christopher Moore</span></a
>
<ul hidden class="tree">
<li>
<a
data-author="Christopher Moore"
data-check
href="#"
class="leaf"
><span>Bloodsucking Fiends</span></a
>
</li>
<li>
<a
data-author="Christopher Moore"
data-check
href="#"
class="leaf"
><span>Fluke</span></a
>
</li>
<li>
<a
data-author="Christopher Moore"
data-check
href="#"
class="leaf"
><span
>Lamb, The Gospel According to Biff</span
></a
>
</li>
</ul>
</li>
<li>
<a href="#" class="branch"
><span>Tom Robbins</span></a
>
<ul hidden class="tree">
<li>
<a
data-author="Tom Robbins"
data-check
href="#"
class="leaf"
><span
>Fierce Invalids Home from Hot
Climates</span
></a
>
</li>
</ul>
</li>
</ul>
</li>
<!-- Second branch -->
<li>
<a href="#" class="branch"><span>Fantasy</span></a>
<ul hidden class="tree">
<li>
<a href="#" class="branch"
><span>Jim Butcher</span></a
>
<ul hidden class="tree">
<li>
<a
data-author="Jim Butcher"
data-check
href="#"
class="leaf"
><span>Storm Front</span></a
>
</li>
<li>
<a
data-author="Jim Butcher"
data-check
href="#"
class="leaf"
><span>Fool Moon</span></a
>
</li>
</ul>
</li>
<li>
<a href="#" class="branch"
><span>Victor Gischler</span></a
>
<ul hidden class="tree">
<li>
<a
data-author="Victor Gischler"
data-check
href="#"
class="leaf"
><span>Ink Mage</span></a
>
</li>
<li>
<a
data-author="Victor Gischler"
data-check
href="#"
class="leaf"
><span>The Tattooed Duchess</span></a
>
</li>
<li>
<a
data-author="Victor Gischler"
data-check
href="#"
class="leaf"
><span>A Painted Goddess</span></a
>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a
aria-disabled="true"
href="https://www.goodreads.com/"
class="leaf"
><span>Goodreads...</span></a
>
</li>
<li>
<a href="https://google.com/" class="leaf"
><span>Help...</span></a
>
</li>
</ul>
</div>
</div>
<div
class="books"
role="region"
aria-labelledby="readingListHeadingId"
>
<h3 id="readingListHeadingId">Reading List</h3>
<div>
<ul id="readingList"></ul>
</div>
</div>
</div>
</section>
</div>
<div class="keyboard flex-item">
<h2>
The tree is optimized for screen reader and keyboard only users:
</h2>
<ul>
<li>Set focus to the tree using the keyboard.</li>
<li>
Press the <kbd class="up">Up</kbd> and
<kbd class="down">Down</kbd> Arrow keys to move focus between
the tree options.
</li>
<li>
Press the <kbd class="left">Left</kbd> and
<kbd class="right">Right</kbd> Arrow keys to open or close
subtrees.
</li>
<li>
Press the Ctrl+<kbd class="left">Left</kbd> and Ctrl+<kbd
class="right"
>Right</kbd
>
Arrow keys to open or close groups of subtrees.
</li>
<li>
Press any letter or number to jump to a tree item starting
with that character or digit.
</li>
<li>Press <kbd>Enter</kbd> to activate a tree option.</li>
<li>
Press <kbd>Escape</kbd> to close the currently open tree.
</li>
<li>
Mouse users can click the desired tree option to toggle as
usual.
</li>
</ul>
</div>
</div>
</main>
</div>
<footer class="footer">
<div class="flex-container-row">
<div class="flex-item">
<h2>License</h2>
<p>
Apex 4X including all template design patterns is distributed
under the terms of the Open Source Initiative OSI - MIT License,
and may be freely used for any purpose within any web technology.
</p>
</div>
<div class="flex-item">
<h2>Resources</h2>
<ul>
<li>
<a target="ext" href="https://github.com/WhatSock/apex"
>Apex 4X on GitHub</a
>
</li>
<li>
<a
target="ext"
href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
>Visual ARIA Bookmarklet</a
>
</li>
<li>
<a
target="ext"
href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
>Visual ARIA Chrome Extension</a
>
</li>
<li>
<a
target="ext"
href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
>Visual ARIA Firefox Extension</a
>
</li>
<li>
<a target="ext" href="https://github.com/AccDC/visual-aria"
>Visual ARIA on GitHub</a
>
</li>
<li>
<a target="ext" href="https://whatsock.com/training/matrices/"
>ARIA Role Conformance Matrices</a
>
</li>
<li>
<a target="ext" href="https://whatsock.com/training/"
>Accessibility Tree Training Guide</a
>
</li>
</ul>
</div>
<div class="flex-item">
<h2>Acknowledgements</h2>
<ul class="list--horizontal">
<li>
Author and developer:
<a target="ext" href="https://www.linkedin.com/in/bgaraventa"
>Bryan Garaventa</a
>
</li>
<li>
Website designer:
<a target="ext" href="https://gericci.me/">Angela Ricci</a>
</li>
<li>
Style and markup editor:
<a
target="ext"
href="https://www.linkedin.com/in/laurence-lewis-77520365/"
>Laurence Lewis</a
>
</li>
</ul>
</div>
</div>
</footer>
</div>
</body>
<script
async
src="https://api.whatsock.com/accdc-updates.js?4x=template"
></script>
</html>