ylqjgm
/
canvas-lms
mirror of https://github.com/instructure/canvas-lms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improves filter checkbox labelling 

fixes CNVS-13880

Added aria-labels to the checkboxes so their effect was clearer to
screenreaders.

Test Plan:
* Using a screenreader go the discussions page and navigate to the
  "Unread" and "Assignments" filter checkboxes
* Using a screenreader go to the announcements page and navigate to the
  "Unread" filter checkbox
* Using a screenreader go to the home page, select an announcement and navigate to the
  "Unread" filter checkbox
* Ensure that the checkboxes are descriptive of the function the
  checkbox performs from the screenreaders perspective

Change-Id: Ie27d2dd3905e55c64b59c05b22d56926bf6bb2b6
Reviewed-on: https://gerrit.instructure.com/45286
Tested-by: Jenkins <jenkins@instructure.com>
Reviewed-by: Brad Horrocks <bhorrocks@instructure.com>
Reviewed-by: Joel Hough <joel@instructure.com>
QA-Review: Steven Shepherd <sshepherd@instructure.com>
Product-Review: Aaron Cannon <acannon@instructure.com>
This commit is contained in:
Andrew Butterfield 2014-12-04 12:44:18 -07:00
parent f62b230fd3
commit d14c5aa5a2
3 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/views/discussion_topics/show.html.erb
View File

@ -243,19 +243,19 @@
<div class="headerBar" data-sticky>
<div class="row-fluid form-inline" style="overflow: visible;">
<div class="span9">
<label id="discussion-search-label" class="screenreader-only" for="discussion-search"><%= t("search_entries_placeholder", "Search entries or author") %></label>
<input
id = "discussion-search"
type = "text"
aria-labelledby = "discussion-search-label"
placeholder = "<%= t("search_entries_placeholder", "Search entries or author") %>"
aria-label = "<%= t("Search entries or author") %>"
placeholder = "<%= t("Search entries or author") %>"
size = 50
>
<input
type = "checkbox"
id = "onlyUnread"
><label for="onlyUnread"><%= t('unread', 'Unread') %></label>
aria-label = "<%= t("filter replies by unread") %>"
><label aria-hidden="true" for="onlyUnread"><%= t('unread', 'Unread') %></label>
&nbsp; &nbsp;
<button id="collapseAll" class="btn disableWhileFiltering" title="<%= t('collapse_replies', 'Collapse replies') %>" aria-label="<%= t('collapse_replies', 'Collapse replies') %>">

10
app/views/jst/DiscussionTopics/IndexView.handlebars
View File

@ -41,18 +41,20 @@
</button>
</div>
<div class="headerBar-left form-inline index_view_filter_form">
<label class="hidden-inline-text" for="searchTerm">{{#t "search_title_body_or_author"}}Search title, body, or author{{/t}}</label>
<input id="searchTerm"
placeholder="{{#t "search_title_body_or_author"}}Search title, body, or author{{/t}}"
placeholder="{{t "Search title, body, or author"}}"
aria-label="{{t "Search title, body, or author"}}"
value="{{searchTerm}}"
type="search">
<span id="discussionsFilter">
<input type="checkbox"
id="onlyUnread"
{{#if onlyUnread}}checked{{/if}} /><label for="onlyUnread">{{#t "unread"}}Unread{{/t}}</label>
aria-label="{{t "filter discussions by unread"}}"
{{#if onlyUnread}}checked{{/if}} /><label aria-hidden="true" for="onlyUnread">{{#t "unread"}}Unread{{/t}}</label>
<input type="checkbox"
id="onlyGraded"
{{#if onlyGraded}}checked{{/if}}/><label for="onlyGraded">{{#t "assignments"}}Assignments{{/t}}</label>
aria-label="{{t "filter discussions by assignments"}}"
{{#if onlyGraded}}checked{{/if}}/><label aria-hidden="true" for="onlyGraded">{{#t "assignments"}}Assignments{{/t}}</label>
</span>
</div>
</div>

7
app/views/jst/announcements/IndexView.handlebars
View File

@ -25,15 +25,16 @@
{{/if}}
</div>
<div class="headerBar-left form-inline index_view_filter_form">
<label class="hidden-inline-text" for="searchTerm">{{#t "search_title_body_or_author"}}Search title, body, or author{{/t}}</label>
<input id="searchTerm"
placeholder="{{#t "search_title_body_or_author"}}Search title, body, or author{{/t}}"
placeholder="{{t "Search title, body, or author"}}"
aria-label="{{t "Search title, body, or author"}}"
value="{{searchTerm}}"
type="search">
<span id="discussionsFilter">
<input type="checkbox"
id="onlyUnread"
{{#if onlyUnread}}checked{{/if}} /><label for="onlyUnread">{{#t "unread"}}Unread{{/t}}</label>
aria-label="{{t "filter announcements by unread"}}"
{{#if onlyUnread}}checked{{/if}} /><label aria-hidden="true" for="onlyUnread">{{#t "unread"}}Unread{{/t}}</label>
</span>
</div>
</div>