diff options
Diffstat (limited to 'web/source/settings/views/moderation/domain-permissions')
4 files changed, 53 insertions, 32 deletions
diff --git a/web/source/settings/views/moderation/domain-permissions/drafts/index.tsx b/web/source/settings/views/moderation/domain-permissions/drafts/index.tsx index 19dbe0d88..36bc7ee01 100644 --- a/web/source/settings/views/moderation/domain-permissions/drafts/index.tsx +++ b/web/source/settings/views/moderation/domain-permissions/drafts/index.tsx @@ -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} > diff --git a/web/source/settings/views/moderation/domain-permissions/excludes/index.tsx b/web/source/settings/views/moderation/domain-permissions/excludes/index.tsx index 915d6f5cc..207f94d61 100644 --- a/web/source/settings/views/moderation/domain-permissions/excludes/index.tsx +++ b/web/source/settings/views/moderation/domain-permissions/excludes/index.tsx @@ -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} > diff --git a/web/source/settings/views/moderation/domain-permissions/form.tsx b/web/source/settings/views/moderation/domain-permissions/form.tsx index 204e9510c..cf1447cfd 100644 --- a/web/source/settings/views/moderation/domain-permissions/form.tsx +++ b/web/source/settings/views/moderation/domain-permissions/form.tsx @@ -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 */} diff --git a/web/source/settings/views/moderation/domain-permissions/subscriptions/common.tsx b/web/source/settings/views/moderation/domain-permissions/subscriptions/common.tsx index 8668caa4b..808d03dcf 100644 --- a/web/source/settings/views/moderation/domain-permissions/subscriptions/common.tsx +++ b/web/source/settings/views/moderation/domain-permissions/subscriptions/common.tsx @@ -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} > |