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>

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>

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>

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;