feature (accessibility): skip link component

public/assets/css/designsystem.css

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

public/assets/locales/_.json

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

public/assets/locales/az.json

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

public/assets/locales/be.json

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

public/assets/locales/bg.json

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

public/assets/locales/ca.json

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

public/assets/locales/cs.json

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

public/assets/locales/da.json

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

public/assets/locales/de.json

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

public/assets/locales/el.json

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

public/assets/locales/es.json

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

public/assets/locales/et.json

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

public/assets/locales/eu.json

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

public/assets/locales/fi.json

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

public/assets/locales/fr.json

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

public/assets/locales/gl.json

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

public/assets/locales/hr.json

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

public/assets/locales/hu.json

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

public/assets/locales/id.json

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

public/assets/locales/is.json

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

public/assets/locales/it.json

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

public/assets/locales/ja.json

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

public/assets/locales/ka.json

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

public/assets/locales/ko.json

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

public/assets/locales/lt.json

@@ -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ą",

public/assets/locales/lv.json

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

public/assets/locales/mn.json

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

public/assets/locales/nb.json

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

public/assets/locales/nl.json

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

public/assets/locales/no.json

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

public/assets/locales/pl.json

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

public/assets/locales/pt.json

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

public/assets/locales/ro.json

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

public/assets/locales/ru.json

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

public/assets/locales/sk.json

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

public/assets/locales/sl.json

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

public/assets/locales/sr.json

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

public/assets/locales/sv.json

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

public/assets/locales/th.json

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

public/assets/locales/tr.json

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

public/assets/locales/uk.json

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

public/assets/locales/vi.json

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

public/assets/locales/zh.json

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

public/assets/locales/zh_tw.json

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

public/assets/pages/ctrl_filespage.css

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

public/assets/pages/ctrl_filespage.js

@@ -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() {