feat(search): keyboard-accessible search button (#1331)

* Use a `<button>` for search

* Fix search button styles to match preexisting styling

* Remove additional native button properties.

* Invoke search button on click or keyboard.

* Reorganize search button DOM hierarchy

* Restore focus to the search button when exiting the search overlay

* Run prettier on Search.tsx
This commit is contained in:
Andrew
2024-08-09 21:46:50 -04:00
committed by GitHub
parent 195fc5134c
commit 3b5ed813f5
4 changed files with 18 additions and 20 deletions

View File

@ -5,18 +5,21 @@
max-width: 14rem;
flex-grow: 0.3;
& > #search-icon {
& > .search-button {
background-color: var(--lightgray);
border: none;
border-radius: 4px;
font-family: inherit;
font-size: inherit;
height: 2rem;
padding: 0;
display: flex;
align-items: center;
text-align: inherit;
cursor: pointer;
white-space: nowrap;
& > div {
flex-grow: 1;
}
width: 100%;
justify-content: space-between;
& > p {
display: inline;