gaiety/sortable-recipes
1
0
Fork 0
Code Activity

Presentation adjustments

Browse source
This commit is contained in:
Ava Wroten 2020-03-15 23:28:59 -05:00
parent 062a7ae23b
commit 8a94ede329
1 changed files with 52 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
presentation/index.html
View file

@ -4,7 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>reveal.js</title> <title>A11y First, and Everyone Wins</title>
<link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/reveal.css"> <link rel="stylesheet" href="css/reveal.css">
@ -78,16 +78,17 @@
<p>A project feature saved by A11y</p> <p>A project feature saved by A11y</p>
<ul> <ul>
<li>Composable Components</li> <li>Adding Functionality w/ Composable Components</li>
<li>Discoverable UX</li> <li class="fragment">Equitable & Discoverable UX</li>
<li>Rendering Tests</li> <li class="fragment">Automation Testing A11y</li>
</ul> </ul>
</section> </section>
<section> <section>
<h2> <h2>
Feature: <em>Item Reordering</em> Feature:
</h2> </h2>
<h3>Item Reordering</h3>
<p class="fragment">Mouse Drag & Drop</p> <p class="fragment">Mouse Drag & Drop</p>
<p class="fragment text-gray-600">Do we support Touch?</p> <p class="fragment text-gray-600">Do we support Touch?</p>
<p class="fragment text-yellow-400">What about A11y?</p> <p class="fragment text-yellow-400">What about A11y?</p>
@ -127,15 +128,6 @@
</h2> </h2>
</section> </section>
<section>
<p>Web assistive technologies commonly help with...</p>
<ul>
<li>Vision</li>
<li>Hearing</li>
<li>Movement</li>
</ul>
</section>
<section> <section>
<h2>Degrees of Disabilities</h2> <h2>Degrees of Disabilities</h2>
<p>Limited mobility, muscle slowness, tremors, low vision, color blindness, partial hearing loss, etc</p> <p>Limited mobility, muscle slowness, tremors, low vision, color blindness, partial hearing loss, etc</p>
@ -150,6 +142,15 @@
</aside> </aside>
</section> </section>
<section>
<p>Web assistive technologies commonly help with...</p>
<ul>
<li>Vision</li>
<li>Hearing</li>
<li>Movement</li>
</ul>
</section>
<section> <section>
<p>👩🏽‍🔬 👨🏾‍🎨 👩🏻‍🔧 👨🏼‍✈️</p> <p>👩🏽‍🔬 👨🏾‍🎨 👩🏻‍🔧 👨🏼‍✈️</p>
<p>I build software for humans</p> <p>I build software for humans</p>
@ -164,16 +165,22 @@
</section> </section>
<section data-background-iframe="https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/listbox-rearrangeable.html" data-background-interactive> <section data-background-iframe="https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/listbox-rearrangeable.html" data-background-interactive>
<p class="bg-black float-right p-12 rounded-full shadow-lg text-xl">W3C Pattern Rearrangable Listbox</p>
<aside class="notes"> <aside class="notes">
This UI felt intuitive because it used existing UI elements and keyboard shortcuts I was familiar with. This UI felt intuitive because it used existing UI elements and keyboard shortcuts I was familiar with.
</aside> </aside>
</section> </section>
<section>
<p><a href="https://emberobserver.com/addons/ember-sortable"><img src="./sortable.png" alt="ember-sortable on ember observer" /></a></p>
</section>
<section> <section>
<h2><a href="https://github.com/adopted-ember-addons/ember-sortable">ember-sortable</a></h2> <h2><a href="https://github.com/adopted-ember-addons/ember-sortable">ember-sortable</a></h2>
<p>✔️ Mouse Drag & Drop</p> <p>✔️ Mouse Drag & Drop</p>
<p>✔️ Touch Drag & Drop</p> <p>✔️ Touch Drag & Drop</p>
<p>✔️ High Ember Observer Ranking</p>
</section> </section>
<section> <section>
@ -190,7 +197,7 @@
``` ```
</div> </div>
<div data-markdown class="w-1/2"> <div data-markdown class="w-1/2 fragment">
Custom Wrappers Custom Wrappers
```html.hbs ```html.hbs
@ -202,7 +209,19 @@
</div> </div>
</section> </section>
<section>
<p>Heres the final result...</p>
</section>
<section data-background-iframe="http://localhost:4200/52958" data-background-interactive> <section data-background-iframe="http://localhost:4200/52958" data-background-interactive>
<p class="bg-black float-right p-12 rounded-full shadow-lg text-xl" style="margin-top: 400px;">
<a href="https://gitlab.com/gaiety/sortable-recipes">https://gitlab.com/gaiety/sortable-recipes</a>
</p>
</section>
<section>
<h2>Implementation Details</h2>
<p><a href="https://gitlab.com/gaiety/sortable-recipes">https://gitlab.com/gaiety/sortable-recipes</a></p>
</section> </section>
<section> <section>
@ -241,6 +260,10 @@
&gt; Foo &lt;/div&gt; &gt; Foo &lt;/div&gt;
</code></pre> </code></pre>
</div> </div>
<aside class="notes">
Useful with glimmer components that dont have a default div wrapper. Moves implementation details to parent.
</aside>
</section> </section>
<section> <section>
@ -336,14 +359,14 @@
<li> <li>
Quick Feedback Loop Quick Feedback Loop
<ul> <ul>
<li><span class="text-gray-600">...with </span> development</li> <li class="fragment"><span class="text-gray-600">...with </span> development</li>
<li><span class="text-gray-600">...with </span> design</li> <li class="fragment"><span class="text-gray-600">...with </span> design</li>
<li><span class="text-gray-600">...with </span> project managers</li> <li class="fragment"><span class="text-gray-600">...with </span> project managers</li>
</ul> </ul>
</li> </li>
<li>Sign off for UX</li> <li class="fragment">Sign off for UX</li>
<li>Less stress on QA</li> <li class="fragment">Less stress on QA</li>
<li>Less scope creep</li> <li class="fragment">Less scope creep</li>
</ul> </ul>
</section> </section>
@ -355,6 +378,7 @@
<h2>Where do we go from here?</h2> <h2>Where do we go from here?</h2>
<ul> <ul>
<li class="fragment">A11y Screen Announcements</li>
<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/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> <li class="fragment"><a href="https://github.com/ember-a11y/ember-a11y-testing">ember-a11y-testing</a></li>
</ul> </ul>
@ -362,12 +386,12 @@
<section> <section>
<h2> <h2>
Outro What We Discussed
</h2> </h2>
<ul> <ul>
<li>Adding Functionality w/ Composable Components</li> <li>Adding Functionality w/ Composable Components</li>
<li>Equitable & Discoverable UX</li> <li class="fragment">Equitable & Discoverable UX</li>
<li>Automation Testing A11y</li> <li class="fragment">Automation Testing A11y</li>
</ul> </ul>
</section> </section>
@ -386,6 +410,10 @@
And, finally, make A11y a priority. You may be surprised how many people thank you for it. And, finally, make A11y a priority. You may be surprised how many people thank you for it.
</aside> </aside>
</section> </section>
<section>
<p>Thank you</p>
</section>
</div> </div>
</div> </div>