Merge pull request #2439 from edx/dcs/a11y-vivisections

Reduce the usage of <section> tags, to increase accessibility
LMS-2161

cms/djangoapps/contentstore/features/component.py

@@ -28,7 +28,7 @@ def see_a_single_step_component(step):
     for step_hash in step.hashes:
         component = step_hash['Component']
         assert_in(component, ['Discussion', 'Video'])
-        component_css = 'section.xmodule_{}Module'.format(component)
+        component_css = 'div.xmodule_{}Module'.format(component)
         assert_true(world.is_css_present(component_css),
                     "{} couldn't be found".format(component))
 
@@ -48,7 +48,7 @@ def add_a_multi_step_component(step, is_advanced, category):
 def see_a_multi_step_component(step, category):
 
     # Wait for all components to finish rendering
-    selector = 'li.component section.xblock-student_view'
+    selector = 'li.component div.xblock-student_view'
     world.wait_for(lambda _: len(world.css_find(selector)) == len(step.hashes))
 
     for idx, step_hash in enumerate(step.hashes):
@@ -73,11 +73,11 @@ def see_a_multi_step_component(step, category):
 
 @step(u'I see a "([^"]*)" Problem component$')
 def see_a_problem_component(step, category):
-    component_css = 'section.xmodule_CapaModule'
+    component_css = 'div.xmodule_CapaModule'
     assert_true(world.is_css_present(component_css),
                 'No problem was added to the unit.')
 
-    problem_css = 'li.component section.xblock-student_view'
+    problem_css = 'li.component div.xblock-student_view'
     actual_text = world.css_text(problem_css)
     assert_in(category.upper(), actual_text)
 
@@ -150,7 +150,7 @@ def duplicated_component(step, ordinal):
 
 @step(u'I see a Problem component with display name "([^"]*)" in position "([^"]*)"$')
 def see_component_in_position(step, display_name, index):
-    component_css = 'section.xmodule_CapaModule'
+    component_css = 'div.xmodule_CapaModule'
 
     def find_problem(_driver):
         return world.css_text(component_css, int(index)).startswith(display_name.upper())

cms/djangoapps/contentstore/features/component_settings_editor_helpers.py

