apex4x
Version:
The Comprehensive ARIA Development Suite
234 lines (229 loc) • 8.3 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Popup (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="../External - Straylight/index.htm"
>External - Straylight</a
>
</li>
<li>
<a href="../Internal/index.htm" aria-current="page">Internal</a>
</li>
<li>
<a href="../Internal - Alert/index.htm">Internal - Alert</a>
</li>
<li>
<a href="../Internal - Straylight/index.htm"
>Internal - Straylight</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">Popup <small>Internal Content</small></h1>
<p>
<button id="triggerId" class="aria-popup">
Show me the Shakespeare Quote of the Day!
</button>
<!-- Important
When Implementing a Close link or button, the className must match the "closeClassName" property within the script declaration.
(If not explicitly set, the default value "CloseDC" is configured within the module script file, and should be used for all Close links or buttons)
Doing so will automatically bind the close methods with this element, and set keyboard focus properly when the DC object is closed.
-->
</p>
<div hidden id="popupId" class="container--popup">
<h4>Hamlet: Act 3, Scene 2</h4>
<button class="CloseDC">
<img
src="img/ic_close.svg"
alt="Close Popup"
title="Close Popup"
/>
</button>
<dl>
<dt>HAMLET</dt>
<dd>
Do you see yonder cloud that's almost in shape of a camel?
</dd>
<dt>POLONIUS</dt>
<dd>By th' mass, and 'tis like a camel indeed.</dd>
<dt>HAMLET</dt>
<dd>Methinks it is like a weasel.</dd>
<dt>POLONIUS</dt>
<dd>It is backed like a weasel.</dd>
<dt>HAMLET</dt>
<dd>Or like a whale.</dd>
<dt>POLONIUS</dt>
<dd>Very like a whale.</dd>
</dl>
</div>
</div>
<div class="keyboard flex-item">
<h2>
The popup is optimized for screen reader and keyboard only
users:
</h2>
<ul>
<li>Activate the Quote button to open the popup.</li>
<li>
The content will be inserted inline with the triggering
element, and focus will automatically move to the beginning of
the new content.
</li>
<li>
Press <kbd>Tab</kbd> to set focus to the Close link and press
<kbd>Enter</kbd> to close the popup, or press
<kbd>Escape</kbd> to close the popup directly.
</li>
<li>
When closed, focus will move back to the triggering element.
</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>