feat(button): accessible button and pointer onOut (#141)

* feat(button): accessible button * update pointer tests * revert playground
straker · Dec 25, 2019 · c82c9d6 · c82c9d6
1 parent d33567d
commit c82c9d6
Show file tree

Hide file tree

Showing 42 changed files with 2,217 additions and 865 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -8,7 +8,7 @@ The goal of Kontra is not to implement everything you could possibly need to mak
 
 Instead, Kontra aims to implement basic game requirements like asset loading, input, the game loop, and spites to keep the library very small and focused. This allows it to be used when your game size is limited (like the [js13k games competition](https://js13kgames.com/)).
 
-### Features Kontra won't support
+### Features Kontra Won't Support
 
 Below is a list of features the library will not support or add:
 

diff --git a/docs/api/animation.html b/docs/api/animation.html
@@ -42,6 +42,7 @@
             <ul aria-labelledby="api">
               <li><a href="api/animation" aria-current="page">Animation</a></li>
               <li><a href="api/assets" >Assets</a></li>
+              <li><a href="api/button" >Button</a></li>
               <li><a href="api/collision" >Collision</a></li>
               <li><a href="api/core" >Core</a></li>
               <li><a href="api/events" >Events</a></li>

diff --git a/docs/api/assets.html b/docs/api/assets.html
@@ -42,6 +42,7 @@
             <ul aria-labelledby="api">
               <li><a href="api/animation" >Animation</a></li>
               <li><a href="api/assets" aria-current="page">Assets</a></li>
+              <li><a href="api/button" >Button</a></li>
               <li><a href="api/collision" >Collision</a></li>
               <li><a href="api/core" >Core</a></li>
               <li><a href="api/events" >Events</a></li>

diff --git a/docs/api/button.html b/docs/api/button.html
@@ -0,0 +1,362 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Kontra.js – Button</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <base href="https://straker.github.io/kontra/">
+
+  <script>
+  // adjust path based on location (github pages required kontra url)
+  if (window.location.host.indexOf('localhost') !== -1) {
+    let base = document.querySelector('base');
+    base.setAttribute('href', '/');
+  }
+  </script>
+
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/themes/prism.min.css">
+  <link rel="stylesheet" href="assets/styles.css">
+  <script src="assets/js/kontra.js"></script>
+</head>
+<body>
+  <div class="content">
+    <header class="main-nav">
+      <div id="kontra-heading" class="nav-heading">Kontra</div>
+      <a href="#main">Skip navigation</a>
+
+      <nav>
+        <button class="menu-button" aria-expanded="false" aria-controls="menu"><span aria-hidden="true">☰</span> Menu</button>
+
+        <!-- add role=list back to list so screen readers still read it as list when
+             css list-style: none is set
+             @see https://web-a11y.slack.com/archives/C042TSFGN/p1501699529181172 -->
+        <ul id="menu" role="list">
+          <li><a href="." >Introduction</a></li>
+          <li><a href="getting-started" >Getting Started</a></li>
+          <li><a href="download" >Download</a></li>
+          <li><a href="custom-builds" >Custom Builds</a></li>
+          <li><a href="tutorials" >Tutorials</a></li>
+          <li><a href="made-with-kontra" >Made With Kontra</a></li>
+
+          <li>
+            <span id="api" class="nav-api-heading">API</span>
+            <ul aria-labelledby="api">
+              <li><a href="api/animation" >Animation</a></li>
+              <li><a href="api/assets" >Assets</a></li>
+              <li><a href="api/button" aria-current="page">Button</a></li>
+              <li><a href="api/collision" >Collision</a></li>
+              <li><a href="api/core" >Core</a></li>
+              <li><a href="api/events" >Events</a></li>
+              <li><a href="api/gameLoop" >GameLoop</a></li>
+              <li><a href="api/gameobject" >GameObject</a></li>
+              <li><a href="api/keyboard" >Keyboard</a></li>
+              <li><a href="api/plugin" >Plugin</a></li>
+              <li><a href="api/pointer" >Pointer</a></li>
+              <li><a href="api/pool" >Pool</a></li>
+              <li><a href="api/quadtree" >Quadtree</a></li>
+              <li><a href="api/sprite" >Sprite</a></li>
+              <li><a href="api/spriteSheet" >SpriteSheet</a></li>
+              <li><a href="api/store" >Store</a></li>
+              <li><a href="api/text" >Text</a></li>
+              <li><a href="api/tileEngine" >TileEngine</a></li>
+              <li><a href="api/vector" >Vector</a></li>
+            </ul>
+          </li>
+        </ul>
+      </nav>
+      <div class="scroll-indicator" aria-hidden="true"><span>^</span></div>
+    </header>
+
+    <main id="main">
+      <div>
+        <a href="https://github.com/straker/kontra" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+        <h1>Button(&#8203;properties)
+        </h1>
+
+        <p>An accessible button. Supports screen readers and keyboard navigation using the Tab key. Don&#39;t forget to call <a href="/api/pointer#initPointer">initPointer</a> and <a href="/api/pointer#track">track</a> to have pointer events enabled on the button.</p>
+<div class="tablist">
+  <ul role="tablist">
+    <li role="presentation" data-tab="global">
+      <button role="tab" id="button-global-tab">Global Object</button>
+    </li>
+    <li role="presentation" data-tab="es">
+      <button role="tab" id="button-es-tab">ES Module Import</button>
+    </li>
+    <li role="presentation" data-tab="bundle">
+      <button role="tab" id="button-bundle-tab">Module Bundler</button>
+    </li>
+    <li role="presentation"></li>
+  </ul>
+  <section role="tabpanel" aria-labelledby=button-global-tab data-tabpanel="global"><pre><code class="language-js">let { initPointer, track, Button } = kontra;
+initPointer();
+
+button = Button({
+  x: 200,
+  y: 200,
+  text: &#39;Click me&#39;,
+  color: &#39;white&#39;,
+  font: &#39;20px Arial&#39;,
+  onFocus() {
+    this.color = &#39;red&#39;;
+    canvas.style.cursor = &#39;pointer&#39;;
+  },
+  onBlur() {
+    this.color = &#39;white&#39;;
+    canvas.style.cursor = &#39;initial&#39;;
+  },
+  onDown() {
+    this.color = &#39;blue&#39;;
+  },
+  onUp() {
+    this.color = this.focused ? &#39;red&#39; : &#39;white&#39;;
+    console.log(&#39;click&#39;);
+  }
+});
+
+track(button);
+button.render();
+```js</code></pre></section>
+  <section role="tabpanel" aria-labelledby=button-es-tab data-tabpanel="es"><pre><code class="language-js">import { initPointer, track, Button } from 'path/to/kontra.mjs';
+initPointer();
+
+button = Button({
+  x: 200,
+  y: 200,
+  text: &#39;Click me&#39;,
+  color: &#39;white&#39;,
+  font: &#39;20px Arial&#39;,
+  onFocus() {
+    this.color = &#39;red&#39;;
+    canvas.style.cursor = &#39;pointer&#39;;
+  },
+  onBlur() {
+    this.color = &#39;white&#39;;
+    canvas.style.cursor = &#39;initial&#39;;
+  },
+  onDown() {
+    this.color = &#39;blue&#39;;
+  },
+  onUp() {
+    this.color = this.focused ? &#39;red&#39; : &#39;white&#39;;
+    console.log(&#39;click&#39;);
+  }
+});
+
+track(button);
+button.render();
+```js</code></pre></section>
+  <section role="tabpanel" aria-labelledby=button-bundle-tab data-tabpanel="bundle"><pre><code class="language-js">import { initPointer, track, Button } from &#39;kontra&#39;;
+initPointer();
+
+button = Button({
+  x: 200,
+  y: 200,
+  text: &#39;Click me&#39;,
+  color: &#39;white&#39;,
+  font: &#39;20px Arial&#39;,
+  onFocus() {
+    this.color = &#39;red&#39;;
+    canvas.style.cursor = &#39;pointer&#39;;
+  },
+  onBlur() {
+    this.color = &#39;white&#39;;
+    canvas.style.cursor = &#39;initial&#39;;
+  },
+  onDown() {
+    this.color = &#39;blue&#39;;
+  },
+  onUp() {
+    this.color = this.focused ? &#39;red&#39; : &#39;white&#39;;
+    console.log(&#39;click&#39;);
+  }
+});
+
+track(button);
+button.render();
+```js</code></pre></section>
+</div>
+          <p><strong>Extends:</strong> <a href="api/text">Text</a></p>
+        <h3 id="title-Button"><span class="visually-hidden">Button</span> Parameters</span></h3>
+        <dl aria-labelledby="title-Button">
+          <dt>
+            <code>properties</code>
+
+          </dt>
+          <dd><p>Object. Properties of the button (in addition to all Text properties).</p>
+        </dd>
+          <dt>
+            <code>properties.onEnable</code>
+            <span class="optional">Optional</span>
+          </dt>
+          <dd><p>Function. Function called when the button is enabled.</p>
+        </dd>
+          <dt>
+            <code>properties.onDisable</code>
+            <span class="optional">Optional</span>
+          </dt>
+          <dd><p>Function. Function called when the button is disabled.</p>
+        </dd>
+          <dt>
+            <code>properties.onFocus</code>
+            <span class="optional">Optional</span>
+          </dt>
+          <dd><p>Function. Function called when the button is focused either by the pointer or keyboard.</p>
+        </dd>
+          <dt>
+            <code>properties.onBlur</code>
+            <span class="optional">Optional</span>
+          </dt>
+          <dd><p>Function. Function called when the button losses focus either by the pointer or keyboard.</p>
+        </dd>
+          <dt>
+            <code>properties.onUp</code>
+            <span class="optional">Optional</span>
+          </dt>
+          <dd><p>Function. Function called when the button is clicked either by the pointer or keyboard.</p>
+        </dd>
+        </dl>
+
+
+        <section class="toc">
+          <h2 id="toc"><a href="#toc" class="section-link">Table of Contents<span aria-hidden="true">#</span></a></h2>
+
+          <ul aria-labelledby="toc">
+
+            <li>
+              <h3 id="properties">Properties</h3>
+              <ul aria-labelledby="properties">
+                <li>
+                  <a href="api/button#disabled">
+                    <span>Button&#8203;.disabled</span>
+                  </a>
+                </li>
+                <li>
+                  <a href="api/button#focused">
+                    <span>Button&#8203;.focused</span>
+                  </a>
+                </li>
+              </ul>
+            </li>
+
+            <li>
+              <h3 id="methods">Methods</h3>
+              <ul aria-labelledby="methods">
+                <li>
+                  <a href="api/button#Destroy">
+                    <span>Button&#8203;.Destroy(&#8203;)</span>
+                  </a>
+                </li>
+                <li>
+                  <a href="api/button#blur">
+                    <span>Button&#8203;.blur(&#8203;)</span>
+                  </a>
+                </li>
+                <li>
+                  <a href="api/button#disable">
+                    <span>Button&#8203;.disable(&#8203;)</span>
+                  </a>
+                </li>
+                <li>
+                  <a href="api/button#enable">
+                    <span>Button&#8203;.enable(&#8203;)</span>
+                  </a>
+                </li>
+                <li>
+                  <a href="api/button#focus">
+                    <span>Button&#8203;.focus(&#8203;)</span>
+                  </a>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </section>
+
+
+        <section>
+          <h2 id="Destroy">
+            <a href="api/button#Destroy" class="section-link">
+              <span>Button&#8203;.Destroy(&#8203;)</span>
+              <span aria-hidden="true">#</span>
+            </a>
+          </h2>
+
+          <p>Clean up the button.</p>
+
+        </section>
+        <section>
+          <h2 id="blur">
+            <a href="api/button#blur" class="section-link">
+              <span>Button&#8203;.blur(&#8203;)</span>
+              <span aria-hidden="true">#</span>
+            </a>
+          </h2>
+
+          <p>Blur the button.</p>
+
+        </section>
+        <section>
+          <h2 id="disable">
+            <a href="api/button#disable" class="section-link">
+              <span>Button&#8203;.disable(&#8203;)</span>
+              <span aria-hidden="true">#</span>
+            </a>
+          </h2>
+
+          <p>Disable the button.</p>
+
+        </section>
+        <section>
+          <h2 id="disabled">
+            <a href="api/button#disabled" class="section-link">
+              <span>Button&#8203;.disabled</span>
+              <span aria-hidden="true">#</span>
+            </a>
+          </h2>
+
+          <p>If the button is disabled.</p>
+
+        </section>
+        <section>
+          <h2 id="enable">
+            <a href="api/button#enable" class="section-link">
+              <span>Button&#8203;.enable(&#8203;)</span>
+              <span aria-hidden="true">#</span>
+            </a>
+          </h2>
+
+          <p>Enable the button.</p>
+
+        </section>
+        <section>
+          <h2 id="focus">
+            <a href="api/button#focus" class="section-link">
+              <span>Button&#8203;.focus(&#8203;)</span>
+              <span aria-hidden="true">#</span>
+            </a>
+          </h2>
+
+          <p>Focus the button.</p>
+
+        </section>
+        <section>
+          <h2 id="focused">
+            <a href="api/button#focused" class="section-link">
+              <span>Button&#8203;.focused</span>
+              <span aria-hidden="true">#</span>
+            </a>
+          </h2>
+
+          <p>If the button is focused.</p>
+
+        </section>
+
+      </div>
+    </main>
+  </div>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/prism.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/components/prism-javascript.min.js"></script>
+  <script src="assets/js/navbar.js"></script>
+  <script src="assets/js/exampleTabList.js"></script>
+</body>
+</html>
diff --git a/docs/api/collision.html b/docs/api/collision.html
@@ -42,6 +42,7 @@
             <ul aria-labelledby="api">
               <li><a href="api/animation" >Animation</a></li>
               <li><a href="api/assets" >Assets</a></li>
+              <li><a href="api/button" >Button</a></li>
               <li><a href="api/collision" aria-current="page">Collision</a></li>
               <li><a href="api/core" >Core</a></li>
               <li><a href="api/events" >Events</a></li>