Search #37
Search #37
Conversation
Conflicts: src/assets/js/app/modules.js
|
Looking through the PR. Just in case you didn't notice: the branch has can't be merged at the time being. |
Conflicts: src/components/global/navbar/_navbar.scss
|
The search input and submit button are focusable, even when visually hidden.
Please make sure they aren't, by using |
|
This "search" label should be below the
|
| <div class="search js-search"> | ||
| <h2 class="visuallyhidden">Search</h2> | ||
| <button class="search--toggle"> | ||
| <span class="visuallyhidden">Search</span> |
There was a problem hiding this comment.
Better call it Show / hide search.
There was a problem hiding this comment.
By the way, closing doesn't work yet. Is this easy to implement (by clicking on the icon again, or by pressing Esc)? Otherwise, naming the button "Open search" only makes more sense.
| <h2 class="visuallyhidden">Search</h2> | ||
| <button class="search--toggle"> | ||
| <span class="visuallyhidden">Search</span> | ||
| </button> | ||
| <input class="search--input" type="text"> |
There was a problem hiding this comment.
This input doesn't have an ID, so it can't have a <label>. But every input needs a label.
| @@ -1,5 +1,8 @@ | |||
| <div class="search"> | |||
| <h2 class="visuallyhidden">Suche</h2> | |||
| <div class="search js-search"> | |||
There was a problem hiding this comment.
We should add a role="search" here (which is one of the very few ARIA landmarks that don't have an HTML5 equivalent).
|
All in all, this looks very promising. 👍 At the time being though, it's sometimes unclear why certain results are shown upon the entered string:
In Google, besides the title of a search result, some extracts of the page are displayed, so the user has more context. Is something possible in SS360? Other than that, examples are indexed, leading to useless and confusing suggestions (Hobbies):
Is it possible to remove certain pages from the index, for example |
|
@jmuheim I didn't do any configuration in SS360 yet, so the results are coming from the default setup and are expected. They will be much better after the fine-tuning. |
|
It only displays results from 3 characters on. We either have to make this more clear, or display results already with 1 or 2 characters.
|
|
Instead of announcing the currently selected value, it always announces the first radio button:
Here the comparison to the example:
If you want to play around with the example: https://deploy-preview-37--festive-mcnulty-536163.netlify.com/examples/widgets/autocomplete/_examples/autocomplete-with-radio-buttons/ I think somehow the focus does not stay in the filter input as expected, but is taken to the radio button buttons. |
|
@jmuheim thanks for reporting. |
|
@jmuheim would you have some time to test these Site Search 360 examples (mainly the "Embedding" one) https://sitesearch360.com/docs/example-simple.html |
|
@jmuheim As discussed, I've reverted back to using the Site Search 360 provided widget. |
| <button class="search-btn">Suche</button> | ||
| <div class="search js-search" role="search"> | ||
| <h2 class="visuallyhidden">Search</h2> | ||
| <h3 class="visuallyhidden">Search</h3> |
| @@ -0,0 +1,137 @@ | |||
| import $ from 'jquery' | |||
| @@ -0,0 +1,295 @@ | |||
| import $ from 'jquery' | |||
No description provided.