Updated the focus order for the action bar

common/lib/xmodule/xmodule/css/capa/display.scss

@@ -898,7 +898,9 @@ div.problem .action {
   margin-top: $baseline;
   min-height: $baseline;
   width: 100%;
-  display: inline-block;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
 
   .problem-action-buttons-wrapper {
 
@@ -906,7 +908,6 @@ div.problem .action {
       @include text-align(right);
       @include float(right);
     }
-
   }
 
   .problem-action-button-wrapper {
@@ -934,11 +935,11 @@ div.problem .action {
   }
 
   .submit-attempt-container {
-    display: table;
+    display: inline-flex;
 
     @media (max-width: $bp-screen-lg) {
       max-width: 100%;
-      padding-top: $baseline;
+      padding-bottom: $baseline;
     }
     .submit {
       @include margin-right($baseline / 2);

lms/templates/problem.html

@@ -25,6 +25,18 @@ from openedx.core.djangolib.markup import HTML
        />
       </div>
     % endif
+
+    <div class="submit-attempt-container">
+      <button type="button" class="submit btn-brand" data-submitting="${ submit_button_submitting }" data-value="${ submit_button }" data-should-enable-submit-button="${ should_enable_submit_button }" aria-describedby="submission_feedback_${short_id}" ${'' if should_enable_submit_button else 'disabled'}>
+          <span class="submit-label">${ submit_button }</span>
+      </button>
+      <div class="submission-feedback" id="submission_feedback_${short_id}">
+        % if attempts_allowed:
+          ${ungettext("You have used {num_used} of {num_total} attempt", "You have used {num_used} of {num_total} attempts", attempts_allowed).format(num_used=attempts_used, num_total=attempts_allowed)}
+        % endif
+        <span class="sr">${_("Some problems have options such as save, reset, hints, or show answer. These options follow the Submit button.")}</span>
+      </div>
+    </div>
     <div class="problem-action-buttons-wrapper">
       % if demand_hint_possible:
       <span class="problem-action-button-wrapper">
@@ -51,16 +63,6 @@ from openedx.core.djangolib.markup import HTML
       </span>
       % endif
     </div>
-    <div class="submit-attempt-container">
-      <button type="button" class="submit btn-brand" data-submitting="${ submit_button_submitting }" data-value="${ submit_button }" data-should-enable-submit-button="${ should_enable_submit_button }" aria-describedby="submission_feedback_${short_id}" ${'' if should_enable_submit_button else 'disabled'}>
-          <span class="submit-label" aria-hidden="true">${ submit_button }</span><span class="sr">${_("Submit your answer")}</span>
-      </button>
-      <div class="submission-feedback" id="submission_feedback_${short_id}">
-      % if attempts_allowed:
-          ${ungettext("You have used {num_used} of {num_total} attempt", "You have used {num_used} of {num_total} attempts", attempts_allowed).format(num_used=attempts_used, num_total=attempts_allowed)}
-      % endif
-      </div>
-    </div>
   </div>
     <%include file="problem_notifications.html" args="
       notification_type='warning',