Fix: Background Description was required but not always saved

drag_and_drop_v2/public/css/drag_and_drop_edit.css

@@ -188,7 +188,7 @@
 
 .xblock--drag-and-drop--editor .items-form .item-image-url {
     width: 81%;
-    margin-right: 1%;
+    margin: 0 1%;
 }
 
 .xblock--drag-and-drop--editor .items-form .item-width {
@@ -224,7 +224,6 @@
     border: 1px solid #156ab4;
     border-radius: 6px;
     padding: 5px 10px;
-    margin-top: 15px;
 }
 
 .xblock--drag-and-drop--editor .btn:hover {

drag_and_drop_v2/public/js/drag_and_drop_edit.js

@@ -181,13 +181,13 @@ function DragAndDropEditBlock(runtime, element, params) {
                                 _fn.build.$el.targetImage.attr('src', new_img_url);
                             }
                             _fn.data.targetImg = new_img_url;
-
+                        })
+                        .on('input', '.target-image-form #background-description', function(e) {
                             var new_description = $.trim(
                                 $('.target-image-form #background-description', element).val()
                             );
                             _fn.build.$el.targetImage.attr('alt', new_description);
                             _fn.data.targetImgDescription = new_description;
-
                         })
                         .on('click', '.display-labels-form input', function(e) {
                             _fn.data.displayLabels = $('.display-labels-form input', element).is(':checked');

drag_and_drop_v2/templates/html/drag_and_drop_edit.html

@@ -51,6 +51,7 @@
                     <input id="background-url"
                            type="text"
                            placeholder="{% trans 'For example, http://example.com/background.png or /static/background.png' %}">
+                    <button class="btn">{% trans "Change background" %}</button>
                     <label class="h3" for="background-description">{% trans "Background description" %}</label>
                     <textarea required id="background-description"
                               aria-describedby="background-description-description"></textarea>
@@ -61,7 +62,6 @@
                             to solve the problem even without seeing the image.
                         {% endblocktrans %}
                     </div>
-                    <button class="btn">{% trans "Change background" %}</button>
                 </form>
             </section>
             <section class="tab-content">