UX: Add enter key hints for search (#31298)

Adds https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint
to the search inputs.

This hint is used for mobile devices to guide what label
is shown on the onscreen keyboard. By default `return` is
shown, now for search we will see `search`.

Also add `type="search"` to the full page search input for
further guidance.
This commit is contained in:
Martin Brennan 2025-02-12 15:51:44 +10:00 committed by GitHub
parent b3a686ca4e
commit 8ab57e4266
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 4 additions and 0 deletions

View File

@ -2,6 +2,7 @@
id={{this.inputId}}
type="search"
autocomplete="off"
enterkeyhint="search"
value={{this.search.activeGlobalSearchTerm}}
placeholder={{i18n "search.title"}}
aria-label={{i18n "search.title"}}

View File

@ -7,6 +7,7 @@ import { i18n } from "discourse-i18n";
export default class SearchTextField extends TextField {
autocomplete = "off";
enterkeyhint = "search";
@discourseComputed("searchService.searchContextEnabled")
placeholder(searchContextEnabled) {

View File

@ -11,6 +11,7 @@ const DEBOUNCE_MS = 500;
"autocorrect",
"autocapitalize",
"autofocus",
"enterkeyhint",
"maxLength",
"dir",
"aria-label",

View File

@ -29,6 +29,7 @@
@enter={{action "search" (hash collapseFilters=true)}}
@hasAutofocus={{this.hasAutofocus}}
@aria-controls="search-result-count"
type="search"
class="full-page-search search no-blur search-query"
/>
<ComboBox