feat: Adds Jump to main content functionality

feat: Adds media query for prefers reduced motion

chore: remove <a/> from index.tsx

chore: remove tranisiton for skip link

chore: remove omitted error variable

update translations

chore: update translations

chore: Covert <a/> jump to content from html to Inferno JSX

chore: add translation

feat: add main as a parent to routes so jump to content always skips navigation on every page

chore: Use bootstrap classes

feat: Tidy Jump to content feature with some basic JS

feat: Jump to main content

lemmy-translations

@@ -1 +1 @@
-Subproject commit f45ddff206adb52ab0ac7555bf14978edac5d2f2
+Subproject commit c9a07885f35cf334d3cf167cb57587a8177fc3fb

src/assets/css/main.css

@@ -420,3 +420,18 @@ br.big {
 em-emoji-picker {
   width: 100%;
 }
+
+.skip-link {
+  top: -40px;
+  transition: top 0.3s ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skip-link {
+    transition: none;
+  }
+}
+
+.skip-link:focus {
+  top: 0;
+}

src/shared/components/app/app.tsx

@@ -1,4 +1,4 @@
-import { Component } from "inferno";
+import { Component, createRef, linkEvent, RefObject } from "inferno";
 import { Provider } from "inferno-i18next-dess";
 import { Route, Switch } from "inferno-router";
 import { i18n } from "../../i18next";
@@ -15,8 +15,15 @@ import { Theme } from "./theme";
 
 export class App extends Component<any, any> {
   private isoData: IsoDataOptionalSite = setIsoData(this.context);
+  private readonly mainContentRef: RefObject<HTMLElement>;
   constructor(props: any, context: any) {
     super(props, context);
+    this.mainContentRef = createRef();
+  }
+
+  handleJumpToContent(event) {
+    event.preventDefault();
+    this.mainContentRef.current?.focus();
   }
   render() {
     const siteRes = this.isoData.site_res;
@@ -26,6 +33,12 @@ export class App extends Component<any, any> {
       <>
         <Provider i18next={i18n}>
           <div id="app">
+            <a
+              className="skip-link bg-light text-dark p-2 text-decoration-none position-absolute start-0 z-3"
+              onClick={linkEvent(this, this.handleJumpToContent)}
+            >
+              ${i18n.t("jump_to_content", "Jump to content")}
+            </a>
             {siteView && (
               <Theme defaultTheme={siteView.local_site.default_theme} />
             )}
@@ -39,6 +52,7 @@ export class App extends Component<any, any> {
                     exact
                     component={routeProps => (
                       <ErrorGuard>
+                        <main tabIndex={-1} ref={this.mainContentRef}>
                           {RouteComponent &&
                             (isAuthPath(path ?? "") ? (
                               <AuthGuard>
@@ -47,6 +61,7 @@ export class App extends Component<any, any> {
                             ) : (
                               <RouteComponent {...routeProps} />
                             ))}
+                        </main>
                       </ErrorGuard>
                     )}
                   />

src/shared/utils.ts

@@ -330,7 +330,7 @@ export function validURL(str: string) {
   try {
     new URL(str);
     return true;
-  } catch (_) {
+  } catch {
     return false;
   }
 }