fix some of the accessibility issues with the footer

Author: mansona

addon/components/es-footer.js

@@ -1,32 +1,23 @@
-import Component from '@ember/component';
-import layout from '../templates/components/es-footer';
+import Component from 'sparkles-component';
+
 import {
   socialLinks,
   infoLinks,
   contributorLinks,
   tagline
 } from '../constants/es-footer';
 
+export default class EsPageHeader extends Component {
+  currentYear = null
 
-export default Component.extend({
-  layout,
-  attributeBindings: ['ariaLabel:aria-label'],
-  classNames: ['es-footer'],
-  tagName: 'footer',
-  currentYear: null,
-  init() {
-    this._super(...arguments);
+  constructor() {
+    super();
     this.currentYear = new Date().getUTCFullYear();
-  },
+  }
 
-  socialLinks,
-  tagline,
-  contributorLinks,
-  infoLinks,
+  socialLinks = socialLinks
 
-  //accessibility support
-  ariaDescribedby: null,
-  ariaLabel: null,
-  ariaRole: 'contentinfo',
-  title: null
-});
+  tagline = tagline
+  contributorLinks = contributorLinks
+  infoLinks = infoLinks
+}

addon/constants/es-footer.js

@@ -2,23 +2,26 @@
 const socialLinks = [{
   title: 'Twitter',
   href: 'http://twitter.com/emberjs',
-  class: 'twitter-logo'
+  class: 'twitter-logo',
+  label: 'Official Ember Twitter Account'
 }, {
   title: 'GitHub',
   href: 'https://github.com/emberjs/ember.js',
-  class: 'github-logo'
+  class: 'github-logo',
+  label: 'Ember.js github repository'
 }, {
   title: 'Discord',
   href: 'https://discordapp.com/invite/zT3asNS',
-  class: 'discord-logo'
+  class: 'discord-logo',
+  label: 'Join the Ember Community Discord'
 }];
 
 
 const contributorLinks = [{
   name: 'Hosted by:',
   title: "Heroku",
   href: 'https://www.heroku.com/emberjs',
-  class: 'heroku-logo'
+  class: 'heroku-logo',
 }, {
   name: 'CDN provided by:',
   title: "Fastly",

addon/templates/components/es-footer.hbs

@@ -1,4 +1,4 @@
-<div class="footer responsive">
+<footer class="es-footer" ...attributes>
   <div class="container">
 
     {{yield
@@ -22,4 +22,4 @@
     {{/unless}}
 
   </div>
-</div>
+</footer>

addon/templates/components/es-footer/es-contributions.hbs

@@ -5,7 +5,7 @@
   {{#each contributorLinks as |link|}}
     <div class="contributor">
       <p>{{link.name}}</p>
-      <a href={{link.href}} title={{link.title}}>
+      <a href={{link.href}} title={{link.title}} aria-label={{link.title}}>
         {{svg-jar link.class class="contributor-logo"}}
       </a>
     </div>

addon/templates/components/es-footer/es-statement.hbs

@@ -5,7 +5,7 @@
   <p class="footer-tagline">{{tagline}}</p>
   <div class="footer-social">
     {{#each socialLinks as |link|}}
-      <a href={{link.href}} title={{link.title}}>
+      <a href={{link.href}} title={{link.title}} aria-label={{link.label}}>
         {{svg-jar link.class}}
       </a>
     {{/each}}

app/components/es-footer.js

@@ -1 +1 @@
-export { default } from 'ember-styleguide/components/es-footer';
+export { default } from 'ember-styleguide/components/es-footer';

app/templates/components/es-footer.js

@@ -0,0 +1 @@
+export { default } from 'ember-styleguide/templates/components/es-footer';