Commit 28f2a547 by Dave St.Germain

Merge pull request #2475 from edx/dcs/a11y-skip-nav

Add a means to skip to more specific parts of the page.
LMS-2156
parents 793dae53 9945d3e9
...@@ -929,7 +929,7 @@ section.wiki { ...@@ -929,7 +929,7 @@ section.wiki {
} }
} }
section.delete { div.delete {
padding: 40px; padding: 40px;
} }
......
...@@ -19,6 +19,8 @@ ${page_title_breadcrumbs(course_name())} ...@@ -19,6 +19,8 @@ ${page_title_breadcrumbs(course_name())}
<%static:css group='style-course-vendor'/> <%static:css group='style-course-vendor'/>
<%static:css group='style-course'/> <%static:css group='style-course'/>
<%block name="nav_skip">#course-content</%block>
<%include file="../discussion/_js_head_dependencies.html" /> <%include file="../discussion/_js_head_dependencies.html" />
% if show_chat: % if show_chat:
...@@ -202,7 +204,7 @@ ${fragment.foot_html()} ...@@ -202,7 +204,7 @@ ${fragment.foot_html()}
</div> </div>
% endif % endif
<section class="course-content"> <section class="course-content" id="course-content">
${fragment.body_html()} ${fragment.body_html()}
</section> </section>
</div> </div>
......
...@@ -5,6 +5,8 @@ ...@@ -5,6 +5,8 @@
<%namespace name='static' file='/static_content.html'/> <%namespace name='static' file='/static_content.html'/>
<%block name="pagetitle">${_("Instructor Dashboard")}</%block> <%block name="pagetitle">${_("Instructor Dashboard")}</%block>
<%block name="nav_skip">#instructor-dashboard-content</%block>
<%block name="headextra"> <%block name="headextra">
<%static:css group='style-course-vendor'/> <%static:css group='style-course-vendor'/>
<%static:css group='style-course'/> <%static:css group='style-course'/>
...@@ -124,7 +126,7 @@ function goto( mode) ...@@ -124,7 +126,7 @@ function goto( mode)
%endif %endif
<section class="instructor-dashboard-content"> <section class="instructor-dashboard-content" id="instructor-dashboard-content">
<h1>${_("Instructor Dashboard")}</h1> <h1>${_("Instructor Dashboard")}</h1>
<h2 class="navbar">[ <a href="#" onclick="goto('Grades');" class="${modeflag.get('Grades')}">Grades</a> | <h2 class="navbar">[ <a href="#" onclick="goto('Grades');" class="${modeflag.get('Grades')}">Grades</a> |
......
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
<%namespace name="progress_graph" file="/courseware/progress_graph.js"/> <%namespace name="progress_graph" file="/courseware/progress_graph.js"/>
<%block name="pagetitle">${_("{course_number} Progress").format(course_number=course.display_number_with_default) | h}</%block> <%block name="pagetitle">${_("{course_number} Progress").format(course_number=course.display_number_with_default) | h}</%block>
<%block name="nav_skip">#course-info-progress</%block>
<%! <%!
from django.core.urlresolvers import reverse from django.core.urlresolvers import reverse
...@@ -32,7 +33,7 @@ ${progress_graph.body(grade_summary, course.grade_cutoffs, "grade-detail-graph", ...@@ -32,7 +33,7 @@ ${progress_graph.body(grade_summary, course.grade_cutoffs, "grade-detail-graph",
<div class="container"> <div class="container">
<div class="profile-wrapper"> <div class="profile-wrapper">
<div class="course-info"> <div class="course-info" id="course-info-progress" aria-label="${_('Course Progress')}">
<header> <header>
<h1>${_("Course Progress for Student '{username}' ({email})").format(username=student.username, email=student.email)}</h1> <h1>${_("Course Progress for Student '{username}' ({email})").format(username=student.username, email=student.email)}</h1>
</header> </header>
......
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
<%block name="pagetitle">${_("Dashboard")}</%block> <%block name="pagetitle">${_("Dashboard")}</%block>
<%block name="bodyclass">view-dashboard is-authenticated</%block> <%block name="bodyclass">view-dashboard is-authenticated</%block>
<%block name="nav_skip">#my-courses</%block>
<%block name="js_extra"> <%block name="js_extra">
<script type="text/javascript"> <script type="text/javascript">
...@@ -211,7 +212,7 @@ ...@@ -211,7 +212,7 @@
</section> </section>
<section class="my-courses"> <section class="my-courses" id="my-courses">
<header> <header>
<h2>${_("Current Courses")}</h2> <h2>${_("Current Courses")}</h2>
</header> </header>
......
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
<%namespace name='static' file='../static_content.html'/> <%namespace name='static' file='../static_content.html'/>
<%block name="bodyclass">discussion</%block> <%block name="bodyclass">discussion</%block>
<%block name="pagetitle">${_("Discussion - {course_number}").format(course_number=course.display_number_with_default) | h}</%block> <%block name="pagetitle">${_("Discussion - {course_number}").format(course_number=course.display_number_with_default) | h}</%block>
<%block name="nav_skip">#discussion-container</%block>
<%block name="headextra"> <%block name="headextra">
<%static:css group='style-course-vendor'/> <%static:css group='style-course-vendor'/>
......
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
## 6. And tests go in lms/djangoapps/instructor/tests/ ## 6. And tests go in lms/djangoapps/instructor/tests/
<%block name="pagetitle">${_("Instructor Dashboard")}</%block> <%block name="pagetitle">${_("Instructor Dashboard")}</%block>
<%block name="nav_skip">#instructor-dashboard-content</%block>
<%block name="headextra"> <%block name="headextra">
<%static:css group='style-course-vendor'/> <%static:css group='style-course-vendor'/>
...@@ -58,7 +59,7 @@ ...@@ -58,7 +59,7 @@
## not checking access because if user can see this, they are at least course staff (with studio edit access) ## not checking access because if user can see this, they are at least course staff (with studio edit access)
<div class="studio-edit-link"><a href="${studio_url}" target="_blank">${_('Edit Course In Studio')}</a></div> <div class="studio-edit-link"><a href="${studio_url}" target="_blank">${_('Edit Course In Studio')}</a></div>
%endif %endif
<section class="instructor-dashboard-content-2"> <section class="instructor-dashboard-content-2" id="instructor-dashboard-content">
<h1>${_("Instructor Dashboard")}</h1> <h1>${_("Instructor Dashboard")}</h1>
<hr /> <hr />
......
...@@ -102,7 +102,7 @@ ...@@ -102,7 +102,7 @@
</head> </head>
<body class="<%block name='bodyclass'/> lang_${LANGUAGE_CODE}"> <body class="<%block name='bodyclass'/> lang_${LANGUAGE_CODE}">
<a class="nav-skip" href="#content">${_("Skip to this view's content")}</a> <a class="nav-skip" href="<%block name="nav_skip">#content</%block>">${_("Skip to this view's content")}</a>
<%include file="mathjax_accessible.html" /> <%include file="mathjax_accessible.html" />
......
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
</head> </head>
<body class="{% block bodyclass %}{% endblock %} lang_{{LANGUAGE_CODE}}"> <body class="{% block bodyclass %}{% endblock %} lang_{{LANGUAGE_CODE}}">
<a class="nav-skip" href="#content">{% trans "Skip to this view's content" %}</a> <a class="nav-skip" href="{% block nav_skip %}#content{% endblock %}">{% trans "Skip to this view's content" %}</a>
{% include "navigation.html" %} {% include "navigation.html" %}
<div class="content-wrapper" id="content"> <div class="content-wrapper" id="content">
{% block body %}{% endblock %} {% block body %}{% endblock %}
......
...@@ -7,12 +7,13 @@ ...@@ -7,12 +7,13 @@
{% block wiki_breadcrumbs %} {% block wiki_breadcrumbs %}
{% include "wiki/includes/breadcrumbs.html" %} {% include "wiki/includes/breadcrumbs.html" %}
{% endblock %} {% endblock %}
{% block nav_skip %}#main-article{% endblock %}
{% block wiki_contents %} {% block wiki_contents %}
<div class="article-wrapper"> <div class="article-wrapper">
<article class="main-article"> <article class="main-article" id="main-article">
{% if selected_tab != "edit" %} {% if selected_tab != "edit" %}
<h1>{{ article.current_revision.title }}</h1> <h1>{{ article.current_revision.title }}</h1>
......
...@@ -46,13 +46,14 @@ ...@@ -46,13 +46,14 @@
{% endblock %} {% endblock %}
{% block nav_skip %}#wiki-content{% endblock %}
{% block body %} {% block body %}
{% if course %} {% if course %}
{% include "courseware/course_navigation.html" with active_page_context="wiki" %} {% include "courseware/course_navigation.html" with active_page_context="wiki" %}
{% endif %} {% endif %}
<section class="container wiki {{ selected_tab }}"> <section class="container wiki {{ selected_tab }}" id="wiki-content">
<div class="wiki-wrapper"> <div class="wiki-wrapper">
{% block wiki_body %} {% block wiki_body %}
......
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