nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2025-01-31 00:47:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

a11y: label for searbox #307

Browse source
This commit is contained in:
Sören Weber 2022-10-04 21:53:55 +02:00
parent 669323f00c
commit 47fb99e08d
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
21 changed files with 100 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
i18n/ar.toml
View file

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

3
i18n/de.toml
View file

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

3
i18n/en.toml
View file

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

3
i18n/es.toml
View file

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

3
i18n/fr.toml
View file

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

3
i18n/hi.toml
View file

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

3
i18n/id.toml
View file

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

3
i18n/it.toml
View file

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

3
i18n/ja.toml
View file

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

5
i18n/kr.toml
View file

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

3
i18n/nl.toml
View file

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

3
i18n/pir.toml
View file

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

3
i18n/pl.toml
View file

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

3
i18n/pt.toml
View file

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

3
i18n/ru.toml
View file

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

3
i18n/tr.toml
View file

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

3
i18n/vi.toml
View file

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

3
i18n/zh-cn.toml
View file

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

3
i18n/zh-tw.toml
View file

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

3
layouts/partials/search.html
View file

@ -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>

42
static/css/theme.css
View file

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