6dcdf5c843
Users (particularly, screen reader users) usually identify links with
things that take you somewhere, and buttons with things that either send
forms or change things on the page.
Using a button we can also use the `aria-expanded` attribute, meaning
screen reader users will know that the button has two states ("expanded"
and "collapsed"), the current state of the button, and will get
immediate feedback when clicking the button because the new state of the
button will be announced.
Thanks to this change, we can also slightly simplify the code; we
obviously have to remove the (useless) `href` attribute, and we don't
have to prevent the default event in JavaScript since there's no default
event for buttons with `type="button"`.
37 lines
1.1 KiB
JavaScript
37 lines
1.1 KiB
JavaScript
(function() {
|
|
"use strict";
|
|
App.AdvancedSearch = {
|
|
advanced_search_terms: function() {
|
|
return $("#js-advanced-search").data("advanced-search-terms");
|
|
},
|
|
toggle_date_options: function() {
|
|
if ($("#js-advanced-search-date-min").val() === "custom") {
|
|
$("#js-custom-date").show();
|
|
$(".js-calendar").datepicker("option", "disabled", false);
|
|
} else {
|
|
$("#js-custom-date").hide();
|
|
$(".js-calendar").datepicker("option", "disabled", true);
|
|
}
|
|
},
|
|
initialize: function() {
|
|
if (App.AdvancedSearch.advanced_search_terms()) {
|
|
$("#js-advanced-search").show();
|
|
App.AdvancedSearch.toggle_date_options();
|
|
}
|
|
$("#js-advanced-search-title").on({
|
|
click: function() {
|
|
$(this).attr("aria-expanded", !JSON.parse($(this).attr("aria-expanded")));
|
|
$("#js-advanced-search").slideToggle();
|
|
}
|
|
});
|
|
$("#js-advanced-search-date-min").on({
|
|
change: function() {
|
|
App.AdvancedSearch.toggle_date_options();
|
|
}
|
|
});
|
|
|
|
App.SDGSyncGoalAndTargetFilters.sync($("#advanced_search_form"));
|
|
}
|
|
};
|
|
}).call(this);
|