[a11y] Have only one set of buttons for add module dialog
This replaces the fixDialogButtons helper that was causing a second
'hidden' set of buttons to be displayed with styles for form-dialog.
Ideally it would be nice to use react-modal, but the modules page
is sufficiently complex that its a bit difficult to do so.
closes CNVS-22870
Test Plan:
- Go to the modules page
- Click the 'Add Module' button
- Using a JAWS make sure that only one set of buttons
is read. This should be the case in all screenreaders though
- Close the dialog
- The screenreader form navigation listing should not show the
buttons as still being there.
Change-Id: I4ef0f782bb393241d1ce4bccd61ce90a0e1ba00f
Reviewed-on: https://gerrit.instructure.com/64805
Reviewed-by: Sterling Cobb <sterling@instructure.com>
Tested-by: Jenkins
QA-Review: Jahnavi Yetukuri <jyetukuri@instructure.com>
Product-Review: Clay Diffrient <cdiffrient@instructure.com>
This commit is contained in:
Clay Diffrient
parent
3d19862dbc
commit
3ea78381c2
|
|
@ -257,4 +257,10 @@ tbody.sortable.empty2 {
|
|||
position: absolute;
|
||||
top: -28px;
|
||||
left: -1px;
|
||||
}
|
||||
|
||||
#add_context_module_form {
|
||||
.form-controls {
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,59 +1,60 @@
|
|||
<%= form_for :context_module, :url => context_url(@context, :context_context_modules_url), :html => {:id => "add_context_module_form", :style => "display: none;"} do |f| %>
|
||||
<div class="ic-Form-control form-element">
|
||||
<div class="module_name form-element">
|
||||
<%= f.text_field :name, :placeholder => t('module_name', %{Module Name}), :class => 'ic-Input' %>
|
||||
</div>
|
||||
|
||||
<div class="ic-Checkbox-group form-element">
|
||||
<div class="ic-Form-control ic-Form-control--checkbox">
|
||||
<input type="checkbox" id="unlock_module_at">
|
||||
<label class="ic-Label" for="unlock_module_at">
|
||||
<%= t('#labels.lock_module_until', %{Lock until}) %>
|
||||
</label>
|
||||
<%= form_for :context_module, :url => context_url(@context, :context_context_modules_url), :html => {:id => "add_context_module_form", :style => "display: none;", :class => "form-dialog"} do |f| %>
|
||||
<div class="form-dialog-content">
|
||||
<div class="ic-Form-control form-element">
|
||||
<div class="module_name form-element">
|
||||
<%= f.text_field :name, :placeholder => t('module_name', %{Module Name}), :class => 'ic-Input' %>
|
||||
</div>
|
||||
<div class="unlock_module_at_details form-element">
|
||||
<label class='screenreader-only' id='unlock_at_date_label'>
|
||||
<%= t("Unlock module on date") %>
|
||||
<%= datepicker_screenreader_prompt %>
|
||||
|
||||
<div class="ic-Checkbox-group form-element">
|
||||
<div class="ic-Form-control ic-Form-control--checkbox">
|
||||
<input type="checkbox" id="unlock_module_at">
|
||||
<label class="ic-Label" for="unlock_module_at">
|
||||
<%= t('#labels.lock_module_until', %{Lock until}) %>
|
||||
</label>
|
||||
<%= f.text_field :unlock_at,
|
||||
class: "datetime_field",
|
||||
'aria-labelledby' => 'unlock_at_date_label',
|
||||
'data-tooltip' => '',
|
||||
:placeholder => t("Unlock At"),
|
||||
title: accessible_date_format %>
|
||||
</div>
|
||||
<div class="unlock_module_at_details form-element">
|
||||
<label class='screenreader-only' id='unlock_at_date_label'>
|
||||
<%= t("Unlock module on date") %>
|
||||
<%= datepicker_screenreader_prompt %>
|
||||
</label>
|
||||
<%= f.text_field :unlock_at,
|
||||
class: "datetime_field",
|
||||
'aria-labelledby' => 'unlock_at_date_label',
|
||||
'data-tooltip' => '',
|
||||
:placeholder => t("Unlock At"),
|
||||
title: accessible_date_format %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="prerequisites_entry form-section border border-t">
|
||||
<%= f.label :before_viewing, "Prerequisites", class: "ic-Label form-element" %>
|
||||
<div class="prerequisites_list">
|
||||
<div class="criteria_list" style="display: none;"></div>
|
||||
<div id="criterion_blank_prereq" class="criterion clearfix" style="display: none;">
|
||||
<div class="prereq-req-item">
|
||||
<span class="prereq_desc"></span>
|
||||
<span class="option"></span>
|
||||
<div class="prerequisites_entry form-section border border-t">
|
||||
<%= f.label :before_viewing, "Prerequisites", class: "ic-Label form-element" %>
|
||||
<div class="prerequisites_list">
|
||||
<div class="criteria_list" style="display: none;"></div>
|
||||
<div id="criterion_blank_prereq" class="criterion clearfix" style="display: none;">
|
||||
<div class="prereq-req-item">
|
||||
<span class="prereq_desc"></span>
|
||||
<span class="option"></span>
|
||||
</div>
|
||||
<div class="prereq-req-item-delete">
|
||||
<button class="delete_criterion_link dim-till-hover" aria-label="<%= t('button.delete_label', %{Delete prerequisites}) %>" title="<%= t('button.delete_title', %{Delete prerequisites}) %>">
|
||||
<i class="icon-end standalone-icon" alt="<%= t('remove icon') %>" ></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prereq-req-item-delete">
|
||||
<button class="delete_criterion_link dim-till-hover" aria-label="<%= t('button.delete_label', %{Delete prerequisites}) %>" title="<%= t('button.delete_title', %{Delete prerequisites}) %>">
|
||||
<i class="icon-end standalone-icon" alt="<%= t('remove icon') %>" ></i>
|
||||
<div class="add-item">
|
||||
<button class="add_prerequisite_link add_prerequisite_or_requirement_link" tabindex="0" role="button">
|
||||
<i class="icon-add" alt="<%= t('add icon') %>"></i><%= t('links.add_prerequisite', %{Add prerequisite}) %>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="add-item">
|
||||
<button class="add_prerequisite_link add_prerequisite_or_requirement_link" tabindex="0" role="button">
|
||||
<i class="icon-add" alt="<%= t('add icon') %>"></i><%= t('links.add_prerequisite', %{Add prerequisite}) %>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="completion_entry form-section border border-t">
|
||||
<%= f.label :module_complete_when, "Requirements", class: "ic-Label form-element" %>
|
||||
<div class="ic-Form-control ic-Form-control--radio requirement-count-radio">
|
||||
<div class="ic-Radio">
|
||||
<%= f.radio_button :requirement_count, "" %>
|
||||
<%= f.label :requirement_count, t("Students must complete all of these requirements"), class: "ic-Label", value: "" %>
|
||||
<%= f.radio_button :requirement_count, "" %>
|
||||
<%= f.label :requirement_count, t("Students must complete all of these requirements"), class: "ic-Label", value: "" %>
|
||||
</div>
|
||||
<div class="form-element require-sequential ic-Form-control ic-Form-control--checkbox">
|
||||
<%= f.check_box :require_sequential_progress, :id => "require_sequential_progress" %>
|
||||
|
|
@ -61,7 +62,7 @@
|
|||
</div>
|
||||
<div class="ic-Radio">
|
||||
<%= f.radio_button :requirement_count, 1 %>
|
||||
<%= f.label :requirement_count, t("Students must complete one of these requirements"), class: "ic-Label", value: 1 %>
|
||||
<%= f.label :requirement_count, t("Student must complete one of these requirements"), class: "ic-Label", value: 1 %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="no_items_message form-element" style="display: none;">
|
||||
|
|
@ -88,17 +89,18 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<% if Canvas::Plugin.find!('grade_export').enabled? %>
|
||||
<div class="form-element">
|
||||
<%= f.check_box :publish_final_grade, :id => "publish_final_grade" %>
|
||||
<%= f.label :publish_final_grade, :en => "Publish final grade for the student when this module is completed", :for => "publish_final_grade" %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="button-container">
|
||||
<button type="button" class="btn cancel_button"><%= t('#buttons.cancel', %{Cancel}) %></button>
|
||||
<button type="submit" class="btn btn-primary submit_button"><%= t('buttons.add_module', %{Add Module}) %></button>
|
||||
<% if Canvas::Plugin.find!('grade_export').enabled? %>
|
||||
<div class="form-element">
|
||||
<%= f.check_box :publish_final_grade, :id => "publish_final_grade" %>
|
||||
<%= f.label :publish_final_grade, :en => "Publish final grade for the student when this module is completed", :for => "publish_final_grade" %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-controls">
|
||||
<button type="button" class="btn cancel_button"><%= t('#buttons.cancel', %{Cancel}) %></button>
|
||||
<button type="submit" class="btn btn-primary submit_button"><%= t('buttons.add_module', %{Add Module}) %></button>
|
||||
<a href="<%= context_url(@context, :context_context_modules_url) %>" style="display: none;" class="add_context_module_url"> </a>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -400,17 +400,20 @@ define([
|
|||
});
|
||||
$module.addClass('dont_remove');
|
||||
$form.find(".module_name").toggleClass('lonely_entry', isNew);
|
||||
|
||||
$form.dialog({
|
||||
autoOpen: false,
|
||||
modal: true,
|
||||
title: (isNew ? I18n.t('titles.add', "Add Module") : I18n.t('titles.edit', "Edit Module Settings")),
|
||||
width: 600,
|
||||
height: (isNew ? 400 : 600),
|
||||
close: function() {
|
||||
modules.hideEditModule(true);
|
||||
},
|
||||
open: function(){
|
||||
$(this).find('input[type=text],textarea,select').first().focus();
|
||||
}
|
||||
}).fixDialogButtons().dialog('option', {title: (isNew ? I18n.t('titles.add', "Add Module") : I18n.t('titles.edit', "Edit Module Settings")), width: (isNew ? 'auto' : 600)}).dialog('open'); //show();
|
||||
}).dialog('open');
|
||||
$module.removeClass('dont_remove');
|
||||
},
|
||||
hideEditModule: function(remove) {
|
||||
|
|
|
|||
|
|
@ -172,7 +172,7 @@ describe "context modules" do
|
|||
expect(edit_form).to be_displayed
|
||||
f('.completion_entry .delete_criterion_link', edit_form).click
|
||||
wait_for_ajaximations
|
||||
ff('.cancel_button.ui-button', dialog_for(edit_form)).last.click
|
||||
ff('.cancel_button', dialog_for(edit_form)).last.click
|
||||
wait_for_ajaximations
|
||||
|
||||
# now delete the criterion frd
|
||||
|
|
@ -457,7 +457,7 @@ describe "context modules" do
|
|||
option = first_selected_option(prereq_select)
|
||||
expect(option.text).to eq first_module_name
|
||||
|
||||
ff('.cancel_button.ui-button', dialog_for(add_form)).last.click
|
||||
ff('.cancel_button', dialog_for(add_form)).last.click
|
||||
wait_for_ajaximations
|
||||
mod3.publish!
|
||||
|
||||
|
|
@ -589,7 +589,7 @@ describe "context modules" do
|
|||
|
||||
it "should return focus to the cog menu when closing the edit dialog for an item" do
|
||||
hover_and_click("#context_module_item_#{@tag.id} .edit_item_link")
|
||||
keep_trying_until { ff('.cancel_button.ui-button')[2] }.click
|
||||
keep_trying_until { ff('.cancel_button.ui-button')[1] }.click
|
||||
check_element_has_focus(fj("#context_module_item_#{@tag.id} .al-trigger"))
|
||||
end
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue