a2f6e03516
Since forms are landmarks, screen reader users might navigate to the form. But then they were going to find an empty form with no way to toggle it. Moving the button inside the form means screen reader users navigating to the form will find the button to toggle it. It also helps us simplifying the code; there's no need to use data-attributes to communicate whether the form should be visible since now we can easily use the button `aria-expanded` attribute. We could further simplify the JavaScript if we used a CSS rule to show/hide the form fields based on the toggle button `aria-expanded` attribute. However, implementing the "slide" animation we use when toggling the form with CSS is difficult and unreliable.
39 lines
1.1 KiB
JavaScript
39 lines
1.1 KiB
JavaScript
(function() {
|
|
"use strict";
|
|
App.AdvancedSearch = {
|
|
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() {
|
|
var toggle_button = $("#js-advanced-search-title");
|
|
|
|
toggle_button.removeAttr("hidden");
|
|
|
|
if (toggle_button.attr("aria-expanded") === "true") {
|
|
App.AdvancedSearch.toggle_date_options();
|
|
} else {
|
|
toggle_button.next().hide();
|
|
}
|
|
toggle_button.on({
|
|
click: function() {
|
|
$(this).attr("aria-expanded", !JSON.parse($(this).attr("aria-expanded")));
|
|
$(this).next().slideToggle();
|
|
}
|
|
});
|
|
$("#js-advanced-search-date-min").on({
|
|
change: function() {
|
|
App.AdvancedSearch.toggle_date_options();
|
|
}
|
|
});
|
|
|
|
App.SDGSyncGoalAndTargetFilters.sync($("#advanced_search_form"));
|
|
}
|
|
};
|
|
}).call(this);
|