Address review comments.

drag_and_drop_v2/public/css/drag_and_drop_edit.css

@@ -61,8 +61,7 @@
     position: relative;
 }
 
-.xblock--drag-and-drop--editor .tab::after,
-.xblock--drag-and-drop--editor .tab-footer::after {
+.xblock--drag-and-drop--editor .tab::after {
   content: "";
   display: table;
   clear: both;
@@ -84,19 +83,11 @@
 }
 
 .xblock--drag-and-drop--editor .tab-header,
-.xblock--drag-and-drop--editor .tab-content,
-.xblock--drag-and-drop--editor .tab-footer {
+.xblock--drag-and-drop--editor .tab-content {
     width: 96%;
     margin: 2%;
 }
 
-.xblock--drag-and-drop--editor .tab-footer {
-    height: 25px;
-    position: relative;
-    display: block;
-    float: left;
-}
-
 .xblock--drag-and-drop--editor .items {
     width: calc(100% - 515px);
     margin: 10px 0 0 0;
@@ -157,7 +148,6 @@
   width: 40%;
   max-width: 50%;
   min-width: 330px;
-  margin-right: 15px;
 }
 
 .xblock--drag-and-drop--editor .zones-tab .tab-content .target {
@@ -207,7 +197,6 @@
 .xblock--drag-and-drop--editor .zones-form .zone-row .layout .zone-size,
 .xblock--drag-and-drop--editor .zones-form .zone-row .layout .zone-coord {
     width: 35%;
-    margin: 0 19px 5px 0;
     line-height: inherit;
 }
 
@@ -258,10 +247,6 @@
     width: 97%;
 }
 
-.xblock--drag-and-drop--editor .items-form .zone-checkbox-label {
-    text-align: left;
-}
-
 .xblock--drag-and-drop--editor .items-form .row.advanced {
     display: none;
 }
@@ -278,6 +263,12 @@
     content: '\25B6';
     margin-right: 0.5em;
 }
+.rtl .xblock--drag-and-drop--editor .items-form .row.advanced-link button:before {
+    content: '\25C0';
+    margin-left: 0.5em;
+    margin-right: 0;
+}
+
 .xblock--drag-and-drop-editor .items-form .zone-checkbox-row {
     margin-bottom: 0px;
 }
@@ -291,14 +282,10 @@
     padding: 5px 10px;
 }
 
-.xblock--drag-and-drop--editor .btn:hover {
-    opacity: 0.8;
-    cursor: pointer;
-}
-
+.xblock--drag-and-drop--editor .btn:hover,
 .xblock--drag-and-drop--editor .btn:focus {
-    outline: none;
-    opacity: 0.5;
+    background-color: #296ba5;
+    box-shadow: 0 1px 1px rgba(0,0,0,0.5);
 }
 
 .xblock--drag-and-drop--editor .remove-zone,
@@ -307,12 +294,15 @@
     padding: 3px;
     border-radius: 12px;
 }
+.rtl .xblock--drag-and-drop--editor .remove-zone,
+.rtl .xblock--drag-and-drop--editor .remove-item {
+    float: left;
+}
 
 .xblock--drag-and-drop--editor .icon {
     width: 14px;
     height: 14px;
     border-radius: 7px;
-    background-color: #1d5280;
     display: inline-block;
 }
 
@@ -321,13 +311,6 @@
     display: block;
 }
 
-.xblock--drag-and-drop--editor .add-zone:hover,
-.xblock--drag-and-drop--editor .add-zone:hover .icon,
-.xblock--drag-and-drop--editor .remove-zone:hover,
-.xblock--drag-and-drop--editor .remove-zone:hover .icon {
-    opacity: 0.7;
-}
-
 .xblock--drag-and-drop--editor .tab .field-error {
     outline: none;
     box-shadow: 0 0 10px 0 darkred;

drag_and_drop_v2/public/js/drag_and_drop_edit.js

@@ -181,6 +181,8 @@ function DragAndDropEditBlock(runtime, element, params) {
                         .on('click', '.add-zone', function(e) {
                             e.preventDefault();
                             _fn.build.form.zone.add();
+                            // Set focus to first field of the new zone.
+                            $('.zones-form .zone-row:last input[type=text]:first', element).select().focus();
                         })
                         .on('click', '.remove-zone', _fn.build.form.zone.remove)
                         .on('input', '.zone-row input', _fn.build.form.zone.changedInputHandler)
@@ -220,6 +222,8 @@ function DragAndDropEditBlock(runtime, element, params) {
                         .on('click', '.add-item', function(e) {
                             e.preventDefault();
                             _fn.build.form.item.add();
+                            // Set focus to first field of the new item.
+                            $('.items-form .item:last input[type=text]:first', element).select().focus();
                         })
                         .on('click', '.remove-item', _fn.build.form.item.remove)
                         .on('click', '.advanced-link button', _fn.build.form.item.showAdvancedSettings)

drag_and_drop_v2/templates/html/drag_and_drop_edit.html

@@ -137,7 +137,7 @@
                     <div class="controls">
                         <form class="zones-form"></form>
                         <button class="btn add-zone add-element">
-                            <span class="icon add"></span>
+                            <span class="icon add" aria-hidden="true"></span>
                             {% trans "Add a zone" %}
                         </button>
                     </div>
@@ -180,7 +180,7 @@
                 <h4>{% trans "Item definitions" %}</h4>
                 <form class="items-form"></form>
                 <button class="btn add-item add-element">
-                    <span class="icon add"></span>
+                    <span class="icon add" aria-hidden="true"></span>
                     {% trans "Add an item" %}
                 </button>
             </section>

drag_and_drop_v2/templates/html/js_templates.html

@@ -12,7 +12,7 @@
 <script class="zone-input-tpl" type="text/html">
     <fieldset class="zone-row" data-uid="{{zone.uid}}">
         <button type="button" class="btn remove-zone hidden" title="{{i18n 'Remove zone'}}">
-            <span class="icon remove"></span>
+            <span class="icon remove" aria-hidden="true"></span>
         </button>
         <label>
             <span>{{i18n "Title"}}</span>
@@ -104,7 +104,7 @@
 <script class="item-input-tpl" type="text/html">
     <fieldset class="item">
         <button type="button" class="btn remove-item hidden" title="{{i18n 'Remove item'}}">
-            <span class="icon remove"></span>
+            <span class="icon remove" aria-hidden="true"></span>
         </button>
         <div class="row">
             <label class="h4">