mirrors/gotosocial
1
0
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial.git synced 2025-11-13 03:37:28 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions

[bugfix] Fix a couple accessibility issues with :focus elements (#3979)

Browse source 
* [bugfix/frontend] Fix accessibility/focus issues in settings + web ui

* fix little error

* tweaks
This commit is contained in:
tobi 2025-04-09 14:14:20 +02:00 • committed by GitHub
commit 19cfa8d126
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
24 changed files with 405 additions and 152 deletions
Download patch file Download diff file Expand all files Collapse all files

23
web/source/settings/views/moderation/domain-permissions/drafts/index.tsx
View file

@ -211,21 +211,24 @@ function DraftListEntry({ permDraft, linkTo, backLocation }: DraftEntryProps) {
const title = `${permTypeUpper} ${domain}`;
const onClick = () => {
// When clicking on a draft, direct
// to the detail view for that draft.
setLocation(linkTo, {
// Store the back location in history so
// the detail view can use it to return to
// this page (including query parameters).
state: { backLocation: backLocation }
});
};
return (
<span
className={`pseudolink domain-permission-draft entry ${permType}`}
aria-label={title}
title={title}
onClick={() => {
// When clicking on a draft, direct
// to the detail view for that draft.
setLocation(linkTo, {
// Store the back location in history so
// the detail view can use it to return to
// this page (including query parameters).
state: { backLocation: backLocation }
});
}}
onClick={onClick}
onKeyDown={e => e.key === "Enter" && onClick()}
role="link"
tabIndex={0}
>

23
web/source/settings/views/moderation/domain-permissions/excludes/index.tsx
View file

@ -186,21 +186,24 @@ function ExcludeListEntry({ permExclude, linkTo, backLocation }: ExcludeEntryPro
return <ErrorC error={new Error("id was undefined")} />;
}
const onClick = () => {
// When clicking on a exclude, direct
// to the detail view for that exclude.
setLocation(linkTo, {
// Store the back location in history so
// the detail view can use it to return to
// this page (including query parameters).
state: { backLocation: backLocation }
});
};
return (
<span
className={`pseudolink domain-permission-exclude entry`}
aria-label={`Exclude ${domain}`}
title={`Exclude ${domain}`}
onClick={() => {
// When clicking on a exclude, direct
// to the detail view for that exclude.
setLocation(linkTo, {
// Store the back location in history so
// the detail view can use it to return to
// this page (including query parameters).
state: { backLocation: backLocation }
});
}}
onClick={onClick}
onKeyDown={e => e.key === "Enter" && onClick()}
role="link"
tabIndex={0}
>

16
web/source/settings/views/moderation/domain-permissions/form.tsx
View file

@ -17,7 +17,7 @@
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import React from "react";
import React, { useRef } from "react";
import { useEffect } from "react";
import { useExportDomainListMutation } from "../../../lib/query/admin/domain-permissions/export";
@ -70,6 +70,11 @@ export default function ImportExportForm({ form, submitParse, parseResult }: Imp
/* eslint-disable-next-line react-hooks/exhaustive-deps */
}, [exportResult]);
const importFileRef = useRef<HTMLInputElement>(null);
const importFileOnClick = () => {
importFileRef.current?.click();
};
return (
<>
<h1>Import / Export domain permissions</h1>
@ -101,7 +106,13 @@ export default function ImportExportForm({ form, submitParse, parseResult }: Imp
showError={false}
disabled={form.permType.value === undefined || form.permType.value.length === 0}
/>
<label className={`button with-icon${form.permType.value === undefined || form.permType.value.length === 0 ? " disabled" : ""}`}>
<label
className={`button with-icon${form.permType.value === undefined || form.permType.value.length === 0 ? " disabled" : ""}`}
tabIndex={0}
onClick={importFileOnClick}
onKeyDown={e => e.key === "Enter" && importFileOnClick()}
role="button"
>
<i className="fa fa-fw " aria-hidden="true" />
Import file
<input
@ -110,6 +121,7 @@ export default function ImportExportForm({ form, submitParse, parseResult }: Imp
onChange={fileChanged}
accept="application/json,text/plain,text/csv"
disabled={form.permType.value === undefined || form.permType.value.length === 0}
ref={importFileRef}
/>
</label>
<b /> {/* grid filler */}

23
web/source/settings/views/moderation/domain-permissions/subscriptions/common.tsx
View file

@ -109,21 +109,24 @@ export function SubscriptionListEntry({ permSub, linkTo, backLocation }: Subscri
successfullyFetchedAtStr = new Date(successfullyFetchedAt).toDateString();
}
const onClick = () => {
// When clicking on a subscription, direct
// to the detail view for that subscription.
setLocation(linkTo, {
// Store the back location in history so
// the detail view can use it to return to
// this page (including query parameters).
state: { backLocation: backLocation }
});
};
return (
<span
className={`pseudolink domain-permission-subscription entry`}
aria-label={ariaLabel}
title={ariaLabel}
onClick={() => {
// When clicking on a subscription, direct
// to the detail view for that subscription.
setLocation(linkTo, {
// Store the back location in history so
// the detail view can use it to return to
// this page (including query parameters).
state: { backLocation: backLocation }
});
}}
onClick={onClick}
onKeyDown={e => e.key === "Enter" && onClick()}
role="link"
tabIndex={0}
>

23
web/source/settings/views/moderation/reports/search.tsx
View file

@ -184,21 +184,24 @@ function ReportListEntry({ report, linkTo, backLocation }: ReportEntryProps) {
const created = new Date(report.created_at).toLocaleString();
const title = `${status}. @${target.account.acct} was reported by @${from.account.acct} on ${created}. Reason: "${comment}"`;
const onClick = () => {
// When clicking on a report, direct
// to the detail view for that report.
setLocation(linkTo, {
// Store the back location in history so
// the detail view can use it to return to
// this page (including query parameters).
state: { backLocation: backLocation }
});
};
return (
<span
className={`pseudolink report entry${report.action_taken ? " resolved" : ""}`}
aria-label={title}
title={title}
onClick={() => {
// When clicking on a report, direct
// to the detail view for that report.
setLocation(linkTo, {
// Store the back location in history so
// the detail view can use it to return to
// this page (including query parameters).
state: { backLocation: backLocation }
});
}}
onClick={onClick}
onKeyDown={e => e.key === "Enter" && onClick()}
role="link"
tabIndex={0}
>