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

1117 jump to main content
This commit is contained in:
SleeplessOne1917 2023-06-17 02:22:01 +00:00 committed by GitHub
commit 62e105f826
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 45 additions and 10 deletions

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

View file

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

View file

@ -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>
)}
/>

View file

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