From 6cbdde578d0054d5cfaf35a87eaa85389ff14d17 Mon Sep 17 00:00:00 2001
From: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com>
Date: Sat, 26 Oct 2024 13:06:25 -0700
Subject: [PATCH] Desktop: Accessibility: Add accessible label to the "remove
 from share" button (#11233)

---
 packages/app-desktop/gui/Button/Button.tsx                | 3 +++
 .../gui/ShareFolderDialog/ShareFolderDialog.tsx           | 8 +++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/app-desktop/gui/Button/Button.tsx b/packages/app-desktop/gui/Button/Button.tsx
index 56e248ed3..4dea7c565 100644
--- a/packages/app-desktop/gui/Button/Button.tsx
+++ b/packages/app-desktop/gui/Button/Button.tsx
@@ -256,6 +256,9 @@ const Button = React.forwardRef((props: Props, ref: any) => {
 			iconOnly={iconOnly}
 			onClick={onClick}
 
+			// When there's no title, the button needs a label. In this case, fall back
+			// to the tooltip.
+			aria-label={props.title ? undefined : props.tooltip}
 			aria-disabled={props.disabled}
 			aria-expanded={props['aria-expanded']}
 			aria-controls={props['aria-controls']}
diff --git a/packages/app-desktop/gui/ShareFolderDialog/ShareFolderDialog.tsx b/packages/app-desktop/gui/ShareFolderDialog/ShareFolderDialog.tsx
index 76895ef4e..e3eb8b159 100644
--- a/packages/app-desktop/gui/ShareFolderDialog/ShareFolderDialog.tsx
+++ b/packages/app-desktop/gui/ShareFolderDialog/ShareFolderDialog.tsx
@@ -321,7 +321,13 @@ function ShareFolderDialog(props: Props) {
 				<StyledRecipientName>{shareUser.user.email}</StyledRecipientName>
 				{dropdown}
 				<StyledRecipientStatusIcon title={statusToMessage[shareUser.status]} className={statusToIcon[shareUser.status]}></StyledRecipientStatusIcon>
-				<Button disabled={!enabled} size={ButtonSize.Small} iconName="far fa-times-circle" onClick={() => recipient_delete({ shareUserId: shareUser.id })}/>
+				<Button
+					disabled={!enabled}
+					size={ButtonSize.Small}
+					iconName="far fa-times-circle"
+					onClick={() => recipient_delete({ shareUserId: shareUser.id })}
+					tooltip={_('Remove %s from share', shareUser.user.email)}
+				/>
 			</StyledRecipient>
 		);
 	}