From 47fb99e08d5eca7fc458f00927d3f0b97ee6d5d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Tue, 4 Oct 2022 21:53:55 +0200
Subject: [PATCH] a11y: label for searbox #307

---
 i18n/ar.toml                 |  3 +++
 i18n/de.toml                 |  3 +++
 i18n/en.toml                 |  3 +++
 i18n/es.toml                 |  3 +++
 i18n/fr.toml                 |  3 +++
 i18n/hi.toml                 |  3 +++
 i18n/id.toml                 |  3 +++
 i18n/it.toml                 |  3 +++
 i18n/ja.toml                 |  3 +++
 i18n/kr.toml                 |  5 ++++-
 i18n/nl.toml                 |  3 +++
 i18n/pir.toml                |  3 +++
 i18n/pl.toml                 |  3 +++
 i18n/pt.toml                 |  3 +++
 i18n/ru.toml                 |  3 +++
 i18n/tr.toml                 |  3 +++
 i18n/vi.toml                 |  3 +++
 i18n/zh-cn.toml              |  3 +++
 i18n/zh-tw.toml              |  3 +++
 layouts/partials/search.html |  3 ++-
 static/css/theme.css         | 42 ++++++++++++++++++++++++++++++++++--
 21 files changed, 100 insertions(+), 4 deletions(-)

diff --git a/i18n/ar.toml b/i18n/ar.toml
index 7517e83480..4f8b00ce72 100644
--- a/i18n/ar.toml
+++ b/i18n/ar.toml
@@ -1,3 +1,6 @@
+[Search]
+other = "البحث"
+
 [Search-placeholder]
 other = "...البحث"
 
diff --git a/i18n/de.toml b/i18n/de.toml
index 252c73a871..22c2fbe095 100644
--- a/i18n/de.toml
+++ b/i18n/de.toml
@@ -1,3 +1,6 @@
+[Search]
+other = "Suchen"
+
 [Search-placeholder]
 other = "Suchen..."
 
diff --git a/i18n/en.toml b/i18n/en.toml
index 4761063973..e936c19ce3 100644
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -1,3 +1,6 @@
+[Search]
+other = "Search"
+
 [Search-placeholder]
 other = "Search..."
 
diff --git a/i18n/es.toml b/i18n/es.toml
index 65387f7390..e0c7b5e57d 100644
--- a/i18n/es.toml
+++ b/i18n/es.toml
@@ -1,3 +1,6 @@
+[Search]
+other = "Buscar"
+
 [Search-placeholder]
 other = "Buscar..."
 
diff --git a/i18n/fr.toml b/i18n/fr.toml
index 782ec13bbd..b0fd57b0bf 100644
--- a/i18n/fr.toml
+++ b/i18n/fr.toml
@@ -1,3 +1,6 @@
+[Search]
+other = "Rechercher"
+
 [Search-placeholder]
 other = "Rechercher..."
 
diff --git a/i18n/hi.toml b/i18n/hi.toml
index 9ec1eaed9e..2edabb5729 100644
--- a/i18n/hi.toml
+++ b/i18n/hi.toml
@@ -1,3 +1,6 @@
+[Search]
+other = "खोजे"
+
 [Search-placeholder]
 other = "खोजे..."
 
diff --git a/i18n/id.toml b/i18n/id.toml
index 05e89d8306..f412ac497d 100644
--- a/i18n/id.toml
+++ b/i18n/id.toml
@@ -1,3 +1,6 @@
+[Search]
+other = "Telusuri"
+
 [Search-placeholder]
 other = "Telusuri..."
 
diff --git a/i18n/it.toml b/i18n/it.toml
index 1f3634d313..982af7a62a 100644
--- a/i18n/it.toml
+++ b/i18n/it.toml
@@ -1,3 +1,6 @@
+[Search]
+other = "Cerca"
+
 [Search-placeholder]
 other = "Cerca..."
 
diff --git a/i18n/ja.toml b/i18n/ja.toml
index fbe98adfc0..9562d8928f 100644
--- a/i18n/ja.toml
+++ b/i18n/ja.toml
@@ -1,3 +1,6 @@
+[Search]
+other = "検索"
+
 [Search-placeholder]
 other = "検索..."
 
diff --git a/i18n/kr.toml b/i18n/kr.toml
index 8b46bc84a0..4ed5643321 100644
--- a/i18n/kr.toml
+++ b/i18n/kr.toml
@@ -1,5 +1,8 @@
+[Search]
+other = "검색"
+
 [Search-placeholder]
-other = "검색어를 입력하세요."
+other = "검색어를 입력하세요"
 
 [Clear-History]
 other = "방문 기록 삭제"
diff --git a/i18n/nl.toml b/i18n/nl.toml
index e96806994f..4d12102b1f 100644
--- a/i18n/nl.toml
+++ b/i18n/nl.toml
@@ -1,3 +1,6 @@
+[Search]
+other = "Zoeken"
+
 [Search-placeholder]
 other = "Zoeken..."
 
diff --git a/i18n/pir.toml b/i18n/pir.toml
index caa980adc1..86462a0c09 100644
--- a/i18n/pir.toml
+++ b/i18n/pir.toml
@@ -1,3 +1,6 @@
+[Search]
+other = "Searrrch"
+
 [Search-placeholder]
 other = "Searrrch..."
 
diff --git a/i18n/pl.toml b/i18n/pl.toml
index e92cd9c29d..de14ca8626 100644
--- a/i18n/pl.toml
+++ b/i18n/pl.toml
@@ -1,3 +1,6 @@
+[Search]
+other = "Szukaj"
+
 [Search-placeholder]
 other = "Szukaj..."
 
diff --git a/i18n/pt.toml b/i18n/pt.toml
index e759a3dcf8..9554932d62 100644
--- a/i18n/pt.toml
+++ b/i18n/pt.toml
@@ -1,3 +1,6 @@
+[Search]
+other = "Procurar"
+
 [Search-placeholder]
 other = "Procurar..."
 
diff --git a/i18n/ru.toml b/i18n/ru.toml
index 3016c047c4..f5236516ce 100644
--- a/i18n/ru.toml
+++ b/i18n/ru.toml
@@ -1,3 +1,6 @@
+[Search]
+other = "Поиск"
+
 [Search-placeholder]
 other = "Поиск..."
 
diff --git a/i18n/tr.toml b/i18n/tr.toml
index a98e6207e4..9c38d8807b 100644
--- a/i18n/tr.toml
+++ b/i18n/tr.toml
@@ -1,3 +1,6 @@
+[Search]
+other = "Ara"
+
 [Search-placeholder]
 other = "Ara..."
 
diff --git a/i18n/vi.toml b/i18n/vi.toml
index 2ef1e39b8c..8249f0de0a 100644
--- a/i18n/vi.toml
+++ b/i18n/vi.toml
@@ -1,3 +1,6 @@
+[Search]
+other = "Tìm kiếm"
+
 [Search-placeholder]
 other = "Tìm kiếm..."
 
diff --git a/i18n/zh-cn.toml b/i18n/zh-cn.toml
index a4a6fcbeac..bc23ed87fc 100644
--- a/i18n/zh-cn.toml
+++ b/i18n/zh-cn.toml
@@ -1,3 +1,6 @@
+[Search]
+other = "搜索"
+
 [Search-placeholder]
 other = "搜索..."
 
diff --git a/i18n/zh-tw.toml b/i18n/zh-tw.toml
index 24f204a079..f6994b6c04 100644
--- a/i18n/zh-tw.toml
+++ b/i18n/zh-tw.toml
@@ -1,3 +1,6 @@
+[Search]
+other = "搜尋"
+
 [Search-placeholder]
 other = "搜尋..."
 
diff --git a/layouts/partials/search.html b/layouts/partials/search.html
index a5e02dfbcc..5697c64520 100644
--- a/layouts/partials/search.html
+++ b/layouts/partials/search.html
@@ -1,5 +1,6 @@
         <div class="searchbox default-animation">
-          <label for="search-by"><i class="fas fa-search"></i></label>
+          <label class="a11y-only" for="search-by">{{ T "Language" }}</label>
+          <i class="fas fa-search"></i>
           <input data-search-input id="search-by" type="search" placeholder="{{ T "Search-placeholder" }}">
           <span data-search-clear=""><i class="fas fa-times"></i></span>
         </div>
diff --git a/static/css/theme.css b/static/css/theme.css
index beead9d044..d52f36cacc 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -86,11 +86,11 @@ th {
     margin-top: 1rem;
 }
 
-.searchbox label {
+.searchbox > i {
     color: rgba( 255, 255, 255, .8 );
     position: absolute;
     left: 10px;
-    top: 3px;
+    top: 6px;
 }
 
 .searchbox span {
@@ -1417,3 +1417,41 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
 	width: 100px;
 	top: -9999px;
 }
+
+.a11y-only {
+    /* idea taken from https://www.filamentgroup.com/lab/a11y-form-labels.html */
+    position: absolute;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    clip: rect(1px 1px 1px 1px);
+    clip: rect(1px,1px,1px,1px);
+    transform: translateY(-100%);
+    transition: transform .5s cubic-bezier(.18,.89,.32,1.28);
+    white-space: nowrap;
+}
+
+/* filament style for making action visible on focus - not adepted yet
+.a11y-only:focus {
+    position: fixed;
+    height: auto;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+    margin: 0 0 0 -100px;
+    top: -.3em;
+    left: 50%;
+    text-align: center;
+    width: 200px;
+    background: #fff;
+    color: #368512;
+    padding: .8em 0 .7em;
+    font-size: 16px;
+    z-index: 5000;
+    text-decoration: none;
+    border-bottom-right-radius: 8px;
+    border-bottom-left-radius: 8px;
+    outline: 0;
+    transform: translateY(0%);
+}
+*/