miscellaneous accessibility changes

test plans:

CNVS-6481:
* confirm search box on course people page has
aria-label "Search people" instead of just "search"

CNVS-6615:
* add several upcoming events to a course calendar such that
not all of them are initially shown on the right-hand sidebar
on the course main page (instead showing a link with "X more")
* confirm that hitting enter while focused on the link
(note: getting focus using Shift+Tab is probably easiest)
will set focus on the first newly revealed item, rather than
the first of all the items

CNVS-6480:
* confirm that there is a hidden h1 header at the top
of the course people page

CNVS-6516:
* on the course settings page - right sidebar,
inspect the current users html element and confirm that it is
now an <h3> tag inside a <caption> tag (but appears the same)

CNVS-6517:
* on the course settings page -> course details form,
left hand labels should not be contained within <th>
tags but instead in <td> tags (should otherwise be the same)

fixes #CNVS-6481 #CNVS-6615 #CNVS-6480 #CNVS-6516 #CNVS-6517

Change-Id: Ie62944ca8927b943529c78b78c594f340cd653c2
Reviewed-on: https://gerrit.instructure.com/22243
QA-Review: Clare Strong <clare@instructure.com>
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
Product-Review: Jeremy Stanley <jeremy@instructure.com>
Tested-by: Jenkins <jenkins@instructure.com>

app/stylesheets/course_settings.sass

@@ -220,9 +220,13 @@ ul.user_list div.enrollment_type.pending
 
 #right-side table.summary
   margin-top: 20px
+  caption h3
+    font-size: inherit
+    line-height: inherit
+    margin: inherit
 
 #course_form table.coursesettings
-  th
+  td.form-label
     text-align: left
     vertical-align: top
     padding-top: 3px
@@ -242,6 +246,6 @@ ul.user_list div.enrollment_type.pending
     white-space: nowrap
 
 #course_form.editing table.coursesettings
-  th
+  td.form-label
     vertical-align: top
     padding-top: 5px

app/stylesheets/g_instructure.sass

@@ -364,12 +364,12 @@
 
 table.summary
   width: auto
-  th
+  th, caption
     text-align: left
-  th, td
+  th, td, caption
     padding: 2px 8px
     vertical-align: top
-  thead th
+  thead th, caption
     background-color: #4d4d4d
     color: #fff
     font-weight: normal

app/views/context/roster.html.erb

@@ -6,6 +6,8 @@
   content_for :page_title, join_title(translated_title, @context.name)
 %>
 
+<h1 class='screenreader-only'><%= t('#titles.people', 'People') %></h1>
+
 <% content_for :right_side, render(:partial => 'context/roster_right_side') %>
 
 <%= jammit_css :roster %>

app/views/courses/_settings_sidebar.html.erb

@@ -87,13 +87,9 @@
   <% end %>
 
   <table class="summary">
-    <thead>
-      <tr>
-        <th colspan="2">
-          <%= t('headings.current_users', 'Current Users') %>
-        </th>
-      </tr>
-    </thead>
+    <caption>
+      <h3><%= t('headings.current_users', 'Current Users') %></h3>
+    </caption>
 
     <tbody>
       <% @all_roles.each do |base_role| %>

app/views/courses/settings.html.erb

@@ -41,7 +41,7 @@
     <% form_for @context, :html => {:id => "course_form"} do |f| %>
     <table class="coursesettings">
       <tr>
-        <th scope="row"><%= f.blabel :name, :course_name, :en => "Name" %></th>
+        <td class="form-label"><%= f.blabel :name, :course_name, :en => "Name" %></td>
         <td class="nobr">
           <% if can_rename_course %>
             <%= f.text_field :name, :class => "course_form", :maxlength => '255', :style => "width: 150px;" %>
@@ -52,7 +52,7 @@
         </td>
       </tr>
       <tr>
-        <th scope="row" class="nobr"><%= f.blabel :course_code, :en => "Course Code" %></th>
+        <td class="form-label nobr"><%= f.blabel :course_code, :en => "Course Code" %></td>
         <td class="nobr">
           <% if can_rename_course %>
             <span class="course_form"><%= f.text_field :course_code, :maxlength => '255', :style => "width: 100px;" %></span>
