A11y improvements

app/components/callout.hbs

@@ -0,0 +1,4 @@
+<h1 ...attributes class="callout">
+  <span class="callout-subtitle">{{@subtitle}}</span><br>
+  <span class="callout-title">{{yield}}</span>
+</h1>

app/controllers/bingo.js → app/controllers/contribute.js

@@ -4,7 +4,7 @@ import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import ContributeModal from '../components/contribute-modal';
 
-export default class BingoController extends Controller {
+export default class ContributeController extends Controller {
   @service modals;
   @tracked selected = { title: '', icon: '' };
   dialog = document.querySelector('dialog');

app/router.js

@@ -8,6 +8,6 @@ export default class Router extends EmberRouter {
 
 Router.map(function () {
   this.route('glossary');
-  this.route('bingo');
+  this.route('contribute');
   this.route('resources');
 });

app/routes/bingo.js → app/routes/contribute.js

@@ -166,7 +166,7 @@ const cells = [
   },
 ].map((i) => tracked({ ...i, completed: completedCells.includes(i.title) }));
 
-export default class BingoRoute extends Route {
+export default class ContributeRoute extends Route {
   model() {
     return cells;
   }

app/styles/app.css

@@ -16,7 +16,7 @@ body {
   font-family: Inter, sans-serif;
 }
 
-h3 {
+h2 {
   color: var(--primary-color);
   font-family: "PT serif", serif;
   font-size: 2.5em;
@@ -35,6 +35,10 @@ p.intro {
   line-height: 1.5em;
 }
 
+nav li {
+  list-style-type: none;
+}
+
 .navbar {
   display: flex;
   justify-content: space-between;
@@ -43,24 +47,25 @@ p.intro {
   margin-top: 38px;
 }
 
-.navbar > nav {
+.navbar > nav > ul {
   height: 60px;
   display: flex;
   justify-content: flex-end;
   gap: 34px;
   align-items: center;
   padding-right: 100px;
+  margin: 0;
 }
 
-nav > a {
+nav > ul > li > a {
   font-family: Inter, sans-serif;
   color: black;
   font-size: 1.25em;
   text-decoration: none;
   font-weight: 300;
 }
 
-nav > a.active {
+nav > ul > li > a.active {
   color: var(--primary-color);
   text-decoration: underline;
   text-underline-offset: 8px;
@@ -89,11 +94,12 @@ nav > a.active {
   left: -100vw;
 }
 
-.mobile > nav {
+.mobile > nav > ul {
   display: flex;
   flex-direction: column;
   padding: 20px;
   gap: 16px;
+  margin: 0;
 }
 
 /* stylelint-disable-next-line selector-class-pattern */
@@ -109,30 +115,31 @@ nav > a.active {
   padding: 20px;
 }
 
-.callout-focus {
+.callout-subtitle {
+  margin: 0;
+  margin-bottom: 4px;
+  font-size: 1.5em;
+  font-weight: 300;
+}
+
+.callout-title {
   font-size: 4em;
   color: var(--primary-color);
   margin: 0;
   font-family: "PT serif", serif;
 }
 
 .callout {
+  font-size: 1em;
   margin-bottom: 25px;
 }
 
-.callout > h2 {
-  margin: 0;
-  margin-bottom: 4px;
-  font-size: 1.5em;
-  font-weight: 300;
-}
-
-.callout.landing-callout > .callout-focus {
+.callout.landing-callout > .callout-title {
   font-size: 5em;
   line-height: 79px;
 }
 
-.callout.landing-callout > h2 {
+.callout.landing-callout > .callout-subtitle {
   font-size: 2em;
 }
 
@@ -145,6 +152,11 @@ nav > a.active {
   font-size: 1.125em;
 }
 
+.button-index:focus {
+  outline: 2px var(--primary-hover-color) dotted;
+  outline-offset: 2px;
+}
+
 .menu-button {
   border: none;
   background-color: transparent;

app/styles/bingo.css

@@ -1,7 +1,11 @@
-body.bingo {
+body.contribute {
   background-color: var(--background-color);
 }
 
+.no-roles {
+  font-style: italic;
+}
+
 .bingo-card {
   display: flex;
   flex-wrap: wrap;
@@ -25,6 +29,10 @@ body.bingo {
   color: black;
 }
 
+.cell:focus-visible {
+  outline: 2px dotted var(--blob-color);
+}
+
 .title {
   font-family: "PT Serif", serif;
   font-size: 1.375em;

app/styles/resources.css

@@ -26,6 +26,7 @@ body.resources {
   color: black;
   font-size: 1.5em;
   margin-bottom: 0;
+  font-family: "PT serif", serif;
 }
 
 .resource-header > svg {

app/templates/application.hbs

@@ -4,10 +4,20 @@
 <div class="navbar">
   <LinkTo @route="index"><img src="logo.svg" alt="4 abstract people"></LinkTo>
   <nav>
-    <LinkTo @route="index">Home</LinkTo>
-    <LinkTo @route="bingo">Contribute</LinkTo>
-    <LinkTo @route="glossary">Glossary</LinkTo>
-    <LinkTo @route="resources">Resources</LinkTo>
+    <ul>
+      <li>
+        <LinkTo @route="index">Home</LinkTo>
+      </li>
+      <li>
+        <LinkTo @route="contribute">Contribute</LinkTo>
+      </li>
+      <li>
+        <LinkTo @route="glossary">Glossary</LinkTo>
+      </li>
+      <li>
+        <LinkTo @route="resources">Resources</LinkTo>
+      </li>
+    </ul>
   </nav>
 </div>
 <div class="container">
@@ -19,8 +29,8 @@
   <mmw.Content class="mobile-container">
     <div class="mobile-bar">
       <LinkTo @route="index"><img src="logo.svg" alt="4 abstract people"></LinkTo>
-      <mmw.Toggle class="menu-button">
-        <FaIcon @icon="bars" />
+      <mmw.Toggle class="menu-button" aria-label="menu button">
+        <FaIcon @icon="bars"  alt="Hamburger menu"/>
       </mmw.Toggle>
     </div>
     {{outlet}}
@@ -29,10 +39,20 @@
     <div class="menu mobile">
       {{!-- template-lint-disable no-duplicate-landmark-elements --}}
       <nav>
-        <mm.LinkTo @route="index">Home</mm.LinkTo>
-        <mm.LinkTo @route="bingo">Contribute</mm.LinkTo>
-        <mm.LinkTo @route="glossary">Glossary</mm.LinkTo>
-        <mm.LinkTo @route="resources">Resources</mm.LinkTo>
+        <ul>
+          <li>
+            <mm.LinkTo @route="index">Home</mm.LinkTo>
+          </li>
+          <li>
+            <mm.LinkTo @route="contribute">Contribute</mm.LinkTo>
+          </li>
+          <li>
+            <mm.LinkTo @route="glossary">Glossary</mm.LinkTo>
+          </li>
+          <li>
+            <mm.LinkTo @route="resources">Resources</mm.LinkTo>
+          </li>
+        </ul>
       </nav>
     </div>
   </mmw.MobileMenu>

app/templates/bingo.hbs → app/templates/contribute.hbs

@@ -1,21 +1,19 @@
 {{page-title "Contribute"}}
-<div class="callout">
-  <h2>How to</h2>
-  <h1 class="callout-focus">Be an Ally</h1>
-</div>
+<Callout @subtitle="How to">Be an Ally</Callout>
+
 <p class="intro">Below you can explore different ways to contribute to Diversity, Equity and Inclusion (DEI) at your organisation. If you find a role that suits you, you can add it to ‘my roles’.</p>
 
-<h3 class="cards-title">My Roles</h3>
+<h2 class="cards-title">My Roles</h2>
 <div class="bingo-card">
-  {{#unless this.roles}}<p class="intro"><i>You have not added any roles, take a look below to see what you contribute</i></p>{{/unless}}
+  {{#unless this.roles}}<p class="intro no-roles">You have not added any roles, take a look below to see what you contribute</p>{{/unless}}
   {{#each this.roles as |item|}}
     <button type="button" style={{blobcolor item.title}} class="cell {{if item.completed 'completed'}}" {{on 'click' (fn this.selectSquare item)}}>
       {{svg-jar item.icon class='illustration'}}
       <br><p class="title">{{item.title}}</p>{{item.description}}</button>
   {{/each}}
 </div>
 
-<h3 class="cards-title">Different ways to contribute</h3>
+<h2 class="cards-title">Different ways to contribute</h2>
 <div class="bingo-card">
   {{#each this.squares as |item| }}
     <button type="button"  style={{blobcolor item.title}}  class="cell {{if item.completed 'completed'}}" {{on 'click' (fn this.selectSquare item)}}>      {{svg-jar item.icon class='illustration'}}

app/templates/glossary.hbs

@@ -1,21 +1,17 @@
 {{page-title "Glossary"}}
-<div class="callout">
-  <h2>Check here</h2>
-  <h1 class="callout-focus">DEI Vocabulary</h1>
-</div>
+<Callout @subtitle="Check here">DEI Vocabulary</Callout>
+
 <p class="intro">Not sure what some terms mean? No problem! In this overview you will find many terms that you may encounter within your organization</p>
 <div class="search">
-  <label>
-    <div class="search-bar">
-      <FaIcon class="search-icon" @icon='search' />
-      <Input @value={{this.query}} class="search-input light"  placeholder="Type here to filter the glossary"/>
-    </div>
-  </label>
+  <div class="search-bar">
+    <FaIcon class="search-icon" @icon='search' />
+    <Input @type="search" @value={{this.query}} class="search-input light"  placeholder="Type here to filter the glossary" aria-label="Glossary search"/>
+  </div>
 </div>
 <div class="definition-container">
   {{#each this.results as |item|}}
     {{!-- template-lint-disable no-triple-curlies --}}
-    <div class="row"><div class="caps">{{item.caps}}</div><div><h3 class="glossary-title">{{item.title}}<a href="#{{item.title}}" id={{item.title}}>{{svg-jar 'link' class="link-icon"}}</a></h3><p class="definition">{{{item.definition}}}</p></div></div>
+    <div class="row"><div class="caps">{{item.caps}}</div><div><h3 class="glossary-title">{{item.title}}<a href="#{{item.title}}" aria-label="Go to {{item.title}}" id={{item.title}}>{{svg-jar 'link' class="link-icon"}}</a></h3><p class="definition">{{{item.definition}}}</p></div></div>
   {{/each}}
 </div>
 {{!-- {{svg-jar 'index-illustration' class="large-illustration"}} --}}

app/templates/index.hbs

@@ -1,10 +1,7 @@
-{{page-title "Index"}}
+{{page-title "Home"}}
 <div class="index-container">
-<div class="callout landing-callout">
-  <h2>Together</h2>
-  <h1 class="callout-focus">Diversity <br>& Inclusion</h1>
-</div>
+<Callout class="landing-callout" @subtitle="Together">Diversity <br>& Inclusion</Callout>
 <p class="intro">Diversity and Inclusion are essential for fostering a more equitable and harmonious workplace. This app is your ticket to becoming an active ally in the realm of diversity and inclusion!</p>
-<LinkTo class="button button-index" @route="bingo">Start now!</LinkTo>
+<LinkTo class="button button-index" @route="contribute">Start now!</LinkTo>
 </div>
 {{!-- {{svg-jar 'landscape-illustration' class="large-illustration"}} --}}

app/templates/resources.hbs

@@ -1,8 +1,6 @@
 {{page-title "Resources"}}
-<div class="callout">
-  <h2>Continue your</h2>
-  <h1 class="callout-focus">Learning</h1>
-</div>
+<Callout @subtitle="Continue your">Learning</Callout>
+
 <p class="intro">Learn more about different topics and find the medium you like.</p>
 
 <div class="resource-container">

tests/index.html

@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>DeiBingo Tests</title>
+    <title>DEI Bingo Tests</title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 

tests/integration/components/contribute-modal-test.js → tests/integration/components/callout-test.js

@@ -3,22 +3,22 @@ import { setupRenderingTest } from 'dei-bingo/tests/helpers';
 import { render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 
-module('Integration | Component | contribute-modal', function (hooks) {
+module('Integration | Component | callout', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
     // Set any properties with this.set('myProperty', 'value');
     // Handle any actions with this.set('myAction', function(val) { ... });
 
-    await render(hbs`<ContributeModal />`);
+    await render(hbs`<Callout />`);
 
     assert.dom().hasText('');
 
     // Template block usage:
     await render(hbs`
-      <ContributeModal>
+      <Callout>
         template block text
-      </ContributeModal>
+      </Callout>
     `);
 
     assert.dom().hasText('template block text');

tests/unit/controllers/bingo-test.js → tests/unit/controllers/contribute-test.js

@@ -1,12 +1,12 @@
 import { module, test } from 'qunit';
 import { setupTest } from 'dei-bingo/tests/helpers';
 
-module('Unit | Controller | bingo', function (hooks) {
+module('Unit | Controller | contribute', function (hooks) {
   setupTest(hooks);
 
   // TODO: Replace this with your real tests.
   test('it exists', function (assert) {
-    let controller = this.owner.lookup('controller:bingo');
+    let controller = this.owner.lookup('controller:contribute');
     assert.ok(controller);
   });
 });

tests/unit/routes/bingo-test.js → tests/unit/routes/contribute-test.js

@@ -1,11 +1,11 @@
 import { module, test } from 'qunit';
 import { setupTest } from 'dei-bingo/tests/helpers';
 
-module('Unit | Route | bingo', function (hooks) {
+module('Unit | Route | contribute', function (hooks) {
   setupTest(hooks);
 
   test('it exists', function (assert) {
-    let route = this.owner.lookup('route:bingo');
+    let route = this.owner.lookup('route:contribute');
     assert.ok(route);
   });
 });