[bugfix/frontend] Fix photoswipe layout issues, keyboard shortcuts (#4010)

* fix photoswipe layout issues (chrome)

* aaaaaaaaaaaaaa

* wwwwwwwwwwww
This commit is contained in:
tobi 2025-04-14 15:12:21 +02:00 committed by GitHub
commit b510f3c539
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 257 additions and 125 deletions

View file

@ -211,7 +211,8 @@ function DraftListEntry({ permDraft, linkTo, backLocation }: DraftEntryProps) {
const title = `${permTypeUpper} ${domain}`;
const onClick = () => {
const onClick = (e) => {
e.preventDefault();
// When clicking on a draft, direct
// to the detail view for that draft.
setLocation(linkTo, {
@ -228,7 +229,12 @@ function DraftListEntry({ permDraft, linkTo, backLocation }: DraftEntryProps) {
aria-label={title}
title={title}
onClick={onClick}
onKeyDown={e => e.key === "Enter" && onClick()}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
onClick(e);
}
}}
role="link"
tabIndex={0}
>

View file

@ -186,7 +186,8 @@ function ExcludeListEntry({ permExclude, linkTo, backLocation }: ExcludeEntryPro
return <ErrorC error={new Error("id was undefined")} />;
}
const onClick = () => {
const onClick = (e) => {
e.preventDefault();
// When clicking on a exclude, direct
// to the detail view for that exclude.
setLocation(linkTo, {
@ -203,7 +204,12 @@ function ExcludeListEntry({ permExclude, linkTo, backLocation }: ExcludeEntryPro
aria-label={`Exclude ${domain}`}
title={`Exclude ${domain}`}
onClick={onClick}
onKeyDown={e => e.key === "Enter" && onClick()}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
onClick(e);
}
}}
role="link"
tabIndex={0}
>

View file

@ -71,7 +71,8 @@ export default function ImportExportForm({ form, submitParse, parseResult }: Imp
}, [exportResult]);
const importFileRef = useRef<HTMLInputElement>(null);
const importFileOnClick = () => {
const importFileOnClick = (e) => {
e.preventDefault();
importFileRef.current?.click();
};
@ -110,7 +111,12 @@ export default function ImportExportForm({ form, submitParse, parseResult }: Imp
className={`button with-icon${form.permType.value === undefined || form.permType.value.length === 0 ? " disabled" : ""}`}
tabIndex={0}
onClick={importFileOnClick}
onKeyDown={e => e.key === "Enter" && importFileOnClick()}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
importFileOnClick(e);
}
}}
role="button"
>
<i className="fa fa-fw " aria-hidden="true" />

View file

@ -109,7 +109,8 @@ export function SubscriptionListEntry({ permSub, linkTo, backLocation }: Subscri
successfullyFetchedAtStr = new Date(successfullyFetchedAt).toDateString();
}
const onClick = () => {
const onClick = (e) => {
e.preventDefault();
// When clicking on a subscription, direct
// to the detail view for that subscription.
setLocation(linkTo, {
@ -126,7 +127,12 @@ export function SubscriptionListEntry({ permSub, linkTo, backLocation }: Subscri
aria-label={ariaLabel}
title={ariaLabel}
onClick={onClick}
onKeyDown={e => e.key === "Enter" && onClick()}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
onClick(e);
}
}}
role="link"
tabIndex={0}
>