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

* 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
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 18 additions and 20 deletions
quartz/components/styles

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;