feature (accessibility): skip link component

This commit is contained in:
MickaelK 2025-09-01 23:18:49 +10:00
parent 3f85dc61b5
commit 5041bfeb0d
46 changed files with 77 additions and 33 deletions

View file

@ -171,3 +171,25 @@ select:-moz-focusring {
src: local("Source Code Pro Semibold"), local("SourceCodePro-Semibold"), url(../fonts/SourceCodePro-Semibold-600-latin.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* skip link */
body > a[aria-role="navigation"] {
position: absolute;
left: -999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
body > a[aria-role="navigation"]:focus-visible {
position: fixed;
top: 8px;
width: fit-content;
height: auto;
border-radius: 5px;
padding: 5px 10px;
outline: 2px solid;
z-index: 10;
left: 50%;
background: white
}

View file

@ -98,6 +98,7 @@
"SETTINGS": "",
"SHARE": "",
"SHARED_DRIVE": "",
"SKIP_TO_CONTENT": "",
"SORT": "",
"SORT_BY_DATE": "",
"SORT_BY_NAME": "",

View file

@ -98,6 +98,7 @@
"SETTINGS": "parametrləri",
"SHARE": "paylaş",
"SHARED_DRIVE": "paylaşılmış disk",
"SKIP_TO_CONTENT": "Məzmuna keç",
"SORT": "sırala",
"SORT_BY_DATE": "tarixə görə sırala",
"SORT_BY_NAME": "adı ilə sırala",

View file

@ -98,6 +98,7 @@
"SETTINGS": "налады",
"SHARE": "падзяліцца",
"SHARED_DRIVE": "агульны дыск",
"SKIP_TO_CONTENT": "Перайсці да змесціва",
"SORT": "сартаваць",
"SORT_BY_DATE": "Сартаваць па даце",
"SORT_BY_NAME": "сартаваць па імені",

View file

@ -98,6 +98,7 @@
"SETTINGS": "настройки",
"SHARE": "споделяне",
"SHARED_DRIVE": "споделен диск",
"SKIP_TO_CONTENT": "Към съдържанието",
"SORT": "сортиране",
"SORT_BY_DATE": "сортиране по дата",
"SORT_BY_NAME": "подредете по име",

View file

@ -98,6 +98,7 @@
"SETTINGS": "configuració",
"SHARE": "compartir",
"SHARED_DRIVE": "unitat compartida",
"SKIP_TO_CONTENT": "Anar al contingut",
"SORT": "ordenar",
"SORT_BY_DATE": "ordenar per data",
"SORT_BY_NAME": "ordena per nom",

View file

@ -98,6 +98,7 @@
"SETTINGS": "nastavení",
"SHARE": "sdílet",
"SHARED_DRIVE": "sdílený disk",
"SKIP_TO_CONTENT": "Přejít na obsah",
"SORT": "seřadit",
"SORT_BY_DATE": "seřadit podle data",
"SORT_BY_NAME": "Seřaď dle jména",

View file

@ -98,6 +98,7 @@
"SETTINGS": "indstillinger",
"SHARE": "del",
"SHARED_DRIVE": "delt drev",
"SKIP_TO_CONTENT": "Spring til indhold",
"SORT": "sortér",
"SORT_BY_DATE": "sorter efter dato",
"SORT_BY_NAME": "sorter efter navn",

View file

@ -98,6 +98,7 @@
"SETTINGS": "Einstellungen",
"SHARE": "teilen",
"SHARED_DRIVE": "freigegebenes Laufwerk",
"SKIP_TO_CONTENT": "Zum Inhalt springen",
"SORT": "sortieren",
"SORT_BY_DATE": "nach Datum sortieren",
"SORT_BY_NAME": "nach Name sortieren",

View file

@ -98,6 +98,7 @@
"SETTINGS": "Ρυθμίσεις",
"SHARE": "κοινοποίηση",
"SHARED_DRIVE": "κοινόχρηστος δίσκος",
"SKIP_TO_CONTENT": "Μετάβαση στο περιεχόμενο",
"SORT": "ταξινόμηση",
"SORT_BY_DATE": "ταξινόμηση κατά ημερομηνία",
"SORT_BY_NAME": "ταξινόμηση κατά όνομα",

View file

@ -98,6 +98,7 @@
"SETTINGS": "ajustes",
"SHARE": "compartir",
"SHARED_DRIVE": "unidad compartida",
"SKIP_TO_CONTENT": "Saltar al contenido",
"SORT": "ordenar",
"SORT_BY_DATE": "ordenar por fecha",
"SORT_BY_NAME": "ordenar por nombre",

View file

@ -98,6 +98,7 @@
"SETTINGS": "seaded",
"SHARE": "jaga",
"SHARED_DRIVE": "jagatud ketas",
"SKIP_TO_CONTENT": "Sisusse",
"SORT": "sorteeri",
"SORT_BY_DATE": "järjesta kuupäeva järgi",
"SORT_BY_NAME": "järjesta nime järgi",

View file

@ -98,6 +98,7 @@
"SETTINGS": "ezarpenak",
"SHARE": "partekatzea",
"SHARED_DRIVE": "partekatutako diskoa",
"SKIP_TO_CONTENT": "Joan edukira",
"SORT": "ordenatu",
"SORT_BY_DATE": "ordenatu dataren arabera",
"SORT_BY_NAME": "ordenatu izenaren arabera",

View file

@ -98,6 +98,7 @@
"SETTINGS": "asetukset",
"SHARE": "jaa",
"SHARED_DRIVE": "jaettu asema",
"SKIP_TO_CONTENT": "Siirry sisältöön",
"SORT": "lajittele",
"SORT_BY_DATE": "lajittele päivämäärän mukaan",
"SORT_BY_NAME": "lajittele nimen mukaan",

View file

@ -98,6 +98,7 @@
"SETTINGS": "réglage",
"SHARE": "partager",
"SHARED_DRIVE": "disque partagé",
"SKIP_TO_CONTENT": "Aller au contenu",
"SORT": "trier",
"SORT_BY_DATE": "trier par date",
"SORT_BY_NAME": "trier par nom",

View file

@ -98,6 +98,7 @@
"SETTINGS": "configuración",
"SHARE": "compartir",
"SHARED_DRIVE": "unidade compartida",
"SKIP_TO_CONTENT": "Ir ao contido",
"SORT": "ordenar",
"SORT_BY_DATE": "ordenar por data",
"SORT_BY_NAME": "ordenar por nome",

View file

@ -98,6 +98,7 @@
"SETTINGS": "postavke",
"SHARE": "podijeli",
"SHARED_DRIVE": "zajednički disk",
"SKIP_TO_CONTENT": "Idi na sadržaj",
"SORT": "sortiraj",
"SORT_BY_DATE": "poredaj po datumu",
"SORT_BY_NAME": "poredaj po imenu",

View file

@ -98,6 +98,7 @@
"SETTINGS": "beállítások",
"SHARE": "megosztás",
"SHARED_DRIVE": "meghajtó",
"SKIP_TO_CONTENT": "Ugrás a tartalomhoz",
"SORT": "rendezés",
"SORT_BY_DATE": "rendezés dátum szerint",
"SORT_BY_NAME": "név szerinti rendezés",

View file

@ -98,6 +98,7 @@
"SETTINGS": "pengaturan",
"SHARE": "bagikan",
"SHARED_DRIVE": "drive bersama",
"SKIP_TO_CONTENT": "Lewati ke konten",
"SORT": "urutkan",
"SORT_BY_DATE": "urutkan berdasarkan tanggal",
"SORT_BY_NAME": "diurutkan berdasarkan nama",

View file

@ -98,6 +98,7 @@
"SETTINGS": "stillingar",
"SHARE": "deila",
"SHARED_DRIVE": "deildrifið",
"SKIP_TO_CONTENT": "Fara í efni",
"SORT": "raða",
"SORT_BY_DATE": "raða eftir dagsetningu",
"SORT_BY_NAME": "raða eftir nafni",

View file

@ -98,6 +98,7 @@
"SETTINGS": "impostazioni",
"SHARE": "condividi",
"SHARED_DRIVE": "unità condivisa",
"SKIP_TO_CONTENT": "Vai al contenuto",
"SORT": "ordina",
"SORT_BY_DATE": "ordinare per data",
"SORT_BY_NAME": "ordina per nome",

View file

@ -98,6 +98,7 @@
"SETTINGS": "設定",
"SHARE": "シェア",
"SHARED_DRIVE": "共有ドライブ",
"SKIP_TO_CONTENT": "コンテンツにスキップ",
"SORT": "並べ替え",
"SORT_BY_DATE": "日付順",
"SORT_BY_NAME": "名前順",

View file

@ -98,6 +98,7 @@
"SETTINGS": "პარამეტრები",
"SHARE": "გაზიარება",
"SHARED_DRIVE": "გაზიარებული დისკი",
"SKIP_TO_CONTENT": "შინაარსზე გადასვლა",
"SORT": "დალაგება",
"SORT_BY_DATE": "დაალაგეთ თარიღით",
"SORT_BY_NAME": "დაალაგე სახელით",

View file

@ -98,6 +98,7 @@
"SETTINGS": "설정",
"SHARE": "공유하다",
"SHARED_DRIVE": "공유 드라이브",
"SKIP_TO_CONTENT": "내용으로 건너뛰기",
"SORT": "종류",
"SORT_BY_DATE": "날짜별로 정렬",
"SORT_BY_NAME": "이름으로 정렬",

View file

@ -98,6 +98,7 @@
"SETTINGS": "nustatymai",
"SHARE": "bendrinti",
"SHARED_DRIVE": "bendrinamas diskas",
"SKIP_TO_CONTENT": "Pereiti prie turinio",
"SORT": "rūšiuoti",
"SORT_BY_DATE": "rūšiuoti pagal datą",
"SORT_BY_NAME": "rūšiuoti pagal pavadinimą",

View file

@ -98,6 +98,7 @@
"SETTINGS": "iestatījumi",
"SHARE": "koplietot",
"SHARED_DRIVE": "koplietots disks",
"SKIP_TO_CONTENT": "Iet uz saturu",
"SORT": "kārtot",
"SORT_BY_DATE": "sārtot pēc datuma",
"SORT_BY_NAME": "sārtot pēc nosaukuma",

View file

@ -98,6 +98,7 @@
"SETTINGS": "тохиргоо",
"SHARE": "хуваалцах",
"SHARED_DRIVE": "хуваалцсан хөтөч",
"SKIP_TO_CONTENT": "Агуулга руу шилжих",
"SORT": "эрэмбэлэх",
"SORT_BY_DATE": "огноогоор нь ангилах",
"SORT_BY_NAME": "нэрээр нь ангил",

View file

@ -98,6 +98,7 @@
"SETTINGS": "innstillinger",
"SHARE": "del",
"SHARED_DRIVE": "delt stasjon",
"SKIP_TO_CONTENT": "Gå til innhold",
"SORT": "sorter",
"SORT_BY_DATE": "sorter etter dato",
"SORT_BY_NAME": "sorter etter navn",

View file

@ -98,6 +98,7 @@
"SETTINGS": "instellingen",
"SHARE": "delen",
"SHARED_DRIVE": "gedeelde schijf",
"SKIP_TO_CONTENT": "Ga naar inhoud",
"SORT": "sorteren",
"SORT_BY_DATE": "sorteren op datum",
"SORT_BY_NAME": "sorteren op naam",

View file

@ -98,6 +98,7 @@
"SETTINGS": "Innstillinger",
"SHARE": "Del",
"SHARED_DRIVE": "Delt stasjon",
"SKIP_TO_CONTENT": "Gå til innhold",
"SORT": "Sorter",
"SORT_BY_DATE": "Sorter etter dato",
"SORT_BY_NAME": "Sorter etter navn",

View file

@ -98,6 +98,7 @@
"SETTINGS": "Ustawienia",
"SHARE": "udostępnij",
"SHARED_DRIVE": "wspólny dysk",
"SKIP_TO_CONTENT": "Przejdź do treści",
"SORT": "sortuj",
"SORT_BY_DATE": "Sortuj według daty",
"SORT_BY_NAME": "sortuj według nazwy",

View file

@ -98,6 +98,7 @@
"SETTINGS": "definições",
"SHARE": "compartilhar",
"SHARED_DRIVE": "unidade compartilhada",
"SKIP_TO_CONTENT": "Pular para o conteúdo",
"SORT": "ordenar",
"SORT_BY_DATE": "classificar por data",
"SORT_BY_NAME": "ordenar por nome",

View file

@ -98,6 +98,7 @@
"SETTINGS": "setări",
"SHARE": "partajează",
"SHARED_DRIVE": "unitate partajată",
"SKIP_TO_CONTENT": "Salt la conținut",
"SORT": "sortează",
"SORT_BY_DATE": "sortati dupa data",
"SORT_BY_NAME": "sorteaza dupa nume",

View file

@ -98,6 +98,7 @@
"SETTINGS": "настройки",
"SHARE": "поделиться",
"SHARED_DRIVE": "общий диск",
"SKIP_TO_CONTENT": "Перейти к содержимому",
"SORT": "сортировать",
"SORT_BY_DATE": "сортировать по дате",
"SORT_BY_NAME": "сортировать по имени",

View file

@ -98,6 +98,7 @@
"SETTINGS": "Nastavenia",
"SHARE": "zdieľať",
"SHARED_DRIVE": "zdieľaná jednotka",
"SKIP_TO_CONTENT": "Prejsť na obsah",
"SORT": "zoradiť",
"SORT_BY_DATE": "zoradiť podľa dátumu",
"SORT_BY_NAME": "zoradiť podľa názvu",

View file

@ -98,6 +98,7 @@
"SETTINGS": "nastavitve",
"SHARE": "deli",
"SHARED_DRIVE": "skupni disk",
"SKIP_TO_CONTENT": "Pojdi na vsebino",
"SORT": "razvrsti",
"SORT_BY_DATE": "razvrsti po datumu",
"SORT_BY_NAME": "razvrsti po imenu",

View file

@ -98,6 +98,7 @@
"SETTINGS": "подешавања",
"SHARE": "подели",
"SHARED_DRIVE": "заједнички диск",
"SKIP_TO_CONTENT": "Иди на садржај",
"SORT": "сортирај",
"SORT_BY_DATE": "сортирај по датуму",
"SORT_BY_NAME": "сортирај по имену",

View file

@ -98,6 +98,7 @@
"SETTINGS": "inställningar",
"SHARE": "dela",
"SHARED_DRIVE": "delad enhet",
"SKIP_TO_CONTENT": "Gå till innehåll",
"SORT": "sortera",
"SORT_BY_DATE": "sortera efter datum",
"SORT_BY_NAME": "sortera efter namn",

View file

@ -98,6 +98,7 @@
"SETTINGS": "การตั้งค่า",
"SHARE": "แชร์",
"SHARED_DRIVE": "ไดรฟ์ที่แชร์",
"SKIP_TO_CONTENT": "ข้ามไปยังเนื้อหา",
"SORT": "เรียงลำดับ",
"SORT_BY_DATE": "จัดเรียงตามวันที่",
"SORT_BY_NAME": "เรียงตามชื่อ",

View file

@ -98,6 +98,7 @@
"SETTINGS": "Ayarlar",
"SHARE": "paylaş",
"SHARED_DRIVE": "paylaşılan sürücü",
"SKIP_TO_CONTENT": "İçeriğe atla",
"SORT": "sırala",
"SORT_BY_DATE": "tarihe göre sırala",
"SORT_BY_NAME": "isme göre sırala",

View file

@ -98,6 +98,7 @@
"SETTINGS": "налаштування",
"SHARE": "поділитися",
"SHARED_DRIVE": "спільний диск",
"SKIP_TO_CONTENT": "Перейти до контенту",
"SORT": "сортувати",
"SORT_BY_DATE": "сортувати за датою",
"SORT_BY_NAME": "сортувати за назвою",

View file

@ -98,6 +98,7 @@
"SETTINGS": "cài đặt",
"SHARE": "chia sẻ",
"SHARED_DRIVE": "ổ chung",
"SKIP_TO_CONTENT": "Chuyển đến nội dung",
"SORT": "sắp xếp",
"SORT_BY_DATE": "lọc theo ngày",
"SORT_BY_NAME": "sắp xếp theo tên",

View file

@ -98,6 +98,7 @@
"SETTINGS": "参数",
"SHARE": "分享",
"SHARED_DRIVE": "共享驱动器",
"SKIP_TO_CONTENT": "跳转到内容",
"SORT": "排序",
"SORT_BY_DATE": "按日期排序",
"SORT_BY_NAME": "按名称分类",

View file

@ -98,6 +98,7 @@
"SETTINGS": "設定",
"SHARE": "分享",
"SHARED_DRIVE": "共用磁碟",
"SKIP_TO_CONTENT": "跳轉到內容",
"SORT": "排序",
"SORT_BY_DATE": "依日期排序",
"SORT_BY_NAME": "依名稱排序",

View file

@ -10,41 +10,9 @@
body:not(.dark-mode) .component_page_filespage {
background: linear-gradient(177deg, rgba(250,250,250,0.3) 0%, var(--bg-color) 30%);
}
/* .component_page_filespage .error { */
/* cursor: pointer; */
/* } */
/* .component_page_filespage .container { */
/* padding: 5px 0 20px 0; */
/* box-sizing: border-box; */
/* } */
/* .component_page_filespage .page_container, .component_page_filespage .selectablegroup { */
/* flex: 1; */
/* display: flex; */
/* overflow: hidden; */
/* } */
/* .component_page_filespage .selectablegroup { */
/* overflow: hidden !important; */
/* } */
/* .component_page_filespage .selectablegroup > div[style] span { */
/* border: 1px dashed var(--light) !important; */
/* } */
/* .component_page_filespage .infinite_scroll_loading { */
/* text-align: center; */
/* } */
/* .component_page_filespage .infinite_scroll_loading .component_loader { */
/* margin-top: -50px; */
/* } */
/* .component_page_filespage .infinite_scroll_loading .component_loader svg { */
/* height: 40px; */
/* } */
.scroll-y {
flex: 1;
overflow-y: scroll !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
}
/* .scroll-y > .container { */
/* height: 100%; */
/* } */

View file

@ -1,8 +1,10 @@
import { createElement, createRender } from "../lib/skeleton/index.js";
import { createElement, createRender, onDestroy } from "../lib/skeleton/index.js";
import { navigate } from "../lib/skeleton/router.js";
import { qs } from "../lib/dom.js";
import assert from "../lib/assert.js";
import { loadCSS } from "../helpers/loader.js";
import WithShell, { init as initShell } from "../components/decorator_shell_filemanager.js";
import t from "../locales/index.js";
import componentFilesystem, { init as initFilesystem } from "./filespage/ctrl_filesystem.js";
import componentSubmenu, { init as initSubmenu } from "./filespage/ctrl_submenu.js";
@ -40,6 +42,15 @@ export default WithShell(function(render) {
// feature4: render the upload button
componentUpload(createRender(qs($page, "[is=\"component_upload\"]")));
// feature5: accessibility / skip links
const $skip = createElement(`<a aria-role="navigation" href="#main">${t("Skip to content")}</a>`);
$skip.onclick = (e) => {
e.preventDefault();
assert.type(document.querySelector("main a"), window.HTMLElement).focus();
};
document.body.prepend($skip);
onDestroy(() => $skip.remove());
});
export function init() {