Skip to content

E
edx-platform
Commit 4b842e7a by Edward Loveall
Options

Adds ARIA labels to page elements 

This includes calculator open/close button, navigation, profile, and
book's table of content.
parent 4fe22be5
Showing with 28 additions and 18 deletions
static/js/application.js
// Generated by CoffeeScript 1.3.2-pre
// Generated by CoffeeScript 1.3.3
(function() {
window.Calculator = (function() {
......@@ -20,6 +20,11 @@
Calculator.prototype.toggle = function() {
$('li.calc-main').toggleClass('open');
$('#calculator_wrapper #calculator_input').focus();
if ($('.calc.closed').length) {
$('.calc').attr('aria-label', 'Open Calculator');
} else {
$('.calc').attr('aria-label', 'Close Calculator');
}
return $('.calc').toggleClass('closed');
};
......
templates/coffee/src/calculator.coffee
......@@ -10,6 +10,11 @@ class window.Calculator
toggle: ->
$('li.calc-main').toggleClass 'open'
$('#calculator_wrapper #calculator_input').focus()
if $('.calc.closed').length
$('.calc').attr 'aria-label', 'Open Calculator'
else
$('.calc').attr 'aria-label', 'Close Calculator'
$('.calc').toggleClass 'closed'
helpToggle: ->
......
templates/courseware.html
......@@ -20,7 +20,7 @@
<section class="main-content">
<div class="course-wrapper">
<section class="course-index">
<section aria-label="Course Navigation" class="course-index">
<header id="open_close_accordion">
<h2>Courseware Index</h2>
<a href="#">close</a>
......
templates/info.html
......@@ -27,14 +27,14 @@ $(document).ready(function(){
<section class="updates">
<%include file="updates.html" />
</section>
<section class="handouts">
<section aria-label="Handout Navigation" class="handouts">
<%include file="handouts.html" />
</section>
% else:
<section class="updates">
<%include file="guest_updates.html" />
</section>
<section class="handouts">
<section aria-label="Handout Navigation" class="handouts">
<%include file="guest_handouts.html" />
</section>
% endif
......
templates/main.html
......@@ -40,7 +40,7 @@
<p> Copyright &copy; 2012. MIT. <a href="/t/copyright.html">Some rights reserved.</a>
</p>
<nav>
<ul class="social">
<ul aria-label="Social Links" class="social">
<li class="linkedin">
<a href="http://www.linkedin.com/groups/Friends-Alumni-MITx-4316538">Linked In</a>
</li>
......@@ -54,7 +54,7 @@
<ul>
<li><a href="#feedback_div" rel="leanModal">Feedback</a></li>
<li class="calc-main">
<a href="#" class="calc">Calculator</a>
<a aria-label="Open Calculator" href="#" class="calc">Calculator</a>
<div id="calculator_wrapper">
<form id="calculator">
......
templates/marketing.html
......@@ -97,7 +97,7 @@ function postJSON(url, data, callback) {
<li><a href="/t/mitx_help.html">Help</a></li>
</ul>
<ul class="social">
<ul aria-label="Social Links" class="social">
<li class="linkedin">
<a href="http://www.linkedin.com/groups/Friends-Alumni-MITx-4316538">Linked In</a>
</li>
......
templates/navigation.html
<%page args="active_page" />
<div class="header-wrapper">
<header>
<header aria-label="Global Navigation">
<hgroup>
<h1><em>
% if settings.ENABLE_MULTICOURSE:
......
templates/profile.html
......@@ -179,7 +179,7 @@ $(function() {
</section>
<section class="user-info">
<section aria-label="Profile Navigation" class="user-info">
<header>
<h1>Student Profile</h1>
......@@ -189,7 +189,7 @@ $(function() {
<li>
Name: <strong>${name}</strong>
%if True:
<a href="#apply_name_change" rel="leanModal" class="name-edit">Edit</a>
<a href="#apply_name_change" rel="leanModal" class="name-edit" aria-label="Edit Name">Edit</a>
%else:
(Name change pending)
%endif
......@@ -200,18 +200,18 @@ $(function() {
</li>
<li>
E-mail: <strong>${email}</strong> <a href="#change_email" rel="leanModal" class="edit-email">Edit</a>
E-mail: <strong>${email}</strong> <a href="#change_email" rel="leanModal" class="edit-email" aria-label="Edit Email">Edit</a>
</li>
<li>
Location: <div id="location_sub">${location}</div><div id="description"></div> <a href="#" id="change_location">Edit</a>
Location: <div id="location_sub">${location}</div><div id="description"></div> <a href="#" id="change_location" aria-label="Edit Location">Edit</a>
</li>
<li>
Language: <div id="language_sub">${language}</div> <a href="#" id="change_language">Edit</a>
Language: <div id="language_sub">${language}</div> <a href="#" id="change_language" aria-label="Edit Language">Edit</a>
</li>
<li>
Password reset
<input id="id_email" type="hidden" name="email" maxlength="75" value="${email}" />
<input type="submit" id="pwd_reset_button" value="Reset" />
<input type="submit" id="pwd_reset_button" value="Reset" aria-label="Reset Password" />
<p>We'll e-mail a password reset link to ${email}.</p>
</li>
</ul>
......
templates/seq_module.html
<nav class="sequence-nav">
<nav aria-label="Section Navigation" class="sequence-nav">
<ol>
% for t in range(1,1+len(items)):
<li><a href="#" class="seq_inactive" id="tt_${ t }"></a></li>
......@@ -14,7 +14,7 @@
<div id="seq_content"></div>
<nav class="sequence-bottom">
<ul>
<ul aria-label="Section Navigation">
<li class="${ id }prev prev"><a href="#">Previous</a></li>
<li class="${ id }next next"><a href="#">Next</a></li>
</ul>
......
templates/simplewiki_base.html
......@@ -77,7 +77,7 @@
<section class="main-content">
<div class="wiki-wrapper">
<%block name="wiki_panel">
<div id="wiki_panel">
<div aria-label="Wiki Navigation" id="wiki_panel">
<h2>Course Wiki</h2>
<%
if (wiki_article is not UNDEFINED):
......
templates/staticbook.html
......@@ -59,7 +59,7 @@ $("#open_close_accordion a").click(function(){
<section class="main-content">
<div class="book-wrapper">
<section class="book-sidebar">
<section aria-label="Textbook Navigation" class="book-sidebar">
<header id="open_close_accordion">
<h2>Table of Contents</h2>
<a href="#">close</a>
......
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