Fix wrong ARIA attribute in dashboard actions form
Using a `data-toggle` attribute, which we do since commit07fd5084f, made Foundation generate an `aria-expanded` attribute to a radio button, but this attribute can't be present in radio buttons. This makes sense, since the main purpose of a radio button in a form is to choose an option, not to show/hide content. This resulted in the following error when checking the page with Axe: ``` Found 1 accessibility violation: aria-allowed-attr: Elements must only use supported ARIA attributes (critical) https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI The following 2 nodes violate this rule: Selector: #dashboard_action_action_type_proposed_action HTML: <input data-toggle="request_to_administrators short_description" type="radio" value="proposed_action" checked="checked" name="dashboard_action[action_type]" id="dashboard_action_action_type_proposed_action" aria-expanded="true" aria-controls="request_to_administrators"> Fix all of the following: - ARIA attribute is not allowed: aria-expanded="true" Selector: #dashboard_action_action_type_resource HTML: <input data-toggle="request_to_administrators short_description" type="radio" value="resource" name="dashboard_action[action_type]" id="dashboard_action_action_type_resource" aria-expanded="true" aria-controls="request_to_administrators"> Fix all of the following: - ARIA attribute is not allowed: aria-expanded="true" ``` So we're using custom JavaScript instead. We're also making the `short_description` field act as intended; since the changes in commit07fd5084fit was never shown because it had the `hide` HTML class and it didn't have a `data-toggler` attribute.
This commit is contained in:
21
app/assets/javascripts/admin/dashboard/actions/form.js
Normal file
21
app/assets/javascripts/admin/dashboard/actions/form.js
Normal file
@@ -0,0 +1,21 @@
|
||||
(function() {
|
||||
"use strict";
|
||||
App.AdminDashboardActionsForm = {
|
||||
initialize: function() {
|
||||
$("input[name='dashboard_action[action_type]']").on({
|
||||
change: function() {
|
||||
switch ($(this).val()) {
|
||||
case "proposed_action":
|
||||
$("#request_to_administrators").hide();
|
||||
$("#short_description").hide();
|
||||
break;
|
||||
case "resource":
|
||||
$("#request_to_administrators").show();
|
||||
$("#short_description").show();
|
||||
}
|
||||
}
|
||||
}).filter("[checked]").trigger("change");
|
||||
}
|
||||
};
|
||||
}).call(this);
|
||||
|
||||
@@ -169,6 +169,7 @@ var initialize_modules = function() {
|
||||
App.ColumnsSelector.initialize();
|
||||
}
|
||||
App.AdminBudgetsWizardCreationStep.initialize();
|
||||
App.AdminDashboardActionsForm.initialize();
|
||||
App.AdminMachineLearningScripts.initialize();
|
||||
App.AdminPollShiftsForm.initialize();
|
||||
App.AdminTenantsForm.initialize();
|
||||
|
||||
@@ -8,8 +8,4 @@ module Admin::ProposalDashboardActionsHelper
|
||||
def default_actions
|
||||
%w[polls email poster]
|
||||
end
|
||||
|
||||
def css_for_resource(action)
|
||||
"hide" if action == "proposed_action"
|
||||
end
|
||||
end
|
||||
|
||||
@@ -5,9 +5,7 @@
|
||||
<%= f.label :action_type %>
|
||||
<% ::Dashboard::Action.action_types.keys.each do |action_type_value| %>
|
||||
<span class="margin-right">
|
||||
<%= f.radio_button :action_type,
|
||||
action_type_value,
|
||||
data: { toggle: "request_to_administrators short_description" } %>
|
||||
<%= f.radio_button :action_type, action_type_value %>
|
||||
</span>
|
||||
<% end %>
|
||||
</div>
|
||||
@@ -16,9 +14,7 @@
|
||||
<%= f.check_box :active %>
|
||||
</div>
|
||||
|
||||
<div id="request_to_administrators"
|
||||
class="small-12 column margin-bottom <%= css_for_resource(@dashboard_action.action_type) %>"
|
||||
data-toggler=".hide">
|
||||
<div id="request_to_administrators" class="small-12 column margin-bottom">
|
||||
<%= f.check_box :request_to_administrators %>
|
||||
</div>
|
||||
|
||||
@@ -28,7 +24,7 @@
|
||||
<div class="small-12 column">
|
||||
<%= f.text_field :title %>
|
||||
|
||||
<div id="short_description" class="hide">
|
||||
<div id="short_description">
|
||||
<%= f.text_field :short_description %>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -73,7 +73,17 @@ describe "Admin dashboard actions", :admin do
|
||||
end
|
||||
|
||||
scenario "Updates the action" do
|
||||
expect(page).to have_checked_field "Proposed action"
|
||||
expect(page).to have_unchecked_field "Resource"
|
||||
expect(page).not_to have_field "Short description"
|
||||
expect(page).not_to have_field "Include in the resource a button to " \
|
||||
"request the resource from administrators"
|
||||
|
||||
choose "Resource"
|
||||
check "Include in the resource a button to request the resource from administrators"
|
||||
|
||||
fill_in "Title", with: "Great action!"
|
||||
fill_in "Short description", with: "And awesome too!"
|
||||
click_button "Save"
|
||||
|
||||
expect(page).to have_content "Great action!"
|
||||
|
||||
Reference in New Issue
Block a user