Merge pull request #147 from nypublicradio/klarocca/accessibility

Klarocca/accessibility
nypublicradio · Sep 10, 2020 · 8489b05 · 8489b05
2 parents 3c61992 + c265ab3
commit 8489b05
Show file tree

Hide file tree

Showing 17 changed files with 54 additions and 41 deletions.
diff --git a/addon/components/nypr-m-secondary-nav.js b/addon/components/nypr-m-secondary-nav.js
@@ -8,11 +8,11 @@ import layout from '../templates/components/nypr-m-secondary-nav';
 */
 export default Component.extend({
   layout,
-  tagName: 'nav',
+  tagName: 'div',
   classNames: ['c-secondary-nav'],
 
   attributeBindings: ['aria-label'],
-  'aria-label': 'Secondary',
+  'aria-label': 'Secondary Navigation',
 
   /**
     Navigation items objects with `url` and `title` keys.

diff --git a/addon/components/organism/whats-on/schedule/template.hbs b/addon/components/organism/whats-on/schedule/template.hbs
@@ -1,15 +1,17 @@
-<div class='schedule-metadata'>
+<div class='schedule-metadata' aria-label="up next at {{time}}: {{airing.showTitle}}">
     <div class='schedule-metadata-image'>
         <img
-            alt="image for {{airing.showTitle}}"
-            src={{airing.show.image.url}}>
+            alt="{{airing.showTitle}}"
+            src={{airing.show.image.url}}
+            aria-hidden="true"
+        >
     </div>
     <div class="schedule-metadata-copy">
         <div class='schedule-metadata-copy-title'>
-            <div class="schedule-metadata-copy-title-label">up next</div>
-            <div class="schedule-metadata-copy-title-text">{{airing.showTitle}}</div>
+            <div class="schedule-metadata-copy-title-label" aria-hidden="true">up next</div>
+            <h2 class="schedule-metadata-copy-title-text" aria-hidden="true">{{airing.showTitle}}</h2>
         </div>
-        <div class="schedule-metadata-copy-time">{{time}}</div>
+        <div class="schedule-metadata-copy-time" aria-hidden="true">{{time}}</div>
     </div>
 </div>
 <a class='schedule-full-schedule-button' href='{{scheduleUrl}}' target='_blank'>view full schedule</a>

diff --git a/addon/components/organism/whats-on/template.hbs b/addon/components/organism/whats-on/template.hbs
@@ -1,35 +1,38 @@
 <div class="whats-on-live-indicator">
-  <div class="whats-on-live-indicator-text">live</div>
+  <div class="whats-on-live-indicator-text" aria-hidden="true">live</div>
   <div class="whats-on-live-indicator-dot"></div>
 </div>
 
-<div class="whats-on-show">
+<div class="whats-on-show" aria-live="polite">
   <NyprMOnAirImage
     @stream={{this.nowPlaying.stream}}
     @show={{this.nowPlaying.show}}
   />
 
-  <NyprMPlayButton
-    class="text mod-main-page"
-    data-action="Clicked Play/Pause Stream: main-player"
-    data-label={{this.nowPlaying.stream.name}}
-    title={{this.nowPlaying.stream.name}}
-    @playItemId={{this.nowPlaying.stream.slug}}
-    @playerLabel="main player"
-    @textMode={{true}}
-  />
-
-  <div class="whats-on-show-title" data-test-element="show-title">
+  <h2 class="whats-on-show-title" data-test-element="show-title">
     {{#if nowPlaying.show.title}}
       {{nowPlaying.show.title}}
     {{else}}
       {{nowPlaying.stream.name}}
     {{/if}}
-  </div>
+  </h2>
 
   <div class="whats-on-show-description" data-test-element="show-description">
     {{{strip-html this.nowPlaying.show.tease}}}
   </div>
+
+  <NyprMPlayButton
+          class="text mod-main-page"
+          data-action="Clicked Play/Pause Stream: main-player"
+          data-label={{this.nowPlaying.stream.name}}
+          title={{this.nowPlaying.stream.name}}
+          @playItemId={{this.nowPlaying.stream.slug}}
+          @playerLabel="main player"
+          @textMode={{true}}
+          aria-label="listen live to {{this.nowPlaying.stream.name}}"
+          role="button"
+          tabindex="0"
+  />
 </div>
 
 {{#if displayEpisode}}

diff --git a/addon/templates/components/footer.hbs b/addon/templates/components/footer.hbs
@@ -4,7 +4,7 @@
     <div class="l-grid l-grid--2up l-grid--large-gutters">
       <div>
         <div class="c-main-footer__logo u-space--double--bottom">
-          {{#link-to 'index'}}
+          {{#link-to 'index' aria-label="home page"}}
             {{yield (hash logo=(component 'blank-template'))}}
           {{/link-to}}
         </div>
@@ -38,7 +38,7 @@
     <div class="l-grid l-grid--2up--xlarge l-grid--middle l-grid--large-gutters">
       <div class="c-main-footer__brand-group u-space--triple--top">
         <div class="c-main-footer__nypr-logo">
-          <Icon @icon='nypr-logo' @title="nypr logo"/>
+          <Icon @icon='nypr-logo' @title="NYPR logo"/>
         </div>
         <NyprMBrandsLinkroll @exclude={{@site}}/>
       </div>

diff --git a/addon/templates/components/nypr-a-toggle-box/trigger.hbs b/addon/templates/components/nypr-a-toggle-box/trigger.hbs
@@ -5,7 +5,7 @@
 
     {{#if (eq @icon 'simple-arrow-down')}}
       <span class="o-icon o-icon--caret u-icon--xs">
-        <Icon @icon={{@icon}} />
+        <Icon @icon={{@icon}} @title="open drop down menu" />
       </span>
     {{/if}}
   </span>

diff --git a/addon/templates/components/nypr-m-brands-linkroll.hbs b/addon/templates/components/nypr-m-brands-linkroll.hbs
@@ -5,7 +5,7 @@
   </toggle.trigger>
 
   <toggle.dropdown>
-    <nav class="c-nypr-nav" role="navigation" aria-label="NYPR brands navigation" name="viewAllBrandsOverlay">
+    <nav class="c-nypr-nav" aria-labelledby="NYPR brands navigation" role="navigation" aria-label="NYPR brands navigation" name="viewAllBrandsOverlay">
       <ul class="c-nypr-nav__list">
         {{#each this.items as |item|}}
           <li class="c-nypr-nav__item">

diff --git a/addon/templates/components/nypr-m-on-air-image.hbs b/addon/templates/components/nypr-m-on-air-image.hbs
@@ -1,16 +1,19 @@
 {{#if (and show.about.people.firstObject.image displayHostIfAvailable)}}
   <img
-   alt="image for {{altText}}"
+   aria-hidden="true"
+   alt={{altText}}
    src={{image-template show.about.people.firstObject.image.template width height show.about.people.firstObject.image.crop}}>
 {{else}}
   {{#if show.image.url}}
     <img
-     alt="image for {{show.title}}"
+     aria-hidden="true"
+     alt={{show.title}}
      src={{show.image.url}}>
   {{else}}
     {{#if stream.imageLogo}}
       <img
-       alt="image for {{stream.name}}"
+       aria-hidden="true"
+       alt={{stream.name}}
        src={{stream.imageLogo}}>
     {{/if}}
   {{/if}}

diff --git a/addon/templates/components/nypr-m-play-button.hbs b/addon/templates/components/nypr-m-play-button.hbs
@@ -1,6 +1,6 @@
 {{#if textMode}}
   <Icon @icon="play-shapes-text-button" class="play-text-button-icon" />
-  <div class="play-button-text">{{text}}</div>
+  <div class="play-button-text" aria-hidden="true">{{text}}</div>
 {{else}}
   <Icon @icon="play-shapes" class="play-button-icon" />
 {{/if}}
diff --git a/addon/templates/components/nypr-m-secondary-nav.hbs b/addon/templates/components/nypr-m-secondary-nav.hbs
@@ -1,5 +1,7 @@
 {{#if @subheader}}
   <h3 class="c-secondary-nav__subheader u-space--bottom">{{@subheader}}</h3>
+{{else}}
+  <div class="c-secondary-nav__subheader-spacer"/>
 {{/if}}
 
 {{#if @navItems}}

diff --git a/addon/templates/components/nypr-m-share-tools/link.hbs b/addon/templates/components/nypr-m-share-tools/link.hbs
@@ -1,11 +1,12 @@
 {{!-- BEGIN-SNIPPET nypr-m-share-tools-link.hbs --}}
 <a href={{or @href this.href}}
    class="c-share-tools__link o-icon {{@service}}"
+   aria-label="follow us on {{@service}}"
    ...attributes
    target={{if target @target "_blank"}}
    rel="noopener"
    onclick={{if clickAction (action "handleClick")}}>
-  <Icon @icon={{@service}}/>
+  <Icon @icon={{@service}} @title={{@service}}/>
   {{#if title}}
     <div class="c-share-tools__link-title">{{@title}}</div>
   {{/if}}

diff --git a/addon/templates/components/nypr-m-volume-control.hbs b/addon/templates/components/nypr-m-volume-control.hbs
@@ -5,8 +5,8 @@
       <div class="js-volume-slider-handle nypr-player-volume-slider-handle" style={{handlePosition}} {{! template-lint-disable "no-inline-styles" }}></div>
     </div>
   </div>
-  <button class="nypr-player-button mod-volume" {{action 'toggleMute'}}>
-    <Icon @icon="volume" @title="volume" class="nypr-player-icon mod-volume-unmuted"/>
-    <Icon @icon="volume-muted" @title="volume muted" class="nypr-player-icon mod-volume-muted"/>
+  <button tabindex="0" aria-label="toggle mute" class="nypr-player-button mod-volume" {{action 'toggleMute'}}>
+    <Icon aria-hidden="true" @icon="volume" @title="volume unmuted" class="nypr-player-icon mod-volume-unmuted"/>
+    <Icon aria-hidden="true" @icon="volume-muted" @title="volume muted" class="nypr-player-icon mod-volume-muted"/>
   </button>
 </div>
diff --git a/addon/templates/components/nypr-o-persistent-audio-player.hbs b/addon/templates/components/nypr-o-persistent-audio-player.hbs
@@ -12,7 +12,7 @@
   {{/if}}
 </div>
 
-<NyprMPlayButton @playItemId={{this.streamSlug}} class="nypr-o-audio-player-play-button" data-test-element="play-button"/>
+<NyprMPlayButton tabindex="0" aria-label="toggle play" role="button" @playItemId={{this.streamSlug}} class="nypr-o-audio-player-play-button" data-test-element="play-button"/>
 
 <NyprMTrackAdditionalInfo class="nypr-o-audio-player-level-two-three" data-test-element="track" @ensembleName={{levelSix}} @conductorName={{levelFive}} as |options|>
   {{#if @levelTwo}}

diff --git a/app/styles/_library/_module.footer.scss b/app/styles/_library/_module.footer.scss
@@ -125,6 +125,10 @@
   font-weight: normal;
 }
 
+.c-main-footer .c-secondary-nav__subheader-spacer {
+  height: 38px;
+}
+
 .c-main-footer__nav .c-secondary-nav__item {
   display: inline-block;
   margin: 0 var(--space-3) var(--space-4) 0;

diff --git a/app/templates/components/icons/play-shapes-text-button.hbs b/app/templates/components/icons/play-shapes-text-button.hbs
@@ -1,6 +1,6 @@
 <svg width="100px" id="play-icon-shapes" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <g class="play-icon-shapes" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-    <path class="pause" d="M54,35 L61,35 L61,67 L54,67 L54,35 Z M38,35 L45,35 L45,67 L38,67 L38,35 Z" id="pause" fill="#FFF" fill-rule="nonzero"></path>
+    <path class="pause" d="M54,35 L61,35 L61,67 L54,67 L54,35 Z M38,35 L45,35 L45,67 L38,67 L38,35 Z" fill="#FFF" fill-rule="nonzero"></path>
     <polyline class="play" stroke="#000" fill-rule="nonzero" points="40 68 40 34 68 51 40 68"></polyline>
   </g>
 </svg>

diff --git a/app/templates/components/icons/play-shapes.hbs b/app/templates/components/icons/play-shapes.hbs
@@ -1,4 +1,4 @@
-<svg width="100px" id="play-icon-shapes" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="100px" id="play-shapes" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <g class="play-icon-shapes" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
     <g class="fx" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
       <circle class="outer-circle-fx" cx="50" cy="50" r="50" fill="none" />
@@ -8,7 +8,7 @@
 
     <path d="M50,93 C73.748244,93 93,73.748244 93,50 C93,26.2517558 73.748244,7 50,7 C26.2517558,7 7,26.2517558 7,50 C7,73.748244 26.2517558,93 50,93 L50,93 L50,93 Z" class="inner-circle" stroke="#000"  fill="none" fill-rule="nonzero"></path>
 
-    <path class="pause" d="M54,35 L61,35 L61,67 L54,67 L54,35 Z M38,35 L45,35 L45,67 L38,67 L38,35 Z" id="pause" fill="#FFF" fill-rule="nonzero"></path>
+    <path class="pause" d="M54,35 L61,35 L61,67 L54,67 L54,35 Z M38,35 L45,35 L45,67 L38,67 L38,35 Z" fill="#FFF" fill-rule="nonzero"></path>
     <polyline class="play" stroke="#000" fill-rule="nonzero" points="40 68 40 34 68 51 40 68"></polyline>
   </g>
 </svg>

diff --git a/app/templates/components/icons/wnyc/jlgreene.hbs b/app/templates/components/icons/wnyc/jlgreene.hbs
@@ -1,13 +1,11 @@
 <svg role="img" class="jlgreene-logo-icon" viewBox="0 0 309 54" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <title>{{@title}}</title>
   <path d="M68.8062,45.2002 L68.8062,38.0432 L73.2922,38.0432 C77.5762,38.0432 78.8872,36.6322 78.8872,33.1022 L78.8872,7.8512 L87.1022,7.8512 L87.1022,33.4062 C87.1022,42.8312 81.8102,45.3012 74.3002,45.3012 C71.0742,45.3012 70.5202,45.3012 68.8062,45.2002"
-        id="l"
         stroke="none"
         fill="#221F20"
         fill-rule="evenodd"
   ></path>
   <polygon
-          id="l"
           stroke="none"
           fill="#221F20"
           fill-rule="evenodd"

diff --git a/tests/integration/components/nypr-m-secondary-nav-test.js b/tests/integration/components/nypr-m-secondary-nav-test.js
@@ -9,6 +9,6 @@ module('Integration | Component | nypr-m-secondary-nav', function(hooks) {
   test('it renders', async function(assert) {
     await render(hbs`{{nypr-m-secondary-nav}}`);
 
-    assert.dom('nav.c-secondary-nav').exists();
+    assert.dom('.c-secondary-nav').exists();
   });
 });