From 19cfa8d126a2ff54298150529e58e5e4f5495f09 Mon Sep 17 00:00:00 2001
From: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Wed, 9 Apr 2025 14:14:20 +0200
Subject: [bugfix] Fix a couple accessibility issues with `:focus` elements
 (#3979)

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

* fix little error

* tweaks
---
 .../settings/views/user/applications/search.tsx    | 23 ++++++++++++----------
 .../settings/views/user/export-import/export.tsx   |  5 -----
 .../settings/views/user/interactions/search.tsx    | 23 ++++++++++++----------
 web/source/settings/views/user/profile/profile.tsx |  4 +++-
 4 files changed, 29 insertions(+), 26 deletions(-)

(limited to 'web/source/settings/views/user')

diff --git a/web/source/settings/views/user/applications/search.tsx b/web/source/settings/views/user/applications/search.tsx
index 819d96391..afbb0d326 100644
--- a/web/source/settings/views/user/applications/search.tsx
+++ b/web/source/settings/views/user/applications/search.tsx
@@ -139,21 +139,24 @@ function ApplicationListEntry({ app, linkTo, backLocation }: ApplicationListEntr
 	const created = useCreated(app);
 	const redirectURIs = useRedirectURIs(app);
 
+	const onClick = () => {
+		// When clicking on an app, direct
+		// to the detail view for that app.
+		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 application entry`}
 			aria-label={`${app.name}`}
 			title={`${app.name}`}
-			onClick={() => {
-				// When clicking on an app, direct
-				// to the detail view for that app.
-				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/user/export-import/export.tsx b/web/source/settings/views/user/export-import/export.tsx
index be302fec8..b4cf7355b 100644
--- a/web/source/settings/views/user/export-import/export.tsx
+++ b/web/source/settings/views/user/export-import/export.tsx
@@ -102,7 +102,6 @@ export default function Export({ exportStats }: { exportStats: AccountExportStat
 						Following {exportStats.following_count} account{ exportStats.following_count !== 1 && "s" }
 					</span>
 					<MutationButton
-						className="text-cutoff"
 						label="Download following.csv"
 						type="button"
 						onClick={() => exportFollowing()}
@@ -116,7 +115,6 @@ export default function Export({ exportStats }: { exportStats: AccountExportStat
 						Followed by {exportStats.followers_count} account{ exportStats.followers_count !== 1 && "s" }
 					</span>
 					<MutationButton
-						className="text-cutoff"
 						label="Download followers.csv"
 						type="button"
 						onClick={() => exportFollowers()}
@@ -130,7 +128,6 @@ export default function Export({ exportStats }: { exportStats: AccountExportStat
 						Created {exportStats.lists_count} list{ exportStats.lists_count !== 1 && "s" }
 					</span>
 					<MutationButton
-						className="text-cutoff"
 						label="Download lists.csv"
 						type="button"
 						onClick={() => exportLists()}
@@ -144,7 +141,6 @@ export default function Export({ exportStats }: { exportStats: AccountExportStat
 						Blocking {exportStats.blocks_count} account{ exportStats.blocks_count !== 1 && "s" }
 					</span>
 					<MutationButton
-						className="text-cutoff"
 						label="Download blocks.csv"
 						type="button"
 						onClick={() => exportBlocks()}
@@ -158,7 +154,6 @@ export default function Export({ exportStats }: { exportStats: AccountExportStat
 						Muting {exportStats.mutes_count} account{ exportStats.mutes_count !== 1 && "s" }
 					</span>
 					<MutationButton
-						className="text-cutoff"
 						label="Download mutes.csv"
 						type="button"
 						onClick={() => exportMutes()}
diff --git a/web/source/settings/views/user/interactions/search.tsx b/web/source/settings/views/user/interactions/search.tsx
index b97899c51..5d2da7563 100644
--- a/web/source/settings/views/user/interactions/search.tsx
+++ b/web/source/settings/views/user/interactions/search.tsx
@@ -174,21 +174,24 @@ function ReqsListEntry({ req, linkTo, backLocation }: ReqsListEntryProps) {
 	const ourContent = useContent(req.status);
 	const theirContent = useContent(req.reply);
 
+	const onClick = () => {
+		// When clicking on a request, direct
+		// to the detail view for that request.
+		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 entry interaction-request`}
 			aria-label={label}
 			title={label}
-			onClick={() => {
-				// When clicking on a request, direct
-				// to the detail view for that request.
-				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/user/profile/profile.tsx b/web/source/settings/views/user/profile/profile.tsx
index 6f99a17db..36e307193 100644
--- a/web/source/settings/views/user/profile/profile.tsx
+++ b/web/source/settings/views/user/profile/profile.tsx
@@ -167,6 +167,7 @@ function ProfileForm({ data: profile }: ProfileFormProps) {
 					<MutationButton
 						className="delete-header-button"
 						label="Delete header"
+						tabIndex={0}
 						disabled={noHeader}
 						result={deleteHeaderRes}
 						onClick={(e) => {
@@ -179,7 +180,7 @@ function ProfileForm({ data: profile }: ProfileFormProps) {
 						}}
 					/>
 				</fieldset>
-				
+
 				<fieldset className="file-input-with-image-description">
 					<legend>Avatar</legend>
 					<FileInput
@@ -197,6 +198,7 @@ function ProfileForm({ data: profile }: ProfileFormProps) {
 					<MutationButton
 						className="delete-avatar-button"
 						label="Delete avatar"
+						tabIndex={0}
 						disabled={noAvatar}
 						result={deleteAvatarRes}
 						onClick={(e) => {
-- 
cgit v1.3