@@ -23,9 +23,9 @@ def create_component_instance(step, category, component_type=None, is_advanced=F
 
     component_button_css = 'span.large-{}-icon'.format(category.lower())
     if category == 'problem':
-        module_css = 'section.xmodule_CapaModule'
+        module_css = 'div.xmodule_CapaModule'
     else:
-        module_css = 'section.xmodule_{}Module'.format(category.title())
+        module_css = 'div.xmodule_{}Module'.format(category.title())
 
     # Count how many of that module is on the page. Later we will
     # assert that one more was added.

cms/djangoapps/contentstore/features/static-pages.py

@@ -21,14 +21,14 @@ def add_page(step):
 
 @step(u'I should see a static page named "([^"]*)"$')
 def see_a_static_page_named_foo(step, name):
-    pages_css = 'section.xmodule_StaticTabModule'
+    pages_css = 'div.xmodule_StaticTabModule'
     page_name_html = world.css_html(pages_css)
     assert_equal(page_name_html, '\n    {name}\n'.format(name=name))
 
 
 @step(u'I should not see any static pages$')
 def not_see_any_static_pages(step):
-    pages_css = 'section.xmodule_StaticTabModule'
+    pages_css = 'div.xmodule_StaticTabModule'
     assert (world.is_css_not_present(pages_css, wait_time=30))
 
 

common/djangoapps/xmodule_modifiers.py

@@ -76,6 +76,7 @@ def wrap_xblock(runtime_class, block, view, frag, context, display_name_only=Fal
     template_context = {
         'content': block.display_name if display_name_only else frag.content,
         'classes': css_classes,
+        'display_name': block.display_name_with_default,
         'data_attributes': ' '.join(u'data-{}="{}"'.format(key, value) for key, value in data.items()),
     }
 

common/lib/xmodule/xmodule/css/capa/display.scss

@@ -29,7 +29,7 @@ iframe[seamless]{
   color: darken($error-red, 11%);
 }
 
-section.problem-progress {
+div.problem-progress {
   display: inline-block;
   padding-left: 5px;
   color: #999;
@@ -37,7 +37,7 @@ section.problem-progress {
   font-size: em(16);
 }
 
-section.problem {
+div.problem {
   @media print {
     display: block;
     padding: 0;
@@ -579,7 +579,7 @@ section.problem {
     border: 1px solid #ccc;
   }
 
-  section.action {
+  div.action {
     margin-top: $baseline;
 
     .save, .check, .show, .reset {

common/lib/xmodule/xmodule/css/combinedopenended/display.scss

@@ -818,7 +818,7 @@ section.open-ended-child {
     width: auto;
   }
 
-  section.action {
+  div.action {
     margin-top: $baseline;
 
     input.save {

common/lib/xmodule/xmodule/css/sequence/display.scss

@@ -393,7 +393,7 @@ nav.sequence-bottom {
   }
 }
 
-.xmodule_VerticalModule ol.vert-mod > li ul.sequence-nav-buttons {
+.xmodule_VerticalModule div.vert-mod > div ul.sequence-nav-buttons {
   list-style: none !important;
 }
 

common/lib/xmodule/xmodule/js/fixtures/annotatable.html

@@ -29,7 +29,7 @@
     </div>
 </section>
 
-<section class="problem"><a class="annotation-return" href="javascript:void(0)">Return to Annotation</a></section>
-<section class="problem"><a class="annotation-return" href="javascript:void(0)">Return to Annotation</a></section>
-<section class="problem"><a class="annotation-return" href="javascript:void(0)">Return to Annotation</a></section>
+<div class="problem"><a class="annotation-return" href="javascript:void(0)">Return to Annotation</a></div>
+<div class="problem"><a class="annotation-return" href="javascript:void(0)">Return to Annotation</a></div>
+<div class="problem"><a class="annotation-return" href="javascript:void(0)">Return to Annotation</a></div>
 

common/lib/xmodule/xmodule/js/fixtures/problem_content.html

 <h2 class="problem-header">${_("Problem Header")}</h2>
 
-<section class='problem-progress'>
-</section>
+<div class='problem-progress'></div>
 
-<section class="problem">
+<div class="problem">
   <p>${_("Problem Content")}</p>
 
-  <section class="action">
+  <div class="action">
     <input type="hidden" name="problem_id" value="1">
 
     <input type="text" name="input_example_1" id="input_example_1" value="" class="math" />
@@ -18,6 +17,6 @@
     <input class="save" type="button" value="${_('Save')}">
     <button class="show"><span class="show-label">${_("Show Answer(s)")}</span> <span class="sr">(for question(s) above - adjacent to each field)</span></button>
     <a href="/courseware/6.002_Spring_2012/${ explain }" class="new-page">${_("Explanation")}</a>
-    <section class="submission_feedback"></section>
-  </section>
-</section>
+    <div class="submission_feedback"></div>
+  </div>
+</div>

common/lib/xmodule/xmodule/js/spec/capa/display_spec.coffee

@@ -52,19 +52,19 @@ describe 'Problem', ->
       expect(window.update_schematics).toHaveBeenCalled()
 
     it 'bind answer refresh on button click', ->
-      expect($('section.action input:button')).toHandleWith 'click', @problem.refreshAnswers
+      expect($('div.action input:button')).toHandleWith 'click', @problem.refreshAnswers
 
     it 'bind the check button', ->
-      expect($('section.action input.check')).toHandleWith 'click', @problem.check_fd
+      expect($('div.action input.check')).toHandleWith 'click', @problem.check_fd
 
     it 'bind the reset button', ->
-      expect($('section.action input.reset')).toHandleWith 'click', @problem.reset
+      expect($('div.action input.reset')).toHandleWith 'click', @problem.reset
 
     it 'bind the show button', ->
-      expect($('section.action button.show')).toHandleWith 'click', @problem.show
+      expect($('div.action button.show')).toHandleWith 'click', @problem.show
 
     it 'bind the save button', ->
-      expect($('section.action input.save')).toHandleWith 'click', @problem.save
+      expect($('div.action input.save')).toHandleWith 'click', @problem.save
 
     it 'bind the math input', ->
       expect($('input.math')).toHandleWith 'keyup', @problem.refreshMath

common/lib/xmodule/xmodule/js/src/capa/display.coffee

@@ -19,11 +19,11 @@ class @Problem
 
     problem_prefix = @element_id.replace(/problem_/,'')
     @inputs = @$("[id^=input_#{problem_prefix}_]")
-    @$('section.action input:button').click @refreshAnswers
-    @$('section.action input.check').click @check_fd
-    @$('section.action input.reset').click @reset
-    @$('section.action button.show').click @show
-    @$('section.action input.save').click @save
+    @$('div.action input:button').click @refreshAnswers
+    @$('div.action input.check').click @check_fd
+    @$('div.action input.reset').click @reset
+    @$('div.action button.show').click @show
+    @$('div.action input.save').click @save
 
     @bindResetCorrectness()
 

common/lib/xmodule/xmodule/js/src/poll/poll_main.js

@@ -272,7 +272,7 @@ function PollMain(el) {
             c1 += 1;
 
             if (
-                (tempEl.tagName.toLowerCase() === 'section') &&
+                (tempEl.tagName.toLowerCase() === 'div') &&
                 ($(tempEl).hasClass('xmodule_WrapperModule') === true)
             ) {
                 _this.wrapperSectionEl = tempEl;

common/lib/xmodule/xmodule/js/src/vertical/edit.coffee

@@ -6,4 +6,4 @@ class @VerticalDescriptor extends XModule.Descriptor
     )
 
   save: ->
-    children: $('.vert-mod li', @element).map((idx, el) -> $(el).data('id')).toArray()
+    children: $('.vert-mod div', @element).map((idx, el) -> $(el).data('id')).toArray()

common/lib/xmodule/xmodule/js/src/wrapper/edit.coffee

@@ -7,4 +7,4 @@ class @WrapperDescriptor extends XModule.Descriptor
     )
 
   save: ->
-    children: $('.vert-mod li', @element).map((idx, el) -> $(el).data('id')).toArray()
+    children: $('.vert-mod div', @element).map((idx, el) -> $(el).data('id')).toArray()

common/templates/xblock_wrapper.html

-<section class="${' '.join(classes)}" ${data_attributes}>
+<div class="${' '.join(classes)}" ${data_attributes} aria-label="${display_name}">
     ${content}
-</section>
+</div>

common/test/acceptance/pages/lms/course_nav.py

@@ -15,7 +15,7 @@ class CourseNavPage(PageObject):
     url = None
 
     def is_browser_on_page(self):
-        return self.is_css_present('section.course-index')
+        return self.is_css_present('div.course-index')
 
     @property
     def sections(self):

lms/djangoapps/courseware/features/annotatable.py

@@ -139,7 +139,7 @@ class AnnotatableSteps(object):
         self.active_problem = problem
 
     def active_problem_selector(self, subselector):
-        return 'section[data-problem-id="{}"] {}'.format(
+        return 'div[data-problem-id="{}"] {}'.format(
             world.scenario_dict['PROBLEMS'][self.active_problem].location.url(),
             subselector,
         )

lms/djangoapps/courseware/features/problems.py

@@ -121,7 +121,7 @@ def press_the_button_with_label(_step, buttonname):
 
 @step(u'The "([^"]*)" button does( not)? appear')
 def action_button_present(_step, buttonname, doesnt_appear):
-    button_css = 'section.action input[value*="%s"]' % buttonname
+    button_css = 'div.action input[value*="%s"]' % buttonname
     if bool(doesnt_appear):
         assert world.is_css_not_present(button_css)
     else:
@@ -141,7 +141,7 @@ def see_score(_step, score):
     # The problem progress is changed by
     # cms/static/xmodule_js/src/capa/display.js
     # so give it some time to render on the page.
-    score_css = 'section.problem-progress'
+    score_css = 'div.problem-progress'
     expected_text = '({})'.format(score)
     world.wait_for(lambda _: world.css_has_text(score_css, expected_text))
 

lms/djangoapps/courseware/tests/test_module_render.py

@@ -406,7 +406,7 @@ class TestHtmlModifiers(ModuleStoreTestCase):
         )
         result_fragment = module.render('student_view')
 
-        self.assertIn('section class="xblock xblock-student_view xmodule_display xmodule_HtmlModule"', result_fragment.content)
+        self.assertIn('div class="xblock xblock-student_view xmodule_display xmodule_HtmlModule"', result_fragment.content)
 
     def test_xmodule_display_wrapper_disabled(self):
         module = render.get_module(
@@ -419,7 +419,7 @@ class TestHtmlModifiers(ModuleStoreTestCase):
         )
         result_fragment = module.render('student_view')
 
-        self.assertNotIn('section class="xblock xblock-student_view xmodule_display xmodule_HtmlModule"', result_fragment.content)
+        self.assertNotIn('div class="xblock xblock-student_view xmodule_display xmodule_HtmlModule"', result_fragment.content)
 
     def test_static_link_rewrite(self):
         module = render.get_module(

lms/static/sass/course/courseware/_courseware.scss

@@ -125,7 +125,7 @@ div.course-wrapper {
       }
     }
 
-    section.xmodule_WrapperModule ol.vert-mod > li {
+    section.xmodule_WrapperModule div.vert-mod > div {
       border-bottom: none;
     }
 
@@ -193,7 +193,7 @@ div.course-wrapper {
   }
 
   &.closed {
-    section.course-index {
+    div.course-index {
       width: flex-grid(.6);
       overflow: hidden;
 

lms/static/sass/course/courseware/_sidebar.scss

-section.course-index {
+.course-index {
   @extend .sidebar;
   @extend .tran;
   border-radius: 3px 0 0 3px;

lms/static/sass/ie.scss

@@ -159,7 +159,7 @@
     display: block !important;
 
     section.course-content,
-    section.course-index {
+    div.course-index {
       display: block !important;
       float: left;
     }

lms/templates/courseware/courseware.html

@@ -185,28 +185,28 @@ ${fragment.foot_html()}
  <%include file="/courseware/course_navigation.html" args="active_page='courseware'" />
 % endif
 
-<section class="container">
+<div class="container">
   <div class="course-wrapper">
 
 % if accordion:
-    <section aria-label="${_('Course Navigation')}" class="course-index">
+    <div class="course-index">
       <header id="open_close_accordion">
         <a href="#">${_("close")}</a>
       </header>
 
       <div id="accordion" style="display: none">
-        <nav>
+        <nav aria-label="${_('Course Navigation')}">
           ${accordion}
         </nav>
       </div>
-    </section>
+    </div>
 % endif
 
     <section class="course-content">
       ${fragment.body_html()}
     </section>
   </div>
-</section>
+</div>
 
 % if show_chat:
   <div id="chat-wrapper">

lms/templates/poll.html

-<section
+<div
     id="poll_${element_id}"
     class="${element_class}"
     data-ajax-url="${ajax_url}"
 >
     <!-- Hidden field to read configuration JSON from. -->
     <div class="${element_class}_div" id="${element_id}_json" style="display: none;">${configuration_json}</div>
-</section>
\ No newline at end of file
+</div>
\ No newline at end of file

lms/templates/problem.html

@@ -5,13 +5,12 @@
   ${ problem['name'] }
 </h2>
 
-<section class="problem-progress">
-</section>
+<div class="problem-progress"></div>
 
-<section class="problem">
+<div class="problem">
   ${ problem['html'] }
 
-  <section class="action">
+  <div class="action">
     <input type="hidden" name="problem_id" value="${ problem['name'] }" />
 
     % if check_button:
@@ -27,9 +26,9 @@
     <button class="show"><span class="show-label">${_('Show Answer(s)')}</span> <span class="sr">${_("(for question(s) above - adjacent to each field)")}</span></button>
     % endif
     % if attempts_allowed :
-    <section class="submission_feedback">
+    <div class="submission_feedback">
       ${_("You have used {num_used} of {num_total} submissions").format(num_used=attempts_used, num_total=attempts_allowed)}
-    </section>
+    </div>
     % endif
-  </section>
-</section>
+  </div>
+</div>

lms/templates/problem_ajax.html

-<section id="problem_${element_id}" class="problems-wrapper" data-problem-id="${id}" data-url="${ajax_url}" data-progress_status="${progress_status}" data-progress_detail="${progress_detail}"></section>
+<div id="problem_${element_id}" class="problems-wrapper" data-problem-id="${id}" data-url="${ajax_url}" data-progress_status="${progress_status}" data-progress_detail="${progress_detail}"></div>

lms/templates/registration/password_reset_complete.html

@@ -56,8 +56,8 @@
   </nav>
 </header>
 
-<section class="content-wrapper">
-  <section class="passwordreset container">
+<div class="content-wrapper">
+  <div class="passwordreset container">
     <section class="introduction">
       <header>
         <h1>{% trans "Your Password Reset is Complete" %}</h1>
@@ -65,11 +65,11 @@
     </section>
 
     {% block content %}
-    <section role="main" class="content">
+    <div role="main" class="content">
       {% blocktrans with link_start='<a href="/login">' link_end='</a>' %}
       Your password has been set.  You may go ahead and {{ link_start }}log in{{ link_end }} now.
       {% endblocktrans %}
-    </section>
+    </div>
     {% endblock %}
-  </section>
-</section>
+  </div>
+</div>

lms/templates/seq_module.html

 <%! from django.utils.translation import ugettext as _ %>
 
 <div id="sequence_${element_id}" class="sequence" data-id="${item_id}" data-position="${position}" data-ajax-url="${ajax_url}" >
-  <nav aria-label="${_('Section Navigation')}" class="sequence-nav">
+  <nav class="sequence-nav">
     <ul class="sequence-nav-buttons">
       <li class="prev"><a href="#">${_('Previous')}</a></li>
     </ul>
 
     <div class="sequence-list-wrapper">
-      <ol id="sequence-list">
+      <ol aria-label="${_('Section Navigation')}" id="sequence-list">
         % for idx, item in enumerate(items):
         ## TODO (vshnayder): add item.progress_detail either to the title or somewhere else.
         ## Make sure it gets updated after ajax calls.
         ## implementation note: will need to figure out how to handle combining detail
         ## statuses of multiple modules in js.
-        <li>
+        <li aria-label="${item['title']}">
         <a class="seq_${item['type']} inactive progress-${item['progress_status']}"
            data-id="${item['id']}"
            data-element="${idx+1}"
            data-title="${item['title']}"
            href="javascript:void(0);">
-            <p aria-hidden="false">${item['title']}<span class="sr">, ${item['type']}</span></p>
+            <p aria-hidden="false">${item['title']}<span class="sr" aria-hidden="true">, ${item['type']}</span></p>
           </a>
         </li>
         % endfor

lms/templates/vert_module.html

-<ol class="vert-mod">
+<div class="vert-mod">
 % for idx, item in enumerate(items):
-  <li id="vert-${idx}" data-id="${item['id']}">
+  <div id="vert-${idx}" data-id="${item['id']}">
     ${item['content']}
-  </li>
+  </div>
 % endfor
-</ol>
+</div>