a11y: improve "clear search" button #581

i18n/ar.toml

@@ -7,6 +7,9 @@ other = "البحث"
 [Search-placeholder]
 other = "...البحث"
 
+[Clear-search]
+other = "مسح البحث"
+
 [No-results-found]
 other = "لم يتم العثور على نتائج لـ \"{0}\""
 

i18n/cs.toml

@@ -7,6 +7,9 @@ other = "Hledat"
 [Search-placeholder]
 other = "Hledat..."
 
+[Clear-search]
+other = "Vymazat vyhledávání"
+
 [No-results-found]
 other = "Žádné výsledky pro \"{0}\""
 

i18n/de.toml

@@ -7,6 +7,9 @@ other = "Suchen"
 [Search-placeholder]
 other = "Suchen..."
 
+[Clear-search]
+other = "Suche löschen"
+
 [No-results-found]
 other = "Keine Ergebnisse gefunden für \"{0}\""
 

i18n/en.toml

@@ -7,6 +7,9 @@ other = "Search"
 [Search-placeholder]
 other = "Search..."
 
+[Clear-search]
+other = "Clear search"
+
 [No-results-found]
 other = "No results found for \"{0}\""
 

i18n/es.toml

@@ -7,6 +7,9 @@ other = "Buscar"
 [Search-placeholder]
 other = "Buscar..."
 
+[Clear-search]
+other = "Borrar búsqueda"
+
 [No-results-found]
 other = "No se han encontrado resultados para \"{0}\""
 

i18n/fi.toml

@@ -7,6 +7,9 @@ other = "Etsi"
 [Search-placeholder]
 other = "Etsi..."
 
+[Clear-search]
+other = "Tyhjennä haku"
+
 [No-results-found]
 other = "Ei tuloksia haulle \"{0}\""
 

i18n/fr.toml

@@ -7,6 +7,9 @@ other = "Rechercher"
 [Search-placeholder]
 other = "Rechercher..."
 
+[Clear-search]
+other = "Recherche claire"
+
 [No-results-found]
 other = "Aucun résultat trouvé pour \"{0}\""
 

i18n/hi.toml

@@ -7,6 +7,9 @@ other = "खोजे"
 [Search-placeholder]
 other = "खोजे..."
 
+[Clear-search]
+other = "खोज साफ़ करें"
+
 [No-results-found]
 other = "\"{0}\" के लिए कोई परिणाम नहीं मिला"
 

i18n/id.toml

@@ -7,6 +7,9 @@ other = "Telusuri"
 [Search-placeholder]
 other = "Telusuri..."
 
+[Clear-search]
+other = "Hapus pencarian"
+
 [No-results-found]
 other = "Tidak ada hasil yang ditemukan untuk \"{0}\""
 

i18n/it.toml

@@ -7,6 +7,9 @@ other = "Cerca"
 [Search-placeholder]
 other = "Cerca..."
 
+[Clear-search]
+other = "Cancella ricerca"
+
 [No-results-found]
 other = "Nessun risultato trovato per \"{0}\""
 

i18n/ja.toml

@@ -7,6 +7,9 @@ other = "検索"
 [Search-placeholder]
 other = "検索..."
 
+[Clear-search]
+other = "検索をクリア"
+
 [No-results-found]
 other = "\"{0}\" の結果が見つかりません"
 

i18n/ko.toml

@@ -7,6 +7,9 @@ other = "검색"
 [Search-placeholder]
 other = "검색어를 입력하세요"
 
+[Clear-search]
+other = "검색 지우기"
+
 [No-results-found]
 other = "\"{0}\"에 대한 결과가 없습니다."
 

i18n/nl.toml

@@ -7,6 +7,9 @@ other = "Zoeken"
 [Search-placeholder]
 other = "Zoeken..."
 
+[Clear-search]
+other = "Zoekopdracht wissen"
+
 [No-results-found]
 other = "Geen resultaten gevonden voor \"{0}\""
 

i18n/pir.toml

@@ -7,6 +7,9 @@ other = "Searrrch"
 [Search-placeholder]
 other = "Searrrch..."
 
+[Clear-search]
+other = "Clearrr searrrch"
+
 [No-results-found]
 other = "No rrresults found fer \"{0}\""
 
@@ -14,7 +17,7 @@ other = "No rrresults found fer \"{0}\""
 other = "{1} rrresults found fer \"{0}\""
 
 [Clear-History]
-other = "Clear Historrry"
+other = "Clearrr Historrry"
 
 [Attachments-label]
 other = "Attachments"

i18n/pl.toml

@@ -7,6 +7,9 @@ other = "Szukaj"
 [Search-placeholder]
 other = "Szukaj..."
 
+[Clear-search]
+other = "Wyczyść wyszukiwanie"
+
 [No-results-found]
 other = "Nie znaleziono wyników dla \"{0}\""
 

i18n/pt.toml

@@ -7,6 +7,9 @@ other = "Procurar"
 [Search-placeholder]
 other = "Procurar..."
 
+[Clear-search]
+other = "Limpar pesquisa"
+
 [No-results-found]
 other = "Nenhum resultado encontrado para \"{0}\""
 

i18n/ru.toml

