[TNL-6025] Remove improper use of section element.

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -247,7 +247,7 @@ function DragAndDropTemplates(configuration) {
         });
 
         return (
-            h('section.feedback', {}, [
+            h('div.feedback', {attributes: {'role': 'group', 'aria-label': gettext('Feedback')}}, [
                 h(
                     "div.feedback-content",
                     { attributes: { 'aria-live': 'polite' } },
@@ -295,11 +295,11 @@ function DragAndDropTemplates(configuration) {
         var attemptsUsedDisplay = (ctx.max_attempts && ctx.max_attempts > 0) ? 'inline': 'none';
 
         return (
-          h("section.action-toolbar-item.submit-answer", {}, [
+          h("div.action-toolbar-item.submit-answer", {}, [
               h(
                   "button.btn-brand.submit-answer-button",
                   {
-                      disabled: ctx.disable_submit_button || ctx.submit_spinner, 
+                      disabled: ctx.disable_submit_button || ctx.submit_spinner,
                       attributes: {"aria-describedby": attemptsUsedId}},
                   [
                       (ctx.submit_spinner ? h("span.fa.fa-spin.fa-spinner") : null),
@@ -356,7 +356,7 @@ function DragAndDropTemplates(configuration) {
             go_to_beginning_button_class += ' sr';
         }
         return(
-            h("section.action-toolbar-item.sidebar-buttons", {}, [
+            h("div.action-toolbar-item.sidebar-buttons", {}, [
                 sidebarButtonTemplate(
                     go_to_beginning_button_class,
                     "fa-arrow-up",
@@ -526,32 +526,35 @@ function DragAndDropTemplates(configuration) {
             item_bank_properties.attributes['dropzone'] = 'move';
             item_bank_properties.attributes['aria-dropeffect'] = 'move';
         }
+        var main_element_properties = {
+            attributes: {
+                'role': 'group',
+                'aria-label': gettext('Drag and Drop Problem')
+            }
+        };
         return (
-            h('section.themed-xblock.xblock--drag-and-drop', [
+            h('div.themed-xblock.xblock--drag-and-drop', main_element_properties, [
                 problemTitle,
                 problemProgress,
                 h('div', [forwardKeyboardHelpButtonTemplate(ctx)]),
-                h('section.problem', [
+                h('div.problem', [
                     problemHeader,
                     h('p', {innerHTML: ctx.problem_html}),
                 ]),
-                h('section.drag-container', {}, [
+                h('div.drag-container', {}, [
                     h('div.item-bank', item_bank_properties, [
                         renderCollection(itemTemplate, items_in_bank, ctx),
                         renderCollection(itemPlaceholderTemplate, items_placed, ctx)
                     ]),
-                    h('div.target',
-                        {},
-                        [
-                            itemFeedbackPopupTemplate(ctx),
-                            h('div.target-img-wrapper', [
-                                h('img.target-img', {src: ctx.target_img_src, alt: ctx.target_img_description}),
-                            ]
-                        ),
+                    h('div.target', {attributes: {'role': 'group', 'arial-label': gettext('Drop Targets')}}, [
+                        itemFeedbackPopupTemplate(ctx),
+                        h('div.target-img-wrapper', [
+                            h('img.target-img', {src: ctx.target_img_src, alt: ctx.target_img_description}),
+                        ]),
                         renderCollection(zoneTemplate, ctx.zones, ctx)
                     ]),
                 ]),
-                h("section.actions-toolbar", {}, [
+                h("div.actions-toolbar", {attributes: {'role': 'group', 'aria-label': gettext('Actions')}}, [
                     sidebarTemplate(ctx),
                     (ctx.show_submit_answer ? submitAnswerTemplate(ctx) : null),
                 ]),
@@ -668,6 +671,9 @@ function DragAndDropBlock(runtime, element, configuration) {
             // to watch for load events on any child element, since load events do not bubble.
             element.addEventListener('load', webkitFix, true);
 
+            // Remove the spinner and create a blank slate for virtualDom to take over.
+            $root.empty();
+
             applyState();
             initDroppable();
 

drag_and_drop_v2/templates/html/drag_and_drop.html

 {% load i18n %}
-<section class="themed-xblock xblock--drag-and-drop">
+<div class="themed-xblock xblock--drag-and-drop">
     <i class="fa fa-spin fa-spinner initial-load-spinner"></i>{% trans "Loading drag and drop problem." %}
-</section>
+</div>

tests/integration/test_base.py

@@ -48,7 +48,7 @@ ItemDefinition = namedtuple(  # pylint: disable=invalid-name
 
 
 class BaseIntegrationTest(SeleniumBaseTest):
-    default_css_selector = 'section.themed-xblock.xblock--drag-and-drop'
+    default_css_selector = 'div.themed-xblock.xblock--drag-and-drop'
     module_name = __name__
 
     _additional_escapes = {

tests/integration/test_title_and_question.py

@@ -26,10 +26,10 @@ class TestDragAndDropTitleAndProblem(BaseIntegrationTest):
         self.addCleanup(scenarios.remove_scenario, const_page_id)
 
         page = self.go_to_page(const_page_name)
-        is_problem_header_visible = len(page.find_elements_by_css_selector('section.problem > h4')) > 0
+        is_problem_header_visible = len(page.find_elements_by_css_selector('div.problem > h4')) > 0
         self.assertEqual(is_problem_header_visible, show_problem_header)
 
-        problem = page.find_element_by_css_selector('section.problem > p')
+        problem = page.find_element_by_css_selector('div.problem > p')
         self.assertEqual(self.get_element_html(problem), problem_text)
 
     @unpack

tests/unit/test_basics.py

@@ -45,7 +45,7 @@ class BasicTests(TestCaseMixin, unittest.TestCase):
     def test_template_contents(self):
         context = {}
         student_fragment = self.block.runtime.render(self.block, 'student_view', context)
-        self.assertIn('<section class="themed-xblock xblock--drag-and-drop">', student_fragment.content)
+        self.assertIn('<div class="themed-xblock xblock--drag-and-drop">', student_fragment.content)
         self.assertIn('Loading drag and drop problem.', student_fragment.content)
 
     def test_get_configuration(self):