@@ -63,7 +63,7 @@
         </td>
       <% if @context.sis_source_id && can_do(@context.root_account, @current_user, :read_sis) || can_do(@context.root_account, @current_user, :manage_sis) %>
         </tr><tr>
-          <th scope="row"><%= f.blabel :sis_source_id, :en => "SIS ID" %></th>
+          <td class="form-label"><%= f.blabel :sis_source_id, :en => "SIS ID" %></td>
           <td>
             <span class="course_form">
               <% if can_do(@context.root_account, @current_user, :manage_sis) %>
@@ -77,11 +77,11 @@
       <% end %>
       <% if @current_user && Account.site_admin.account_users_for(@current_user).present? %>
         </tr><tr>
-          <th scope="row"><%= f.blabel :root_account_id, :en => "Root Account" %></th>
+          <td class="form-label"><%= f.blabel :root_account_id, :en => "Root Account" %></td>
           <td><%= link_to @context.root_account.name, account_url(@context.root_account.id)  %></td>
       <% end %>
       </tr><tr>
-        <th scope="row"><%= f.blabel :account_id, :en => "Department" %></th>
+        <td class="form-label"><%= f.blabel :account_id, :en => "Department" %></td>
         <td>
           <span class="course_form">
             <% if can_do(@context.root_account, @current_user, :manage_courses) %>
@@ -109,7 +109,7 @@
           </span>
         </td>
       </tr><tr>
-        <th scope="row"><%= f.blabel :enrollment_term_id, :en => "Term" %></th>
+        <td class="form-label"><%= f.blabel :enrollment_term_id, :en => "Term" %></td>
         <td>
           <span class="course_form">
             <% if can_do(@context.root_account, @current_user, :manage_courses) %>
@@ -125,13 +125,13 @@
           <span class="course_info term_name"><%= @context.enrollment_term.name %></span>
         </td>
       </tr><tr>
-        <th scope="row"><%= f.blabel :start_at, :en => "Starts" %></th>
+        <td class="form-label"><%= f.blabel :start_at, :en => "Starts" %></td>
         <td class="nobr">
           <span class="course_form"><%= f.text_field :start_at, :class => "date_entry", :value => datetime_string(@context.start_at, :verbose, nil, true) %></span>
           <span class="course_info start_at"><%= datetime_string(@context.start_at, :verbose, nil, true) || t('no_date', "No Date Set") %></span>
         </td>
       </tr><tr>
-        <th scope="row"><%= f.blabel :conclude_at, :en => "Ends" %></th>
+        <td class="form-label"><%= f.blabel :conclude_at, :en => "Ends" %></td>
         <td class="nobr">
           <span class="course_form"><%= f.text_field :conclude_at, :class => "date_entry", :value => datetime_string(@context.conclude_at, :verbose, nil, true) %></span>
           <span class="course_info conclude_at"><%= datetime_string(@context.conclude_at, :verbose, nil, true) || t('no_date', "No Date Set") %></span>
@@ -148,7 +148,7 @@
         </td>
       <% if available_locales.size > 1 %>
       </tr><tr>
-        <th scope="row"><%= f.blabel :locale, :language, :en => "Language" %></th>
+        <td class="form-label"><%= f.blabel :locale, :language, :en => "Language" %></td>
         <td>
           <div class="course_form">
             <% no_language = t(:no_language_preference, "Not set (user-configurable, defaults to %{language})", :language => available_locales[infer_locale(:context => @context.account)]) %>
@@ -167,7 +167,7 @@ TEXT
         </td>
       <% end %>
       </tr><tr>
-        <th scope="row"><%= f.blabel :storage_quota_mb, :storage_quota, :en => "File Storage" %></th>
+        <td class="form-label"><%= f.blabel :storage_quota_mb, :storage_quota, :en => "File Storage" %></td>
         <td>
           <span class="course_form">
             <% if can_do(@context.account, @current_user, :manage_storage_quotas) %>
@@ -181,7 +181,7 @@ TEXT
         </td>
       <% if @context.turnitin_enabled? %>
       </tr><tr>