@@ -7,6 +7,9 @@ other = "Поиск"
 [Search-placeholder]
 other = "Поиск..."
 
+[Clear-search]
+other = "Очистить поиск"
+
 [No-results-found]
 other = "Ничего не найдено для \"{0}\""
 

i18n/tr.toml

@@ -7,6 +7,9 @@ other = "Ara"
 [Search-placeholder]
 other = "Ara..."
 
+[Clear-search]
+other = "Aramayı temizle"
+
 [No-results-found]
 other = "\"{0}\" için sonuç bulunamadı"
 

i18n/vi.toml

@@ -7,6 +7,9 @@ other = "Tìm kiếm"
 [Search-placeholder]
 other = "Tìm kiếm..."
 
+[Clear-search]
+other = "Xóa tìm kiếm"
+
 [No-results-found]
 other = "Không tìm thấy kết quả nào cho \"{0}\""
 

i18n/zh-cn.toml

@@ -7,6 +7,9 @@ other = "搜索"
 [Search-placeholder]
 other = "搜索..."
 
+[Clear-search]
+other = "清除搜索"
+
 [No-results-found]
 other = "找不到\"{0}\"的结果"
 

i18n/zh-tw.toml

@@ -7,6 +7,9 @@ other = "搜尋"
 [Search-placeholder]
 other = "搜尋..."
 
+[Clear-search]
+other = "清除搜索"
+
 [No-results-found]
 other = "找不到\"{0}\"的結果"
 

i18n/zh.toml

@@ -7,6 +7,9 @@ other = "搜索"
 [Search-placeholder]
 other = "搜索..."
 
+[Clear-search]
+other = "清除搜索"
+
 [No-results-found]
 other = "找不到\"{0}\"的结果"
 

layouts/partials/search.html

@@ -5,10 +5,10 @@
           {{- end }}
         {{- end }}
 {{- $c:="" }}        {{ if $link }}<form action="{{ $link }}" method="get">{{ end }}<div class="searchbox default-animation">
-          {{ if $link }}<button type="submit" title="{{ T "Search" }} (CTRL+ALT+f)">{{ end }}<i class="fas fa-search"{{ if not $link }} title="{{ T "Search" }} (CTRL+ALT+f)"{{ end }}></i>{{ if $link }}</button>{{ end }}
+          {{ if $link }}<button class="search-detail" type="submit" title="{{ T "Search" }} (CTRL+ALT+f)">{{ end }}<i class="fas fa-search"{{ if not $link }} title="{{ T "Search" }} (CTRL+ALT+f)"{{ end }}></i>{{ if $link }}</button>{{ end }}
           <label class="a11y-only" for="search-by">{{ T "Search" }}</label>
           <input data-search-input id="search-by" name="search-by" class="search-by" type="search" placeholder="{{ T "Search-placeholder" }}">
-          <span data-search-clear=""><i class="fas fa-times"></i></span>
+          <button class="search-clear" type="button" data-search-clear="" title="{{ T "Clear-search" }}"><i class="fas fa-times" title="{{ T "Clear-search" }}"></i></button>
         </div>{{ if $link }}</form>{{ end }}
         {{- $assetBusting := not .Site.Params.disableAssetsBusting }}
         {{- $pageBaseLang := replaceRE "([a-z]+).*" "${1}" .Page.Lang }}

static/css/ie.css

@@ -21,7 +21,7 @@
 	.searchbox > :first-child {
 		left: .5rem;
 	}
-	.searchbox span {
+	.searchbox > :last-child {
 		right: .5rem;
 	}
 	.searchbox input {
@@ -250,8 +250,7 @@
 	}
 
 	#sidebar .searchbox > :first-child,
-	#sidebar .searchbox button,
-	.searchbox span {
+	#sidebar .searchbox > :last-child {
 		color: rgba( 224, 224, 224, 1 ); /* var(--INTERNAL-MENU-SEARCH-color) */
 	}
 

static/css/theme-neon.css

@@ -161,8 +161,7 @@ body h6 {
     color: rgba( 255, 255, 255, 1 ) !important;
 }
 
-body #sidebar .searchbox button:hover,
-body .searchbox span:hover {
+body #sidebar .searchbox button:hover{
     color: rgba( 255, 255, 255, 1 );
     text-shadow:
         0 0  1px rgba( 255, 255, 255, 1 ),

static/css/theme.css

@@ -193,21 +193,17 @@ dd {
     top: .5rem;
 }
 
-.searchbox span {
-    cursor: pointer;
+.searchbox > :last-child {
     inset-inline-end: .5rem;
     position: absolute;
-    top: .25rem;
 }
 
 #sidebar .searchbox > :first-child,
-#sidebar .searchbox button,
-.searchbox span {
+#sidebar .searchbox > :last-child{
     opacity: .65;
 }
 
-#sidebar .searchbox button:hover,
-.searchbox span:hover {
+#sidebar .searchbox button:hover {
     opacity: 1;
 }
 

static/css/variant.css

@@ -39,8 +39,7 @@ a:hover,
 }
 
 #sidebar .searchbox > :first-child,
-#sidebar .searchbox button,
-.searchbox span {
+#sidebar .searchbox > :last-child {
     color: var(--INTERNAL-MENU-SEARCH-color);
 }