Commit a6797899 by Dave St.Germain

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.
parent 9132009f
...@@ -28,7 +28,7 @@ def see_a_single_step_component(step): ...@@ -28,7 +28,7 @@ def see_a_single_step_component(step):
for step_hash in step.hashes: for step_hash in step.hashes:
component = step_hash['Component'] component = step_hash['Component']
assert_in(component, ['Discussion', 'Video']) 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), assert_true(world.is_css_present(component_css),
"{} couldn't be found".format(component)) "{} couldn't be found".format(component))
...@@ -48,7 +48,7 @@ def add_a_multi_step_component(step, is_advanced, category): ...@@ -48,7 +48,7 @@ def add_a_multi_step_component(step, is_advanced, category):
def see_a_multi_step_component(step, category): def see_a_multi_step_component(step, category):
# Wait for all components to finish rendering # 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)) world.wait_for(lambda _: len(world.css_find(selector)) == len(step.hashes))
for idx, step_hash in enumerate(step.hashes): for idx, step_hash in enumerate(step.hashes):
...@@ -73,11 +73,11 @@ def see_a_multi_step_component(step, category): ...@@ -73,11 +73,11 @@ def see_a_multi_step_component(step, category):
@step(u'I see a "([^"]*)" Problem component$') @step(u'I see a "([^"]*)" Problem component$')
def see_a_problem_component(step, category): 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), assert_true(world.is_css_present(component_css),
'No problem was added to the unit.') '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) actual_text = world.css_text(problem_css)
assert_in(category.upper(), actual_text) assert_in(category.upper(), actual_text)
...@@ -150,7 +150,7 @@ def duplicated_component(step, ordinal): ...@@ -150,7 +150,7 @@ def duplicated_component(step, ordinal):
@step(u'I see a Problem component with display name "([^"]*)" in position "([^"]*)"$') @step(u'I see a Problem component with display name "([^"]*)" in position "([^"]*)"$')
def see_component_in_position(step, display_name, index): def see_component_in_position(step, display_name, index):
component_css = 'section.xmodule_CapaModule' component_css = 'div.xmodule_CapaModule'
def find_problem(_driver): def find_problem(_driver):
return world.css_text(component_css, int(index)).startswith(display_name.upper()) return world.css_text(component_css, int(index)).startswith(display_name.upper())
......
...@@ -23,9 +23,9 @@ def create_component_instance(step, category, component_type=None, is_advanced=F ...@@ -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()) component_button_css = 'span.large-{}-icon'.format(category.lower())
if category == 'problem': if category == 'problem':
module_css = 'section.xmodule_CapaModule' module_css = 'div.xmodule_CapaModule'
else: 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 # Count how many of that module is on the page. Later we will
# assert that one more was added. # assert that one more was added.
......
...@@ -21,14 +21,14 @@ def add_page(step): ...@@ -21,14 +21,14 @@ def add_page(step):
@step(u'I should see a static page named "([^"]*)"$') @step(u'I should see a static page named "([^"]*)"$')
def see_a_static_page_named_foo(step, name): 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) page_name_html = world.css_html(pages_css)
assert_equal(page_name_html, '\n {name}\n'.format(name=name)) assert_equal(page_name_html, '\n {name}\n'.format(name=name))
@step(u'I should not see any static pages$') @step(u'I should not see any static pages$')
def not_see_any_static_pages(step): 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)) assert (world.is_css_not_present(pages_css, wait_time=30))
......
...@@ -76,6 +76,7 @@ def wrap_xblock(runtime_class, block, view, frag, context, display_name_only=Fal ...@@ -76,6 +76,7 @@ def wrap_xblock(runtime_class, block, view, frag, context, display_name_only=Fal
template_context = { template_context = {
'content': block.display_name if display_name_only else frag.content, 'content': block.display_name if display_name_only else frag.content,
'classes': css_classes, 'classes': css_classes,
'display_name': block.display_name_with_default,
'data_attributes': ' '.join(u'data-{}="{}"'.format(key, value) for key, value in data.items()), 'data_attributes': ' '.join(u'data-{}="{}"'.format(key, value) for key, value in data.items()),
} }
......
...@@ -29,7 +29,7 @@ iframe[seamless]{ ...@@ -29,7 +29,7 @@ iframe[seamless]{
color: darken($error-red, 11%); color: darken($error-red, 11%);
} }
section.problem-progress { div.problem-progress {
display: inline-block; display: inline-block;
padding-left: 5px; padding-left: 5px;
color: #999; color: #999;
...@@ -37,7 +37,7 @@ section.problem-progress { ...@@ -37,7 +37,7 @@ section.problem-progress {
font-size: em(16); font-size: em(16);
} }
section.problem { div.problem {
@media print { @media print {
display: block; display: block;
padding: 0; padding: 0;
...@@ -579,7 +579,7 @@ section.problem { ...@@ -579,7 +579,7 @@ section.problem {
border: 1px solid #ccc; border: 1px solid #ccc;
} }
section.action { div.action {
margin-top: $baseline; margin-top: $baseline;
.save, .check, .show, .reset { .save, .check, .show, .reset {
......
...@@ -818,7 +818,7 @@ section.open-ended-child { ...@@ -818,7 +818,7 @@ section.open-ended-child {
width: auto; width: auto;
} }
section.action { div.action {
margin-top: $baseline; margin-top: $baseline;
input.save { input.save {
......
...@@ -393,7 +393,7 @@ nav.sequence-bottom { ...@@ -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; list-style: none !important;
} }
......
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
</div> </div>
</section> </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>
<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>
<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>
<h2 class="problem-header">${_("Problem Header")}</h2> <h2 class="problem-header">${_("Problem Header")}</h2>
<section class='problem-progress'> <div class='problem-progress'></div>
</section>
<section class="problem"> <div class="problem">
<p>${_("Problem Content")}</p> <p>${_("Problem Content")}</p>
<section class="action"> <div class="action">
<input type="hidden" name="problem_id" value="1"> <input type="hidden" name="problem_id" value="1">
<input type="text" name="input_example_1" id="input_example_1" value="" class="math" /> <input type="text" name="input_example_1" id="input_example_1" value="" class="math" />
...@@ -18,6 +17,6 @@ ...@@ -18,6 +17,6 @@
<input class="save" type="button" value="${_('Save')}"> <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> <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> <a href="/courseware/6.002_Spring_2012/${ explain }" class="new-page">${_("Explanation")}</a>
<section class="submission_feedback"></section> <div class="submission_feedback"></div>
</section> </div>
</section> </div>
...@@ -52,19 +52,19 @@ describe 'Problem', -> ...@@ -52,19 +52,19 @@ describe 'Problem', ->
expect(window.update_schematics).toHaveBeenCalled() expect(window.update_schematics).toHaveBeenCalled()
it 'bind answer refresh on button click', -> 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', -> 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', -> 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', -> 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', -> 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', -> it 'bind the math input', ->
expect($('input.math')).toHandleWith 'keyup', @problem.refreshMath expect($('input.math')).toHandleWith 'keyup', @problem.refreshMath
......
...@@ -19,11 +19,11 @@ class @Problem ...@@ -19,11 +19,11 @@ class @Problem
problem_prefix = @element_id.replace(/problem_/,'') problem_prefix = @element_id.replace(/problem_/,'')
@inputs = @$("[id^=input_#{problem_prefix}_]") @inputs = @$("[id^=input_#{problem_prefix}_]")
@$('section.action input:button').click @refreshAnswers @$('div.action input:button').click @refreshAnswers
@$('section.action input.check').click @check_fd @$('div.action input.check').click @check_fd
@$('section.action input.reset').click @reset @$('div.action input.reset').click @reset
@$('section.action button.show').click @show @$('div.action button.show').click @show
@$('section.action input.save').click @save @$('div.action input.save').click @save
@bindResetCorrectness() @bindResetCorrectness()
......
...@@ -272,7 +272,7 @@ function PollMain(el) { ...@@ -272,7 +272,7 @@ function PollMain(el) {
c1 += 1; c1 += 1;
if ( if (
(tempEl.tagName.toLowerCase() === 'section') && (tempEl.tagName.toLowerCase() === 'div') &&
($(tempEl).hasClass('xmodule_WrapperModule') === true) ($(tempEl).hasClass('xmodule_WrapperModule') === true)
) { ) {
_this.wrapperSectionEl = tempEl; _this.wrapperSectionEl = tempEl;
......
...@@ -6,4 +6,4 @@ class @VerticalDescriptor extends XModule.Descriptor ...@@ -6,4 +6,4 @@ class @VerticalDescriptor extends XModule.Descriptor
) )
save: -> 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()
...@@ -7,4 +7,4 @@ class @WrapperDescriptor extends XModule.Descriptor ...@@ -7,4 +7,4 @@ class @WrapperDescriptor extends XModule.Descriptor
) )
save: -> 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()
<section class="${' '.join(classes)}" ${data_attributes}> <div class="${' '.join(classes)}" ${data_attributes} aria-label="${display_name}">
${content} ${content}
</section> </div>
...@@ -15,7 +15,7 @@ class CourseNavPage(PageObject): ...@@ -15,7 +15,7 @@ class CourseNavPage(PageObject):
url = None url = None
def is_browser_on_page(self): def is_browser_on_page(self):
return self.is_css_present('section.course-index') return self.is_css_present('div.course-index')
@property @property
def sections(self): def sections(self):
......
...@@ -139,7 +139,7 @@ class AnnotatableSteps(object): ...@@ -139,7 +139,7 @@ class AnnotatableSteps(object):
self.active_problem = problem self.active_problem = problem
def active_problem_selector(self, subselector): 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(), world.scenario_dict['PROBLEMS'][self.active_problem].location.url(),
subselector, subselector,
) )
......
...@@ -121,7 +121,7 @@ def press_the_button_with_label(_step, buttonname): ...@@ -121,7 +121,7 @@ def press_the_button_with_label(_step, buttonname):
@step(u'The "([^"]*)" button does( not)? appear') @step(u'The "([^"]*)" button does( not)? appear')
def action_button_present(_step, buttonname, doesnt_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): if bool(doesnt_appear):
assert world.is_css_not_present(button_css) assert world.is_css_not_present(button_css)
else: else:
...@@ -141,7 +141,7 @@ def see_score(_step, score): ...@@ -141,7 +141,7 @@ def see_score(_step, score):
# The problem progress is changed by # The problem progress is changed by
# cms/static/xmodule_js/src/capa/display.js # cms/static/xmodule_js/src/capa/display.js
# so give it some time to render on the page. # so give it some time to render on the page.
score_css = 'section.problem-progress' score_css = 'div.problem-progress'
expected_text = '({})'.format(score) expected_text = '({})'.format(score)
world.wait_for(lambda _: world.css_has_text(score_css, expected_text)) world.wait_for(lambda _: world.css_has_text(score_css, expected_text))
......
...@@ -406,7 +406,7 @@ class TestHtmlModifiers(ModuleStoreTestCase): ...@@ -406,7 +406,7 @@ class TestHtmlModifiers(ModuleStoreTestCase):
) )
result_fragment = module.render('student_view') 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): def test_xmodule_display_wrapper_disabled(self):
module = render.get_module( module = render.get_module(
...@@ -419,7 +419,7 @@ class TestHtmlModifiers(ModuleStoreTestCase): ...@@ -419,7 +419,7 @@ class TestHtmlModifiers(ModuleStoreTestCase):
) )
result_fragment = module.render('student_view') 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): def test_static_link_rewrite(self):
module = render.get_module( module = render.get_module(
......
...@@ -125,7 +125,7 @@ div.course-wrapper { ...@@ -125,7 +125,7 @@ div.course-wrapper {
} }
} }
section.xmodule_WrapperModule ol.vert-mod > li { section.xmodule_WrapperModule div.vert-mod > div {
border-bottom: none; border-bottom: none;
} }
...@@ -193,7 +193,7 @@ div.course-wrapper { ...@@ -193,7 +193,7 @@ div.course-wrapper {
} }
&.closed { &.closed {
section.course-index { div.course-index {
width: flex-grid(.6); width: flex-grid(.6);
overflow: hidden; overflow: hidden;
......
section.course-index { .course-index {
@extend .sidebar; @extend .sidebar;
@extend .tran; @extend .tran;
border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;
......
...@@ -159,7 +159,7 @@ ...@@ -159,7 +159,7 @@
display: block !important; display: block !important;
section.course-content, section.course-content,
section.course-index { div.course-index {
display: block !important; display: block !important;
float: left; float: left;
} }
......
...@@ -185,28 +185,28 @@ ${fragment.foot_html()} ...@@ -185,28 +185,28 @@ ${fragment.foot_html()}
<%include file="/courseware/course_navigation.html" args="active_page='courseware'" /> <%include file="/courseware/course_navigation.html" args="active_page='courseware'" />
% endif % endif
<section class="container"> <div class="container">
<div class="course-wrapper"> <div class="course-wrapper">
% if accordion: % if accordion:
<section aria-label="${_('Course Navigation')}" class="course-index"> <div class="course-index">
<header id="open_close_accordion"> <header id="open_close_accordion">
<a href="#">${_("close")}</a> <a href="#">${_("close")}</a>
</header> </header>
<div id="accordion" style="display: none"> <div id="accordion" style="display: none">
<nav> <nav aria-label="${_('Course Navigation')}">
${accordion} ${accordion}
</nav> </nav>
</div> </div>
</section> </div>
% endif % endif
<section class="course-content"> <section class="course-content">
${fragment.body_html()} ${fragment.body_html()}
</section> </section>
</div> </div>
</section> </div>
% if show_chat: % if show_chat:
<div id="chat-wrapper"> <div id="chat-wrapper">
......
<section <div
id="poll_${element_id}" id="poll_${element_id}"
class="${element_class}" class="${element_class}"
data-ajax-url="${ajax_url}" data-ajax-url="${ajax_url}"
> >
<!-- Hidden field to read configuration JSON from. --> <!-- Hidden field to read configuration JSON from. -->
<div class="${element_class}_div" id="${element_id}_json" style="display: none;">${configuration_json}</div> <div class="${element_class}_div" id="${element_id}_json" style="display: none;">${configuration_json}</div>
</section> </div>
\ No newline at end of file \ No newline at end of file
...@@ -5,13 +5,12 @@ ...@@ -5,13 +5,12 @@
${ problem['name'] } ${ problem['name'] }
</h2> </h2>
<section class="problem-progress"> <div class="problem-progress"></div>
</section>
<section class="problem"> <div class="problem">
${ problem['html'] } ${ problem['html'] }
<section class="action"> <div class="action">
<input type="hidden" name="problem_id" value="${ problem['name'] }" /> <input type="hidden" name="problem_id" value="${ problem['name'] }" />
% if check_button: % if check_button:
...@@ -27,9 +26,9 @@ ...@@ -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> <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 % endif
% if attempts_allowed : % 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)} ${_("You have used {num_used} of {num_total} submissions").format(num_used=attempts_used, num_total=attempts_allowed)}
</section> </div>
% endif % endif
</section> </div>
</section> </div>
<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>
...@@ -56,8 +56,8 @@ ...@@ -56,8 +56,8 @@
</nav> </nav>
</header> </header>
<section class="content-wrapper"> <div class="content-wrapper">
<section class="passwordreset container"> <div class="passwordreset container">
<section class="introduction"> <section class="introduction">
<header> <header>
<h1>{% trans "Your Password Reset is Complete" %}</h1> <h1>{% trans "Your Password Reset is Complete" %}</h1>
...@@ -65,11 +65,11 @@ ...@@ -65,11 +65,11 @@
</section> </section>
{% block content %} {% block content %}
<section role="main" class="content"> <div role="main" class="content">
{% blocktrans with link_start='<a href="/login">' link_end='</a>' %} {% 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. Your password has been set. You may go ahead and {{ link_start }}log in{{ link_end }} now.
{% endblocktrans %} {% endblocktrans %}
</section> </div>
{% endblock %} {% endblock %}
</section> </div>
</section> </div>
<%! from django.utils.translation import ugettext as _ %> <%! 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}" > <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"> <ul class="sequence-nav-buttons">
<li class="prev"><a href="#">${_('Previous')}</a></li> <li class="prev"><a href="#">${_('Previous')}</a></li>
</ul> </ul>
<div class="sequence-list-wrapper"> <div class="sequence-list-wrapper">
<ol id="sequence-list"> <ol aria-label="${_('Section Navigation')}" id="sequence-list">
% for idx, item in enumerate(items): % for idx, item in enumerate(items):
## TODO (vshnayder): add item.progress_detail either to the title or somewhere else. ## TODO (vshnayder): add item.progress_detail either to the title or somewhere else.
## Make sure it gets updated after ajax calls. ## Make sure it gets updated after ajax calls.
## implementation note: will need to figure out how to handle combining detail ## implementation note: will need to figure out how to handle combining detail
## statuses of multiple modules in js. ## statuses of multiple modules in js.
<li> <li aria-label="${item['title']}">
<a class="seq_${item['type']} inactive progress-${item['progress_status']}" <a class="seq_${item['type']} inactive progress-${item['progress_status']}"
data-id="${item['id']}" data-id="${item['id']}"
data-element="${idx+1}" data-element="${idx+1}"
data-title="${item['title']}" data-title="${item['title']}"
href="javascript:void(0);"> 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> </a>
</li> </li>
% endfor % endfor
......
<ol class="vert-mod"> <div class="vert-mod">
% for idx, item in enumerate(items): % for idx, item in enumerate(items):
<li id="vert-${idx}" data-id="${item['id']}"> <div id="vert-${idx}" data-id="${item['id']}">
${item['content']} ${item['content']}
</li> </div>
% endfor % endfor
</ol> </div>
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