Andal.LND/edx-platform
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix keyboard navigation in course outline

Browse Source 
Remove some obsolete and broken a11y markup that was causing
keyboard navigation in the main course outline to focus elements
that shouldn't be focused.

LEARNER-2893
This commit is contained in:
Michael Terry
2017-11-27 16:48:08 -05:00
parent ffc838250d
commit 8570809cae
1 changed files with 2 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
openedx/features/course_experience/templates/course_experience/course-outline-fragment.html
View File

@@ -14,25 +14,19 @@ from openedx.core.djangolib.markup import HTML, Text
<main role="main" class="course-outline" id="main" tabindex="-1"> <main role="main" class="course-outline" id="main" tabindex="-1">
% if blocks.get('children'): % if blocks.get('children'):
<ol class="block-tree" role="tree"> <ol class="block-tree">
% for section in blocks.get('children'): % for section in blocks.get('children'):
<li <li
aria-expanded="true"
class="outline-item focusable section" class="outline-item focusable section"
id="${ section['id'] }" id="${ section['id'] }"
role="treeitem"
tabindex="0"
> >
<div class="section-name"> <div class="section-name">
<h3 class="section-title">${ section['display_name'] }</h3> <h3 class="section-title">${ section['display_name'] }</h3>
</div> </div>
<ol class="outline-item focusable" role="group" tabindex="0"> <ol class="outline-item focusable">
% for subsection in section.get('children', []): % for subsection in section.get('children', []):
<li <li
class="subsection ${ 'current' if subsection['last_accessed'] else '' }" class="subsection ${ 'current' if subsection['last_accessed'] else '' }"
role="treeitem"
tabindex="-1"
aria-expanded="true"
> >
<a <a
class="outline-item focusable" class="outline-item focusable"
@@ -107,7 +101,6 @@ from openedx.core.djangolib.markup import HTML, Text
<div class="subsection-actions"> <div class="subsection-actions">
## Resume button (if last visited section) ## Resume button (if last visited section)
% if subsection['last_accessed']: % if subsection['last_accessed']:
<span class="sr-only">${ _("This is your last visited course section.") }</span>
<span class="resume-right"> <span class="resume-right">
<b>${ _("Resume Course") }</b> <b>${ _("Resume Course") }</b>
<span class="icon fa fa-arrow-circle-right" aria-hidden="true"></span> <span class="icon fa fa-arrow-circle-right" aria-hidden="true"></span>