Merge pull request #14502 from edx/TNL-6355_Button_Focus

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,42 +25,44 @@ from openedx.core.djangolib.markup import HTML
        />
       </div>
     % endif
-    <div class="problem-action-buttons-wrapper">
-    % if demand_hint_possible:
-    <span class="problem-action-button-wrapper">
-        <button type="button" class="hint-button problem-action-btn btn-default btn-small" data-value="${_('Hint')}" ${'' if should_enable_next_hint else 'disabled'}><span class="icon fa fa-question" aria-hidden="true"></span>${_('Hint')}</button>
-    </span>
-    % endif
-    % if save_button:
-    <span class="problem-action-button-wrapper">
-        <button type="button" class="save problem-action-btn btn-default btn-small" data-value="${_('Save')}">
-            <span class="icon fa fa-floppy-o" aria-hidden="true"></span>
-            <span aria-hidden="true">${_('Save')}</span>
-            <span class="sr">${_("Save your answer")}</span>
-        </button>
-    </span>
-    % endif
-    % if reset_button:
-    <span class="problem-action-button-wrapper">
-        <button type="button" class="reset problem-action-btn btn-default btn-small" data-value="${_('Reset')}"><span class="icon fa fa-refresh" aria-hidden="true"></span><span aria-hidden="true">${_('Reset')}</span><span class="sr">${_("Reset your answer")}</span></button>
-    </span>
-    % endif
-    % if answer_available:
-    <span class="problem-action-button-wrapper">
-        <button type="button" class="show problem-action-btn btn-default btn-small" aria-describedby="${ short_id }-problem-title"><span class="icon fa fa-info-circle" aria-hidden="true"></span><span class="show-label">${_('Show Answer')}</span></button>
-    </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>
+          <span class="submit-label">${ submit_button }</span>
       </button>
       <div class="submission-feedback" id="submission_feedback_${short_id}">
-      % if attempts_allowed:
+        % 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
+        % 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">
+          <button type="button" class="hint-button problem-action-btn btn-default btn-small" data-value="${_('Hint')}" ${'' if should_enable_next_hint else 'disabled'}><span class="icon fa fa-question" aria-hidden="true"></span>${_('Hint')}</button>
+      </span>
+      % endif
+      % if save_button:
+      <span class="problem-action-button-wrapper">
+          <button type="button" class="save problem-action-btn btn-default btn-small" data-value="${_('Save')}">
+              <span class="icon fa fa-floppy-o" aria-hidden="true"></span>
+              <span aria-hidden="true">${_('Save')}</span>
+              <span class="sr">${_("Save your answer")}</span>
+          </button>
+      </span>
+      % endif
+      % if reset_button:
+      <span class="problem-action-button-wrapper">
+          <button type="button" class="reset problem-action-btn btn-default btn-small" data-value="${_('Reset')}"><span class="icon fa fa-refresh" aria-hidden="true"></span><span aria-hidden="true">${_('Reset')}</span><span class="sr">${_("Reset your answer")}</span></button>
+      </span>
+      % endif
+      % if answer_available:
+      <span class="problem-action-button-wrapper">
+          <button type="button" class="show problem-action-btn btn-default btn-small" aria-describedby="${ short_id }-problem-title"><span class="icon fa fa-info-circle" aria-hidden="true"></span><span class="show-label">${_('Show Answer')}</span></button>
+      </span>
+      % endif
+    </div>
   </div>
     <%include file="problem_notifications.html" args="
       notification_type='warning',