Aria-expanded attributes to indicate state of panels

Panels did not include the  aria-expanded attribute to indicate the
current state of the panel

TNL-66

openassessment/templates/openassessmentblock/grade/oa_grade_cancelled.html

 {% load i18n %}
 {% spaceless %}
-<div id="openassessment__grade" class="openassessment__steps__step step--grade has--error">
+<div id="openassessment__grade" aria-expanded="false" class="openassessment__steps__step step--grade has--error">
     <header class="step__header ui-toggle-visibility__control">
         <h2 class="step__title">
             <span class="wrapper--copy">

openassessment/templates/openassessmentblock/grade/oa_grade_closed.html

 {% load i18n %}
 {% spaceless %}
-<div id="openassessment__grade" class="openassessment__steps__step step--grade is--complete">
+<div id="openassessment__grade" aria-expanded="false" class="openassessment__steps__step step--grade is--complete">
     <header class="step__header ui-toggle-visibility__control">
         <h2 class="step__title">
             <span class="wrapper--copy">

openassessment/templates/openassessmentblock/grade/oa_grade_complete.html

 {% load i18n %}
 {% spaceless %}
-<div id="openassessment__grade" class="openassessment__steps__step step--grade is--complete has--grade {% if allow_latex %}allow--latex{% endif %}">
+<div id="openassessment__grade" aria-expanded="true" class="openassessment__steps__step step--grade is--complete has--grade {% if allow_latex %}allow--latex{% endif %}">
     <header class="step__header ui-toggle-visibility__control">
         <h2 class="step__title">
             <span class="wrapper--copy">

openassessment/templates/openassessmentblock/grade/oa_grade_incomplete.html

 {% load i18n %}
 {% spaceless %}
-<div id="openassessment__grade" class="openassessment__steps__step step--grade">
+<div id="openassessment__grade" aria-expanded="true" class="openassessment__steps__step step--grade">
     <header class="step__header ui-toggle-visibility__control">
         <h2 class="step__title">
             <span class="wrapper--copy">

openassessment/templates/openassessmentblock/grade/oa_grade_not_started.html

 {% load i18n %}
 {% spaceless %}
-<div id="openassessment__grade" class="openassessment__steps__step step--grade is--unstarted">
+<div id="openassessment__grade" aria-expanded="true" class="openassessment__steps__step step--grade is--unstarted">
     <header class="step__header ui-toggle-visibility__control">
         <h2 class="step__title">
             <span class="wrapper--copy">

openassessment/templates/openassessmentblock/grade/oa_grade_waiting.html

 {% load i18n %}
 {% spaceless %}
-<div id="openassessment__grade" class="openassessment__steps__step step--grade">
+<div id="openassessment__grade" class="openassessment__steps__step step--grade" aria-expanded="true">
     <header class="step__header ui-toggle-visibility__control">
         <h2 class="step__title">
             <span class="wrapper--copy">

openassessment/templates/openassessmentblock/peer/oa_peer_assessment.html

@@ -5,6 +5,7 @@
     id="openassessment__peer-assessment"
     class="openassessment__steps__step step--peer-assessment ui-toggle-visibility {% if allow_latex %} allow--latex {%endif%}"
     data-submission-uuid="{{ peer_submission.uuid }}"
+    aria-expanded="true"
 >
 {% endblock %}
 {% spaceless %}

openassessment/templates/openassessmentblock/peer/oa_peer_cancelled.html

@@ -4,7 +4,7 @@
 
 
 {% block list_item %}
-<div id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment">
+<div id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment" aria-expanded="false">
 {% endblock %}
 
 {% block title %}

openassessment/templates/openassessmentblock/peer/oa_peer_closed.html

@@ -2,7 +2,7 @@
 {% load i18n %}
 
 {% block list_item %}
-<div id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment is--incomplete ui-toggle-visibility">
+<div id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment is--incomplete ui-toggle-visibility" aria-expanded="false">
 {% endblock %}
 
 {% block title %}

openassessment/templates/openassessmentblock/peer/oa_peer_complete.html

@@ -2,7 +2,7 @@
 {% load i18n %}
 
 {% block list_item %}
