Use a button to toggle the advanced search form

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"`.
This commit is contained in:
Javi Martín
2021-06-28 22:02:16 +02:00
parent a783b1a3d0
commit 6dcdf5c843
4 changed files with 32 additions and 27 deletions

View File

@@ -1,4 +1,6 @@
.advanced-search {
color: $link;
cursor: pointer;
float: left;
margin: $line-height 0;
position: inherit;
@@ -10,6 +12,10 @@
position: absolute;
right: 0;
}
&:focus {
outline: $outline-focus;
}
}
.advanced-search-form {