Merge pull request #1158 from skspade/1117-jump-to-main-content

1117 jump to main content

lemmy-translations

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

src/assets/css/main.css

@@ -414,3 +414,18 @@ br.big {
 .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" className="lemmy-site">
+            <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,14 +52,16 @@ export class App extends Component<any, any> {
                     exact
                     component={routeProps => (
                       <ErrorGuard>
-                        {RouteComponent &&
-                          (isAuthPath(path ?? "") ? (
-                            <AuthGuard>
+                        <main tabIndex={-1} ref={this.mainContentRef}>
+                          {RouteComponent &&
+                            (isAuthPath(path ?? "") ? (
+                              <AuthGuard>
+                                <RouteComponent {...routeProps} />
+                              </AuthGuard>
+                            ) : (
                               <RouteComponent {...routeProps} />
-                            </AuthGuard>
-                          ) : (
-                            <RouteComponent {...routeProps} />
-                          ))}
+                            ))}
+                        </main>
                       </ErrorGuard>
                     )}
                   />

src/shared/utils.ts

@@ -327,7 +327,12 @@ export function isVideo(url: string) {
 }
 
 export function validURL(str: string) {
-  return !!new URL(str);
+  try {
+    new URL(str);
+    return true;
+  } catch {
+    return false;
+  }
 }
 
 export function validInstanceTLD(str: string) {