Improve screen reader accessibility (#1136)

Closes #643
elan-ev · Mar 7, 2024 · 0f3eb6a · 0f3eb6a
2 parents 2c83d20 + 086287b
commit 0f3eb6a
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 10 deletions.
diff --git a/frontend/src/i18n/locales/de.yaml b/frontend/src/i18n/locales/de.yaml
@@ -18,7 +18,7 @@ general:
     goto-homepage: Zur Startseite
     share: Teilen
   version-information: Version
-  logo-alt: Das Logo von „{{title}}“
+  logo-alt: Startseite von „{{title}}“
   no-root-children: Noch keine Seiten
   failed-to-load-thumbnail: Konnte Vorschaubild nicht laden
   yes: Ja
@@ -373,7 +373,15 @@ manage:
 
   my-videos:
     title: Meine Videos
+    navigation:
+      first: Erste Seite
+      previous: Vorherige Seite
+      next: Nächste Seite
+      last: Letzte Seite
     columns:
+      description: 'Sortieren nach {{title}}, {{direction}}'
+      ascending: aufsteigend
+      descending: absteigend
       title: Titel
       created: Erstellt
     no-description: Keine Beschreibung

diff --git a/frontend/src/i18n/locales/en.yaml b/frontend/src/i18n/locales/en.yaml
@@ -17,7 +17,7 @@ general:
     goto-homepage: Go to homepage
     share: Share
   version-information: Version
-  logo-alt: Logo of “{{title}}”
+  logo-alt: Homepage of “{{title}}”
   no-root-children: No pages yet
   failed-to-load-thumbnail: Failed to load thumbnail
   yes: "Yes"
@@ -353,7 +353,15 @@ manage:
 
   my-videos:
     title: My videos
+    navigation:
+      first: First page
+      previous: Previous page
+      next: Next page
+      last: Last page
     columns:
+      description: 'Sort by {{title}}, {{direction}}'
+      ascending: ascending
+      descending: descending
       title: Title
       created: Created
     no-description: No description

diff --git a/frontend/src/routes/manage/Video/index.tsx b/frontend/src/routes/manage/Video/index.tsx
@@ -229,15 +229,22 @@ type ColumnHeaderProps = {
     vars: VariablesOf<VideoManageQuery>;
 };
 
-const ColumnHeader: React.FC<ColumnHeaderProps> = ({ label, sortKey, vars }) => (
-    <th>
+const ColumnHeader: React.FC<ColumnHeaderProps> = ({ label, sortKey, vars }) => {
+    const { t } = useTranslation();
+    const direction = vars.order.column === sortKey && vars.order.direction === "ASCENDING"
+        ? "DESCENDING"
+        : "ASCENDING";
+    const directionTransKey = direction.toLowerCase() as Lowercase<typeof direction>;
+
+    return <th>
         <Link
+            aria-label={t("manage.my-videos.columns.description",
+                { title: label, direction: t(`manage.my-videos.columns.${directionTransKey}`) })
+            }
             to={varsToLink({
                 order: {
                     column: sortKey,
-                    direction: vars.order.column === sortKey && vars.order.direction === "ASCENDING"
-                        ? "DESCENDING"
-                        : "ASCENDING",
+                    direction,
                 },
             })}
             css={{
@@ -262,8 +269,8 @@ const ColumnHeader: React.FC<ColumnHeaderProps> = ({ label, sortKey, vars }) =>
                 "DESCENDING": () => <LuArrowUpWideNarrow />,
             }, () => null)}
         </Link>
-    </th>
-);
+    </th>;
+};
 
 const Row: React.FC<{ event: Events[number] }> = ({ event }) => {
     const isDark = useColorScheme().scheme === "dark";
@@ -357,18 +364,22 @@ const PageNavigation: React.FC<PageNavigationProps> = ({ connection, vars }) =>
                 <PageLink
                     vars={{ order: vars.order, first: LIMIT }}
                     disabled={!pageInfo.hasPreviousPage && connection.items.length === LIMIT}
+                    label={t("manage.my-videos.navigation.first")}
                 ><FirstPage /></PageLink>
                 <PageLink
                     vars={{ order: vars.order, before: pageInfo.startCursor, last: LIMIT }}
                     disabled={!pageInfo.hasPreviousPage}
+                    label={t("manage.my-videos.navigation.previous")}
                 ><LuChevronLeft /></PageLink>
                 <PageLink
                     vars={{ order: vars.order, after: pageInfo.endCursor, first: LIMIT }}
                     disabled={!pageInfo.hasNextPage}
+                    label={t("manage.my-videos.navigation.next")}
                 ><LuChevronRight /></PageLink>
                 <PageLink
                     vars={{ order: vars.order, last: LIMIT }}
                     disabled={!pageInfo.hasNextPage}
+                    label={t("manage.my-videos.navigation.last")}
                 ><LastPage /></PageLink>
             </div>
         </div>
@@ -379,13 +390,15 @@ type PageLinkProps = {
     vars: VariablesOf<VideoManageQuery>;
     disabled: boolean;
     children: ReactNode;
+    label: string;
 };
 
-const PageLink: React.FC<PageLinkProps> = ({ children, vars, disabled }) => (
+const PageLink: React.FC<PageLinkProps> = ({ children, vars, disabled, label }) => (
     <Link
         to={varsToLink(vars)}
         tabIndex={disabled ? -1 : 0}
         aria-hidden={disabled}
+        aria-label={label}
         css={{
             background: "none",
             border: "none",