-        <th scope="row"><%= f.blabel :turnitin_comments, :en => "Turnitin Comments" %></th>
+        <td class="form-label"><%= f.blabel :turnitin_comments, :en => "Turnitin Comments" %></td>
         <td class="nobr">
           <span class="course_form"><span class="aside"><%= t('turnitin', %{these comments will be shown to students when submitting a Turnitin-enabled assignment}) %></span><br/><%= f.text_area :turnitin_comments, :style => "width: 90%; height: 50px;" %></span>
           <span class="course_info turnitin_comments"><%= @context.turnitin_comments %></span>
@@ -189,9 +189,9 @@ TEXT
       <% end %>
       </tr>
       <tr>
-        <th scope="row">
+        <td class="form-label">
           <label><%= before_label('grading_scheme', %{Grading Scheme}) %></label>
-        </th>
+        </td>
         <td>
           <span class="course_info grading_scheme_set">
             <%= @context.grading_standard_enabled? ? (@context.grading_standard_title || t('grading_standard_currently_set', "Currently Set")) : t('grading_standard_not_set', "Not Set") %>
@@ -206,7 +206,7 @@ TEXT
         </td>
       </tr>
       <tr>
-        <th scope="row"><%= f.blabel :license, :en => "License" %></th>
+        <td class="form-label"><%= f.blabel :license, :en => "License" %></td>
         <td colspan="3">
           <span class="course_form">
             <%= f.select :license, Course.licenses.map { |id, attrs| [attrs[:readable_license], id] }%>
@@ -215,7 +215,7 @@ TEXT
           <span class="course_info readable_license"><%= @context.readable_license %></span>
         </td>
       </tr><tr>
-        <th scope="row"><label><%= before_label('course_visibility', %{Visibility}) %></label></th>
+        <td class="form-label"><label><%= before_label('course_visibility', %{Visibility}) %></label></td>
         <td colspan="3">
           <span class="course_form">
             <%= f.check_box :public_syllabus %>

app/views/jst/courses/roster/index.handlebars

@@ -4,7 +4,7 @@
     name="search_term"
     data-view="inputFilter"
     placeholder='{{#t "search_people"}}Search people{{/t}}'
-    aria-label='{{#t "search"}}Search{{/t}}'
+    aria-label='{{#t "search_people"}}Search people{{/t}}'
   >
 
   <select

app/views/jst/groups/manage/addUnassignedMenu.handlebars

@@ -13,7 +13,7 @@
       class="search-query"
       data-view="inputFilter"
       placeholder='{{#t "search_people"}}Search people{{/t}}'
-      aria-label='{{#t "search"}}Search{{/t}}'
+      aria-label='{{#t "search_people"}}Search people{{/t}}'
     >
   </div>
   <div data-view="users"></div>

public/javascripts/instructure.js

@@ -980,7 +980,7 @@ define([
     // happend a lot so rather than duplicating it everywhere I stuck it here
     $("#right-side").delegate(".more_link", "click", function(event) {
       var $this = $(this);
-      var $children = $this.parents("ul").children().show();
+      var $children = $this.parents("ul").children(':hidden').show();
       $this.closest('li').remove();
 
       // if they are using the keyboard to navigate (they hit enter on the link instead of actually

spec/selenium/course_settings_spec.rb

@@ -194,7 +194,7 @@ describe "course settings" do
     it "should not include student view student in the statistics count" do
       @fake_student = @course.student_view_student
       get "/courses/#{@course.id}/settings"
-      fj('.summary tr:nth(1)').text.should match /Students:\s*None/
+      fj('.summary tr:nth(0)').text.should match /Students:\s*None/
     end
 
     it "should show the count of custom role enrollments" do
@@ -204,9 +204,9 @@ describe "course settings" do
       course_with_student(:course => @course, :role_name => "weirdo")
       course_with_teacher(:course => @course, :role_name => "teach")
       get "/courses/#{@course.id}/settings"
-      fj('.summary tr:nth(2)').text.should match /weirdo:\s*1/
-      fj('.summary tr:nth(4)').text.should match /teach:\s*1/
-      fj('.summary tr:nth(6)').text.should match /taaaa:\s*None/
+      fj('.summary tr:nth(1)').text.should match /weirdo:\s*1/
+      fj('.summary tr:nth(3)').text.should match /teach:\s*1/
+      fj('.summary tr:nth(5)').text.should match /taaaa:\s*None/
     end
   end
 end