Move advanced search toggle button inside the form
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.
This commit is contained in:
@@ -13,7 +13,7 @@ describe Shared::AdvancedSearchComponent, type: :component do
|
||||
it "hides the button to show the form" do
|
||||
render_inline component
|
||||
|
||||
expect(page).to have_button "Advanced search", visible: :hidden
|
||||
expect(page.find("form")).to have_button "Advanced search", visible: :hidden
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
Reference in New Issue
Block a user