-<div id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--empty is--complete is--collapsed">
+<div id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--empty is--complete is--collapsed" aria-expanded="false">
 {% endblock %}
 
 {% block title %}

openassessment/templates/openassessmentblock/peer/oa_peer_turbo_mode.html

@@ -6,6 +6,7 @@
     id="openassessment__peer-assessment"
     class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--complete"
     data-submission-uuid="{{ peer_submission.uuid }}"
+    aria-expanded="true"
 >
 {% endblock %}
 

openassessment/templates/openassessmentblock/peer/oa_peer_turbo_mode_waiting.html

@@ -2,7 +2,7 @@
 {% load i18n %}
 
 {% block list_item %}
-<div id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--complete">
+<div id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--complete" aria-expanded="true"
 {% endblock %}
 
 {% block title %}

openassessment/templates/openassessmentblock/peer/oa_peer_unavailable.html

@@ -2,7 +2,7 @@
 {% load i18n %}
 
 {% block list_item %}
-<div id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--unavailable is--empty is--collapsed">
+<div id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--unavailable is--empty is--collapsed" aria-expanded="false">
 {% endblock %}
 
 {% block title %}

openassessment/templates/openassessmentblock/peer/oa_peer_waiting.html

@@ -2,7 +2,7 @@
 {% load i18n %}
 
 {% block list_item %}
-<div id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment">
+<div id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment" aria-expanded="true">
 {% endblock %}
 
 {% block title %}

openassessment/templates/openassessmentblock/response/oa_response_cancelled.html

@@ -3,7 +3,7 @@
 {% load tz %}
 
 {% block list_item %}
-<div id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility has--error">
+<div id="openassessment__response" aria-expanded="false" class="openassessment__steps__step step--response ui-toggle-visibility has--error">
 {% endblock %}
 
 {% block title %}

openassessment/templates/openassessmentblock/response/oa_response_closed.html

 {%  extends "openassessmentblock/response/oa_response.html" %}
 {% load i18n %}
 {% block list_item %}
-<div id="openassessment__response" class="openassessment__steps__step step--response is--incomplete ui-toggle-visibility">
+<div id="openassessment__response" aria-expanded="false" class="openassessment__steps__step step--response is--incomplete ui-toggle-visibility">
 {% endblock %}
 
 {% block title %}

openassessment/templates/openassessmentblock/response/oa_response_graded.html

@@ -2,7 +2,7 @@
 {% load i18n %}
 
 {% block list_item %}
-<div id="openassessment__response" class="openassessment__steps__step step--response is--complete ui-toggle-visibility is--collapsed {% if allow_latex %}allow--latex{%endif%}">
+<div id="openassessment__response" aria-expanded="false" class="openassessment__steps__step step--response is--complete ui-toggle-visibility is--collapsed {% if allow_latex %}allow--latex{%endif%}">
 {% endblock %}
 
 {% block title %}

openassessment/templates/openassessmentblock/response/oa_response_unavailable.html

@@ -2,7 +2,7 @@
 {% load i18n %}
 
 {% block list_item %}
-<div id="openassessment__response" class="openassessment__steps__step step--response is--empty is--unavailable is--collapsed">
+<div id="openassessment__response" aria-expanded="false" class="openassessment__steps__step step--response is--empty is--unavailable is--collapsed">
 {% endblock %}
 
 {% block title %}

openassessment/templates/openassessmentblock/self/oa_self_assessment.html

@@ -2,7 +2,7 @@
 {% load tz %}
 {% spaceless %}
 {% block list_item %}
-<div id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility {% if allow_latex %}allow--latex{%endif%}">
+<div id="openassessment__self-assessment" aria-expanded="true" class="openassessment__steps__step step--self-assessment ui-toggle-visibility {% if allow_latex %}allow--latex{%endif%}">
 {% endblock %}
 
     <header class="step__header ui-toggle-visibility__control">

openassessment/templates/openassessmentblock/self/oa_self_cancelled.html

@@ -4,7 +4,7 @@
 
 
 {% block list_item %}
-<div id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment">
+<div id="openassessment__self-assessment" aria-expanded="false" class="openassessment__steps__step step--self-assessment">
 {% endblock %}
 
 {% block title %}

