Improve accessibility of Admin Course button (#1511)

autolab · Apr 29, 2022 · da1689c · da1689c
1 parent a78b609
commit da1689c
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 21 deletions.
diff --git a/app/assets/javascripts/handin.js b/app/assets/javascripts/handin.js
@@ -32,7 +32,9 @@ function dragExit(e) {
   $(".drag-drop-handin").get(0).style = undefined;
 }
 
-function clickDrag() {
+function clickDrag(e) {
+  // Ignore shift and tab
+  if (e.key === "Shift" || e.key === "Tab") return;
   $("#handin_show_assessment input[type='file']").trigger('click');
 }
 

diff --git a/app/views/assessments/_submission_panel.html.erb b/app/views/assessments/_submission_panel.html.erb
@@ -15,7 +15,7 @@
   <div class="ui tab active" data-tab="upload" id="upload_tab">
     <div class="row handin-row">
       <div class="valign-wrapper drag-drop-handin" tabindex="0"
-          onclick="clickDrag();" onkeypress="clickDrag()" ondrop="dropHandler(event);" 
+          onclick="clickDrag(event);" onkeydown="clickDrag(event);" ondrop="dropHandler(event);"
           ondragover="dragOverHandler(event);" ondragenter="dragEnter(event);" ondragexit="dragExit(event);">
         <p class="center-align" style="color:grey;" ondrop="dropHandler(event);" 
           ondragover="dragOverHandler(event);" ondragenter="dragEnter(event);" 

diff --git a/app/views/assessments/show.html.erb b/app/views/assessments/show.html.erb
@@ -11,6 +11,9 @@
       }
       document.getElementById(id).setAttribute("aria-expanded", expanded);
     }
+    $(document).ready(function(){
+      $('.collapsible').collapsible();
+    });
   </script>
 <% end %>
 
@@ -45,7 +48,7 @@
     <%# Display any optional instructor admin options %>
     <% if @cud.instructor? then %>
       <ul class="collapsible" data-collapsible="accordion">
-        <li class="collapsible-menu-link active" id="admin-options" aria-role="button" aria-expanded="true" onclick="toggleAria('admin-options')" onkeypress="toggleAria('admin-options')">
+        <li class="collapsible-menu-link active" id="admin-options" aria-role="button" aria-expanded="true" onclick="toggleAria('admin-options')" onkeydown="toggleAria('admin-options')">
           <div class="collapsible-header"><h5>Admin Options</h5></div>
           <div class="collapsible-body">
             <ul class="options">
@@ -86,7 +89,7 @@
     <%# Display the optional CA admin options %>
     <% if @cud.course_assistant? or @cud.instructor? then %>
       <ul class="collapsible" data-collapsible="accordion">
-        <li class="collapsible-menu-link" id="ca-options" aria-role="button" aria-expanded="false" onclick="toggleAria('ca-options')" onkeypress="toggleAria('ca-options')">
+        <li class="collapsible-menu-link" id="ca-options" aria-role="button" aria-expanded="false" onclick="toggleAria('ca-options')" onkeydown="toggleAria('ca-options')">
           <div class="collapsible-header"><h5>CA Options</h5></div>
           <div class="collapsible-body">
             <ul class="options">
@@ -113,9 +116,9 @@
 
     <ul class="collapsible" data-collapsible="accordion">
       <% if @cud.course_assistant? or @cud.instructor? then %>
-        <li class="collapsible-menu-link" id="options" aria-role="button" aria-expanded="false" onclick="toggleAria('options')" onkeypress="toggleAria('options')">
+        <li class="collapsible-menu-link" id="options" aria-role="button" aria-expanded="false" onclick="toggleAria('options')" onkeydown="toggleAria('options')">
       <% else %>
-        <li class="collapsible-menu-link active" id="options" aria-role="button" aria-expanded="true" onkeypress="toggleAria('options')" onkeypress="toggleAria('options')">
+        <li class="collapsible-menu-link active" id="options" aria-role="button" aria-expanded="true" onclick="toggleAria('options')" onkeydown="toggleAria('options')">
       <% end %>
         <div class="collapsible-header active"><h5>Options</h5></div>
         <div class="collapsible-body">
@@ -312,11 +315,3 @@
 
   <% end %>
 </div>
-
-<% content_for :javascripts do %>
-  <script>
-     $(document).ready(function(){
-       $('.collapsible').collapsible();
-     });
-  </script>
-<% end %>
diff --git a/app/views/courses/manage.html.erb b/app/views/courses/manage.html.erb
@@ -3,11 +3,22 @@
 <% content_for :stylesheets do %>
   <%= stylesheet_link_tag "student_gradebook" %>
 <% end %>
-<script type="text/javascript">
-  $(document).ready(function() {
-    $('.collapsible').collapsible();
-  })
-</script>
+<% content_for :javascripts do %>
+  <script>
+    function toggleAria(id) {
+        var expanded = document.getElementById(id).getAttribute("aria-expanded");
+        if (expanded == "true") {
+            expanded = "false"
+        } else {
+            expanded = "true"
+        }
+        document.getElementById(id).setAttribute("aria-expanded", expanded);
+    }
+    $(document).ready(function() {
+      $('.collapsible').collapsible();
+    })
+  </script>
+<% end %>
 <div class="row">
   <div class="col s12 m12">
     <h2>Manage Course</h2>
@@ -17,7 +28,7 @@
 <div class="row">
   <div class="col s12 m4">
     <ul class="collapsible" data-collapsible="accordion">
-      <li class="collapsible-menu-link active">
+      <li class="collapsible-menu-link active" id="admin-course" aria-role="button" aria-expanded="true" onclick="toggleAria('admin-course')" onkeydown="toggleAria('admin-course')">
         <div class="collapsible-header active"><h5>Admin Course</h5></div>
         <div class="collapsible-body">
           <ul class="options">
@@ -51,7 +62,7 @@
       </li>
     </ul>
     <% if @cud.user.administrator? then %>
-    <ul class="collapsible" data-collapsible="accordion">
+    <ul class="collapsible" data-collapsible="accordion" id="admin-autolab" aria-role="button" aria-expanded="false" onclick="toggleAria('admin-autolab')" onkeydown="toggleAria('admin-autolab')">
       <li class="collapsible-menu-link">
         <div class="collapsible-header"><h5>Admin Autolab</h5></div>
         <div class="collapsible-body">