Removed inappropriate section tags. Because screen readers announce each…

Removed inappropriate section tags. Because screen readers announce each section, they should not be used unless they are actually defining meaningful sections.

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>