openassessment/templates/openassessmentblock/self/oa_self_closed.html

@@ -2,7 +2,7 @@
 {% load i18n %}
 
 {% block list_item %}
-<div id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--incomplete ui-toggle-visibility">
+<div id="openassessment__self-assessment" aria-expanded="false" class="openassessment__steps__step step--self-assessment is--incomplete ui-toggle-visibility">
 {% endblock %}
 
 {% block title %}

openassessment/templates/openassessmentblock/self/oa_self_complete.html

@@ -2,7 +2,7 @@
 {% load i18n %}
 
 {% block list_item %}
-<div id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--complete is--empty is--collapsed">
+<div id="openassessment__self-assessment" aria-expanded="false" class="openassessment__steps__step step--self-assessment is--complete is--empty is--collapsed">
 {% endblock %}
 
 {% block title %}

openassessment/templates/openassessmentblock/self/oa_self_unavailable.html

@@ -2,7 +2,7 @@
 {% load i18n %}
 
 {% block list_item %}
-<div id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--empty is--unavailable is--collapsed">
+<div id="openassessment__self-assessment"aria-expanded="false" class="openassessment__steps__step step--self-assessment is--empty is--unavailable is--collapsed">
 {% endblock %}
 
 {% block title %}

openassessment/templates/openassessmentblock/student_training/student_training.html

@@ -2,7 +2,7 @@
 {% load tz %}
 {% spaceless %}
 {% block list_item %}
-<div id="openassessment__student-training" class="openassessment__steps__step step--student-training ui-toggle-visibility {% if allow_latex %}allow--latex{%endif%}">
+<div id="openassessment__student-training" aria-expanded="true" class="openassessment__steps__step step--student-training ui-toggle-visibility {% if allow_latex %}allow--latex{%endif%}">
 {% endblock %}
 
 <header class="step__header ui-toggle-visibility__control">

openassessment/templates/openassessmentblock/student_training/student_training_cancelled.html

@@ -3,7 +3,7 @@
 {% load tz %}
 
 {% block list_item %}
-    <div id="openassessment__student-training" class="openassessment__steps__step step--student-training">
+    <div id="openassessment__student-training" aria-expanded="false" class="openassessment__steps__step step--student-training">
 {% endblock %}
 
 {% block title %}

openassessment/templates/openassessmentblock/student_training/student_training_closed.html

@@ -2,7 +2,7 @@
 {% load i18n %}
 
 {% block list_item %}
-    <div id="openassessment__student-training" class="openassessment__steps__step step--student-training is--incomplete ui-toggle-visibility">
+    <div id="openassessment__student-training" aria-expanded="false" class="openassessment__steps__step step--student-training is--incomplete ui-toggle-visibility">
 {% endblock %}
 
 {% block title %}

openassessment/templates/openassessmentblock/student_training/student_training_complete.html

@@ -2,7 +2,7 @@
 {% load i18n %}
 
 {% block list_item %}
-    <div id="openassessment__student-training" class="openassessment__steps__step step--student-training is--complete is--empty is--collapsed">
+    <div id="openassessment__student-training" aria-expanded="false" class="openassessment__steps__step step--student-training is--complete is--empty is--collapsed">
 {% endblock %}
 
 {% block title %}

openassessment/templates/openassessmentblock/student_training/student_training_unavailable.html

@@ -2,7 +2,7 @@
 {% load i18n %}
 
 {% block list_item %}
-    <div id="openassessment__student-training" class="openassessment__steps__step step--student-training is--empty is--unavailable is--collapsed">
+    <div id="openassessment__student-training" aria-expanded="false" class="openassessment__steps__step step--student-training is--empty is--unavailable is--collapsed">
 {% endblock %}
 
 {% block title %}

openassessment/xblock/static/js/src/lms/oa_base.js

@@ -52,6 +52,9 @@ OpenAssessment.BaseView.prototype = {
         parentSel.on('click', '.ui-toggle-visibility__control', function (eventData) {
                 var sel = $(eventData.target).closest('.ui-toggle-visibility');
                 sel.toggleClass('is--collapsed');
+                sel.attr('aria-expanded', function (i, attr) {
+                    return attr == 'true' ? 'false' : 'true'
+                });
             }
         );
     },