Commit b0c327b6 by Ahsan Ulhaq

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
parent cba8180c
{% load i18n %} {% load i18n %}
{% spaceless %} {% 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"> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="wrapper--copy"> <span class="wrapper--copy">
......
{% load i18n %} {% load i18n %}
{% spaceless %} {% 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"> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="wrapper--copy"> <span class="wrapper--copy">
......
{% load i18n %} {% load i18n %}
{% spaceless %} {% 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"> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="wrapper--copy"> <span class="wrapper--copy">
......
{% load i18n %} {% load i18n %}
{% spaceless %} {% 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"> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="wrapper--copy"> <span class="wrapper--copy">
......
{% load i18n %} {% load i18n %}
{% spaceless %} {% 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"> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="wrapper--copy"> <span class="wrapper--copy">
......
{% load i18n %} {% load i18n %}
{% spaceless %} {% 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"> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="wrapper--copy"> <span class="wrapper--copy">
......
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
id="openassessment__peer-assessment" id="openassessment__peer-assessment"
class="openassessment__steps__step step--peer-assessment ui-toggle-visibility {% if allow_latex %} allow--latex {%endif%}" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility {% if allow_latex %} allow--latex {%endif%}"
data-submission-uuid="{{ peer_submission.uuid }}" data-submission-uuid="{{ peer_submission.uuid }}"
aria-expanded="true"
> >
{% endblock %} {% endblock %}
{% spaceless %} {% spaceless %}
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
{% block list_item %} {% 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 %} {% endblock %}
{% block title %} {% block title %}
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
{% load i18n %} {% load i18n %}
{% block list_item %} {% 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 %} {% endblock %}
{% block title %} {% block title %}
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
{% load i18n %} {% load i18n %}
{% block list_item %} {% 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 %} {% endblock %}
{% block title %} {% block title %}
......
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
id="openassessment__peer-assessment" id="openassessment__peer-assessment"
class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--complete" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--complete"
data-submission-uuid="{{ peer_submission.uuid }}" data-submission-uuid="{{ peer_submission.uuid }}"
aria-expanded="true"
> >
{% endblock %} {% endblock %}
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
{% load i18n %} {% load i18n %}
{% block list_item %} {% 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 %} {% endblock %}
{% block title %} {% block title %}
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
{% load i18n %} {% load i18n %}
{% block list_item %} {% 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 %} {% endblock %}
{% block title %} {% block title %}
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
{% load i18n %} {% load i18n %}
{% block list_item %} {% 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 %} {% endblock %}
{% block title %} {% block title %}
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
{% load tz %} {% load tz %}
{% block list_item %} {% 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 %} {% endblock %}
{% block title %} {% block title %}
......
{% extends "openassessmentblock/response/oa_response.html" %} {% extends "openassessmentblock/response/oa_response.html" %}
{% load i18n %} {% load i18n %}
{% block list_item %} {% 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 %} {% endblock %}
{% block title %} {% block title %}
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
{% load i18n %} {% load i18n %}
{% block list_item %} {% 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 %} {% endblock %}
{% block title %} {% block title %}
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
{% load i18n %} {% load i18n %}
{% block list_item %} {% 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 %} {% endblock %}
{% block title %} {% block title %}
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
{% load tz %} {% load tz %}
{% spaceless %} {% spaceless %}
{% block list_item %} {% 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 %} {% endblock %}
<header class="step__header ui-toggle-visibility__control"> <header class="step__header ui-toggle-visibility__control">
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
{% block list_item %} {% 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 %} {% endblock %}
{% block title %} {% block title %}
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
{% load i18n %} {% load i18n %}
{% block list_item %} {% 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 %} {% endblock %}
{% block title %} {% block title %}
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
{% load i18n %} {% load i18n %}
{% block list_item %} {% 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 %} {% endblock %}
{% block title %} {% block title %}
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
{% load i18n %} {% load i18n %}
{% block list_item %} {% 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 %} {% endblock %}
{% block title %} {% block title %}
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
{% load tz %} {% load tz %}
{% spaceless %} {% spaceless %}
{% block list_item %} {% 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 %} {% endblock %}
<header class="step__header ui-toggle-visibility__control"> <header class="step__header ui-toggle-visibility__control">
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
{% load tz %} {% load tz %}
{% block list_item %} {% 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 %} {% endblock %}
{% block title %} {% block title %}
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
{% load i18n %} {% load i18n %}
{% block list_item %} {% 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 %} {% endblock %}
{% block title %} {% block title %}
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
{% load i18n %} {% load i18n %}
{% block list_item %} {% 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 %} {% endblock %}
{% block title %} {% block title %}
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
{% load i18n %} {% load i18n %}
{% block list_item %} {% 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 %} {% endblock %}
{% block title %} {% block title %}
......
...@@ -52,6 +52,9 @@ OpenAssessment.BaseView.prototype = { ...@@ -52,6 +52,9 @@ OpenAssessment.BaseView.prototype = {
parentSel.on('click', '.ui-toggle-visibility__control', function (eventData) { parentSel.on('click', '.ui-toggle-visibility__control', function (eventData) {
var sel = $(eventData.target).closest('.ui-toggle-visibility'); var sel = $(eventData.target).closest('.ui-toggle-visibility');
sel.toggleClass('is--collapsed'); sel.toggleClass('is--collapsed');
sel.attr('aria-expanded', function (i, attr) {
return attr == 'true' ? 'false' : 'true'
});
} }
); );
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment