a11y: label for searbox #307

i18n/ar.toml

@@ -1,3 +1,6 @@
+[Search]
+other = "البحث"
+
 [Search-placeholder]
 other = "...البحث"
 

i18n/de.toml

@@ -1,3 +1,6 @@
+[Search]
+other = "Suchen"
+
 [Search-placeholder]
 other = "Suchen..."
 

i18n/en.toml

@@ -1,3 +1,6 @@
+[Search]
+other = "Search"
+
 [Search-placeholder]
 other = "Search..."
 

i18n/es.toml

@@ -1,3 +1,6 @@
+[Search]
+other = "Buscar"
+
 [Search-placeholder]
 other = "Buscar..."
 

i18n/fr.toml

@@ -1,3 +1,6 @@
+[Search]
+other = "Rechercher"
+
 [Search-placeholder]
 other = "Rechercher..."
 

i18n/hi.toml

@@ -1,3 +1,6 @@
+[Search]
+other = "खोजे"
+
 [Search-placeholder]
 other = "खोजे..."
 

i18n/id.toml

@@ -1,3 +1,6 @@
+[Search]
+other = "Telusuri"
+
 [Search-placeholder]
 other = "Telusuri..."
 

i18n/it.toml

@@ -1,3 +1,6 @@
+[Search]
+other = "Cerca"
+
 [Search-placeholder]
 other = "Cerca..."
 

i18n/ja.toml

@@ -1,3 +1,6 @@
+[Search]
+other = "検索"
+
 [Search-placeholder]
 other = "検索..."
 

i18n/kr.toml

@@ -1,5 +1,8 @@
+[Search]
+other = "검색"
+
 [Search-placeholder]
-other = "검색어를 입력하세요."
+other = "검색어를 입력하세요"
 
 [Clear-History]
 other = "방문 기록 삭제"

i18n/nl.toml

@@ -1,3 +1,6 @@
+[Search]
+other = "Zoeken"
+
 [Search-placeholder]
 other = "Zoeken..."
 

i18n/pir.toml

@@ -1,3 +1,6 @@
+[Search]
+other = "Searrrch"
+
 [Search-placeholder]
 other = "Searrrch..."
 

i18n/pl.toml

@@ -1,3 +1,6 @@
+[Search]
+other = "Szukaj"
+
 [Search-placeholder]
 other = "Szukaj..."
 

i18n/pt.toml

@@ -1,3 +1,6 @@
+[Search]
+other = "Procurar"
+
 [Search-placeholder]
 other = "Procurar..."
 

i18n/ru.toml

@@ -1,3 +1,6 @@
+[Search]
+other = "Поиск"
+
 [Search-placeholder]
 other = "Поиск..."
 

i18n/tr.toml

@@ -1,3 +1,6 @@
+[Search]
+other = "Ara"
+
 [Search-placeholder]
 other = "Ara..."
 

i18n/vi.toml

@@ -1,3 +1,6 @@
+[Search]
+other = "Tìm kiếm"
+
 [Search-placeholder]
 other = "Tìm kiếm..."
 

i18n/zh-cn.toml

@@ -1,3 +1,6 @@
+[Search]
+other = "搜索"
+
 [Search-placeholder]
 other = "搜索..."
 

i18n/zh-tw.toml

@@ -1,3 +1,6 @@
+[Search]
+other = "搜尋"
+
 [Search-placeholder]
 other = "搜尋..."
 

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>

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%);
+}
+*/