From c427537471ce0c7fa01675a2ffcc58c9afdf4542 Mon Sep 17 00:00:00 2001
From: Aaron Cannon <acannon@instructure.com>
Date: Tue, 24 May 2016 16:02:56 -0500
Subject: [PATCH] A11y: Switched Discussion and Announcement filters to using
 real labels

Fixes CNVS-29498

Test plan:
- Visit both Discussions and Announcements lists
- Verify that the look and function of the filter checkboxes are unchanged.
- Verify that they read well with screen readers.

Change-Id: I61703a01206f4346bbf7ec494ce977dd1f3b576f
Reviewed-on: https://gerrit.instructure.com/80634
Tested-by: Jenkins
Reviewed-by: Joel Hough <joel@instructure.com>
QA-Review: Jahnavi Yetukuri <jyetukuri@instructure.com>
Product-Review: Aaron Cannon <acannon@instructure.com>
---
 .../jst/DiscussionTopics/IndexView.handlebars    | 16 ++++++++++------
 app/views/jst/announcements/IndexView.handlebars |  7 ++++---
 public/javascripts/vendor/jqueryui/button.js     |  2 ++
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/app/views/jst/DiscussionTopics/IndexView.handlebars b/app/views/jst/DiscussionTopics/IndexView.handlebars
index 4b4f4e8f000..30537d6488c 100644
--- a/app/views/jst/DiscussionTopics/IndexView.handlebars
+++ b/app/views/jst/DiscussionTopics/IndexView.handlebars
@@ -17,16 +17,20 @@
              value="{{searchTerm}}"
              type="search">
       <span id="discussionsFilter">
-        <span class="screenreader-only" id="onlyUnreadAccessibleLabel">{{t "filter discussions by unread"}}</span>
         <input type="checkbox"
                id="onlyUnread"
-               aria-labelledby="onlyUnreadAccessibleLabel"
-               {{#if onlyUnread}}checked{{/if}} /><label aria-hidden="true" for="onlyUnread">{{#t "unread"}}Unread{{/t}}</label>
-        <span class="screenreader-only" id="onlyGradedAccessibleLabel">{{t "filter discussions by assignments"}}</span>
+               {{#if onlyUnread}}checked{{/if}} />
+        <label for="onlyUnread" class="no-button-role">
+          <span aria-hidden="true">{{#t "unread"}}Unread{{/t}}</span>
+          <span class="screenreader-only">{{t "filter discussions by unread"}}</span>
+        </label>
         <input type="checkbox"
                id="onlyGraded"
-               aria-labelledby="onlyGradedAccessibleLabel"
-               {{#if onlyGraded}}checked{{/if}}/><label aria-hidden="true" for="onlyGraded">{{#t "assignments"}}Assignments{{/t}}</label>
+               {{#if onlyGraded}}checked{{/if}}/>
+        <label for="onlyGraded" class="no-button-role">
+          <span aria-hidden="true">{{#t "assignments"}}Assignments{{/t}}</span>
+          <span class="screenreader-only">{{t "filter discussions by assignments"}}</span>
+        </label>
       </span>
       <div id="searchResultCount" aria-live="polite" class="screenreader-only"></div>
     </div>
diff --git a/app/views/jst/announcements/IndexView.handlebars b/app/views/jst/announcements/IndexView.handlebars
index 85ccafc2021..f9a95918c7a 100644
--- a/app/views/jst/announcements/IndexView.handlebars
+++ b/app/views/jst/announcements/IndexView.handlebars
@@ -16,12 +16,13 @@
               value="{{searchTerm}}"
               type="search">
         <span id="discussionsFilter">
-          <span class="screenreader-only" id="onlyUnreadAccessibleLabel">{{t "filter announcements by unread"}}</span>
           <input type="checkbox"
                 id="onlyUnread"
-                aria-labelledby="onlyUnreadAccessibleLabel"
                 {{#if onlyUnread}}checked{{/if}} />
-          <label for="onlyUnread" aria-hidden="true">{{#t "unread"}}Unread{{/t}}</label>
+          <label for="onlyUnread" class="no-button-role">
+            <span aria-hidden="true">{{#t "unread"}}Unread{{/t}}</span>
+            <span class="screenreader-only">{{t "filter announcements by unread"}}</span>
+          </label>
         </span>
         <div id="searchResultCount" aria-live="polite" class="screenreader-only"></div>
       </div>
diff --git a/public/javascripts/vendor/jqueryui/button.js b/public/javascripts/vendor/jqueryui/button.js
index 3cb3483b4da..9d0930f54f0 100755
--- a/public/javascripts/vendor/jqueryui/button.js
+++ b/public/javascripts/vendor/jqueryui/button.js
@@ -82,7 +82,9 @@ $.widget( "ui.button", {
 
 		this.buttonElement
 			.addClass( baseClasses )
+			.not( ".no-button-role" )
 			.attr( "role", "button" )
+			.end()
 			.bind( "mouseenter" + this.eventNamespace, function() {
 				if ( options.disabled ) {
 					return;