Fix wrong ARIA attribute in dashboard actions form

Using a `data-toggle` attribute, which we do since commit 07fd5084f,
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 commit
07fd5084f it was never shown because it had the `hide` HTML class and it
didn't have a `data-toggler` attribute.
This commit is contained in:
Javi Martín
2025-02-23 22:55:14 +01:00
parent f3fcee430e
commit 932d4cd698
5 changed files with 35 additions and 11 deletions

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

View File

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

View File

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

View File

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

View File

@@ -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!"