Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
Updated the focus order for the action bar
This commit is contained in:
Albert (AJ) St. Aubin
2017-02-18 12:54:25 -05:00
committed by GitHub
parent e04dbbe1e5 8e1fc5f5d3
commit 18e03fbc88
2 changed files with 36 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
common/lib/xmodule/xmodule/css/capa/display.scss
View File

@@ -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);

60
lms/templates/problem.html
View File

@@ -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',