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);
|
||||
|
||||
Reference in New Issue
Block a user