411 lines
13 KiB
HTML
411 lines
13 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
|
|
<title>reveal.js</title>
|
|
|
|
<link rel="stylesheet" href="css/reset.css">
|
|
<link rel="stylesheet" href="css/reveal.css">
|
|
<link rel="stylesheet" href="css/theme/black.css">
|
|
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
|
|
|
<!-- Theme used for syntax highlighting of code -->
|
|
<link rel="stylesheet" href="lib/css/monokai.css">
|
|
|
|
<style>
|
|
.reveal pre code {
|
|
background: black;
|
|
padding-top: 1em;
|
|
padding-bottom: 1em;
|
|
}
|
|
</style>
|
|
|
|
<!-- Printing and PDF exports -->
|
|
<script>
|
|
var link = document.createElement( 'link' );
|
|
link.rel = 'stylesheet';
|
|
link.type = 'text/css';
|
|
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
|
|
document.getElementsByTagName( 'head' )[0].appendChild( link );
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="reveal">
|
|
<div class="slides">
|
|
<section class="text-left">
|
|
<h1 class="m-0 leading-none">
|
|
A11y First
|
|
<div>
|
|
<small>
|
|
<span class="text-gray-600">&</span> Everyone Wins
|
|
</small>
|
|
</div>
|
|
</h1>
|
|
<h2>
|
|
<span class="text-yellow-400 text-4xl">
|
|
More Composable, Intuitive & Testable
|
|
</span>
|
|
</h2>
|
|
<small><a href="https://www.wroten.me/">Ava Gaiety Wroten</a></small>
|
|
</section>
|
|
|
|
<section>
|
|
<p>
|
|
Ava Wroten
|
|
<br>
|
|
<small>She/Her</small>
|
|
</p>
|
|
<img src="./photo.png" alt="" role="presentation" class="w-40 inline-block" />
|
|
<p>
|
|
Software Engineer at <a href="https://allovue.com/"><img src="./allovue.svg" alt="Allovue" class="inline-block pl-4 shadow-none" style="border: none; background: transparent; height: 1.25em;" /></a>
|
|
</p>
|
|
<p class="text-sm">
|
|
On Gitlab @gaiety
|
|
<span class="inline-block mx-4">
|
|
<img src="./avatar.png" alt="" role="presentation" class="inline-block w-20" />
|
|
</span>
|
|
Or Github @sharpshark28
|
|
</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>
|
|
We'll Discuss
|
|
</h2>
|
|
|
|
<p>A project feature saved by A11y</p>
|
|
|
|
<ul>
|
|
<li>Composable Components</li>
|
|
<li>Discoverable UX</li>
|
|
<li>Rendering Tests</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>
|
|
Feature: <em>Item Reordering</em>
|
|
</h2>
|
|
<p class="fragment">Mouse Drag & Drop</p>
|
|
<p class="fragment text-gray-600">Do we support Touch?</p>
|
|
<p class="fragment text-yellow-400">What about A11y?</p>
|
|
|
|
<aside class="notes">
|
|
Sounds simple enough. Perhaps, too "simple".
|
|
</aside>
|
|
</section>
|
|
|
|
<section class="font-mono">
|
|
<p><span class="text-yellow-400">A11Y</span></p>
|
|
<p class="fragment"><span class="text-yellow-400">A</span>....11.....<span class="text-yellow-400">Y</span></p>
|
|
<p class="fragment"><span class="text-yellow-400">A</span>ccessibilit<span class="text-yellow-400">y</span></p>
|
|
</section>
|
|
|
|
<section>
|
|
<p>Equity</p>
|
|
|
|
<aside class="notes">
|
|
At Allovue we talk Equity a lot. I was tasked with delivering a feature that not everyone could use. This felt unfair locking out opportunities to use parts of the app from some users.
|
|
</aside>
|
|
</section>
|
|
|
|
<section>
|
|
<div>
|
|
<cite class="text-sm text-gray-400">
|
|
World Health Organization
|
|
</cite>
|
|
</div>
|
|
<h2>
|
|
<span class="text-yellow-400">15%</span> of the World
|
|
<div>
|
|
<small>
|
|
lives with some form of disability
|
|
</small>
|
|
</div>
|
|
</h2>
|
|
</section>
|
|
|
|
<section>
|
|
<p>Web assistive technologies commonly help with...</p>
|
|
<ul>
|
|
<li>Vision</li>
|
|
<li>Hearing</li>
|
|
<li>Movement</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Degrees of Disabilities</h2>
|
|
<p>Limited mobility, muscle slowness, tremors, low vision, color blindness, partial hearing loss, etc</p>
|
|
|
|
<footer>
|
|
<p class="text-sm"><a href="https://accessibility.iu.edu/understanding-accessibility/types-of-disabilities.html">Indiana University on Types of Disabilities</a></p>
|
|
</footer>
|
|
|
|
<aside class="notes">
|
|
There are other forms of disability as well as varying degrees of disability.
|
|
People are human, we have differing levels of ability.
|
|
</aside>
|
|
</section>
|
|
|
|
<section>
|
|
<p>👩🏽🔬 👨🏾🎨 👩🏻🔧 👨🏼✈️</p>
|
|
<p>I build software for humans</p>
|
|
|
|
<aside class="notes">
|
|
I wouldn't be happy with myself if I shipped software that was completely unusable to some users in a shortsighted fashion.
|
|
</aside>
|
|
</section>
|
|
|
|
<section>
|
|
<p>So I did some research...</p>
|
|
</section>
|
|
|
|
<section data-background-iframe="https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/listbox-rearrangeable.html" data-background-interactive>
|
|
<aside class="notes">
|
|
This UI felt intuitive because it used existing UI elements and keyboard shortcuts I was familiar with.
|
|
</aside>
|
|
</section>
|
|
|
|
<section>
|
|
<h2><a href="https://github.com/adopted-ember-addons/ember-sortable">ember-sortable</a></h2>
|
|
|
|
<p>✔️ Mouse Drag & Drop</p>
|
|
<p>✔️ Touch Drag & Drop</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Component Structure</h2>
|
|
|
|
<div class="flex">
|
|
<div data-markdown class="w-1/2">
|
|
ember-sortable
|
|
|
|
```html.hbs
|
|
<SortableGroup>
|
|
|
|
<SortableItem>
|
|
```
|
|
</div>
|
|
|
|
<div data-markdown class="w-1/2">
|
|
Custom Wrappers
|
|
|
|
```html.hbs
|
|
<SortableGroupAccessible>
|
|
|
|
<SortableItemAccessible>
|
|
```
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section data-background-iframe="http://localhost:4200/52958" data-background-interactive>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Splattributes</h2>
|
|
|
|
<p class="text-xl text-left text-gray-600">
|
|
index.hbs
|
|
</p>
|
|
|
|
<pre><code class="hljs html.hbs" data-line-numbers="2-3" data-trim>
|
|
<SortableGroupAccessible
|
|
tabindex="0"
|
|
class="border focus:border-teal-400"
|
|
> Foo </SortableGroupAccessible>
|
|
</code></pre>
|
|
|
|
<div class="fragment">
|
|
<p class="text-xl text-left text-gray-600">
|
|
sortable-group-accessible.hbs
|
|
</p>
|
|
|
|
<pre><code class="hljs html.hbs" data-line-numbers="1" data-trim>
|
|
<div ...attributes>
|
|
{{yield}}
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="fragment">
|
|
<p class="text-xl text-left text-gray-600">
|
|
rendered html
|
|
</p>
|
|
|
|
<pre><code class="hljs html.hbs" data-line-numbers="1" data-trim>
|
|
<div tabindex="0" class="border focus:border-teal-400"
|
|
> Foo </div>
|
|
</code></pre>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Events & Modifiers</h2>
|
|
|
|
<p class="text-xl text-left text-gray-600">
|
|
sortable-group-accessible.hbs
|
|
</p>
|
|
|
|
<pre><code class="hljs html.hbs" data-line-numbers="2,4" data-trim>
|
|
<div
|
|
{{on 'focus' this.handleFocus}}
|
|
{{on 'blur' this.handleBlur}}
|
|
{{key-up this.handleArrowUp key='ArrowUp'}}
|
|
{{key-up this.handleArrowDown key='ArrowDown'}}
|
|
</code></pre>
|
|
|
|
<p class="text-xl text-left text-gray-600">
|
|
modifiers/key-up.js
|
|
</p>
|
|
|
|
<pre><code class="hljs js" data-line-numbers="6-7" data-trim>
|
|
import { modifier } from 'ember-modifier';
|
|
const listener = (evt) => {
|
|
if (!desiredKey || desiredKey === evt.key) handler(evt);
|
|
}
|
|
export default modifier(function keyUp(element, [handler], { key: desiredKey }) {
|
|
element.addEventListener('keyup', listener);
|
|
return () => { element.removeEventListener('keyup', listener); }
|
|
});
|
|
</code></pre>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>@ember/test-helpers</h2>
|
|
|
|
<ul>
|
|
<li>click</li>
|
|
<li class="fragment">triggerEvent</li>
|
|
<li class="fragment">triggerKeyEvent</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Modifier Tests</h2>
|
|
|
|
<p class="text-xl text-left text-gray-600">
|
|
modifiers/key-up-test.js
|
|
</p>
|
|
|
|
<pre><code class="hljs js" data-line-numbers="2-4,7,9-10" data-trim>
|
|
test('it can listen for specific key up events', async function(assert) {
|
|
this.keyUp = ({ key }) => {
|
|
assert.step('key up');
|
|
assert.equal(key, 'Enter');
|
|
};
|
|
await render(hbs`
|
|
<div {{key-up this.keyUp}} data-test-id='keyup'></div>`);
|
|
let selector = '[data-test-id=keyup]';
|
|
await triggerKeyEvent(selector, 'keyup', 'Enter');
|
|
assert.verifySteps(['key up']);
|
|
});
|
|
</code></pre>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Testing Reordering</h2>
|
|
|
|
<p class="text-xl text-left text-gray-600">
|
|
index-test.js
|
|
</p>
|
|
|
|
<pre><code class="hljs js" data-trim>
|
|
assert.dom(findAll('[data-test-id=item]')[0]).hasText('Item 1');
|
|
assert.dom(findAll('[data-test-id=item]')[1]).hasText('Item 2');
|
|
|
|
await triggerEvent('[data-test-id=group]', 'focus');
|
|
await click('[data-test-id=sort-down]');
|
|
|
|
assert.dom(findAll('[data-test-id=item]')[0]).hasText('Item 2');
|
|
assert.dom(findAll('[data-test-id=item]')[1]).hasText('Item 1');
|
|
</code></pre>
|
|
</section>
|
|
|
|
<section>
|
|
🎉 A11y allowed us to test reordering! 🎉
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Team Wins</h2>
|
|
|
|
<ul>
|
|
<li>
|
|
Quick Feedback Loop
|
|
<ul>
|
|
<li><span class="text-gray-600">...with </span> development</li>
|
|
<li><span class="text-gray-600">...with </span> design</li>
|
|
<li><span class="text-gray-600">...with </span> project managers</li>
|
|
</ul>
|
|
</li>
|
|
<li>Sign off for UX</li>
|
|
<li>Less stress on QA</li>
|
|
<li>Less scope creep</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section data-background-iframe="http://localhost:4201/52958" data-background-interactive>
|
|
<p>v2.x.x ember-sortable</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Where do we go from here?</h2>
|
|
|
|
<ul>
|
|
<li class="fragment"><a href="https://github.com/adopted-ember-addons/ember-sortable/pull/345">ember-sortable v2.2.x modifiers</a></li>
|
|
<li class="fragment"><a href="https://github.com/ember-a11y/ember-a11y-testing">ember-a11y-testing</a></li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>
|
|
Outro
|
|
</h2>
|
|
<ul>
|
|
<li>Adding Functionality w/ Composable Components</li>
|
|
<li>Equitable & Discoverable UX</li>
|
|
<li>Automation Testing A11y</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section data-background-color="#5677e4">
|
|
<p><a href="https://allovue.com/about/careers"><img src="./allovue.svg" alt="Allovue" class="inline-block" style="border: none; background: none; height: 2em; box-shadow: none;" /></a></p>
|
|
<p><a href="https://allovue.com/about/careers" style="color: white">We are hiring!</a></p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Ava's Challenge to You</h2>
|
|
<p class="fragment">Hire someone different than you.</p>
|
|
<p class="fragment">Make A11y a priority at your next design meeting!</p>
|
|
|
|
<aside class="notes">
|
|
Hire someone different than you: Race, Religion, Orientation, Gender, megablocks VS Legos.
|
|
And, finally, make A11y a priority. You may be surprised how many people thank you for it.
|
|
</aside>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/reveal.js"></script>
|
|
|
|
<script>
|
|
// More info about config & dependencies:
|
|
// - https://github.com/hakimel/reveal.js#configuration
|
|
// - https://github.com/hakimel/reveal.js#dependencies
|
|
Reveal.initialize({
|
|
hash: true,
|
|
progress: false,
|
|
transition: 'fade',
|
|
dependencies: [
|
|
{ src: 'plugin/markdown/marked.js' },
|
|
{ src: 'plugin/markdown/markdown.js' },
|
|
{ src: 'plugin/highlight/highlight.js' },
|
|
{ src: 'plugin/notes/notes.js', async: true }
|
|
]
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|