From 09481d1e4442c7fd32c6c62be18e86e8d570101b Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Mon, 20 Nov 2023 19:02:19 -0500
Subject: [PATCH] Give the lock icon an accessible label

---
 src/room/EncryptionLock.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/room/EncryptionLock.tsx b/src/room/EncryptionLock.tsx
index 4d080085..df0bc53c 100644
--- a/src/room/EncryptionLock.tsx
+++ b/src/room/EncryptionLock.tsx
@@ -29,17 +29,16 @@ interface Props {
 export const EncryptionLock: FC<Props> = ({ encrypted }) => {
   const { t } = useTranslation();
   const Icon = encrypted ? LockIcon : LockOffIcon;
+  const label = encrypted ? t("common.encrypted") : t("common.unencrypted");
 
   return (
-    <Tooltip
-      label={encrypted ? t("common.encrypted") : t("common.unencrypted")}
-      side="right"
-    >
+    <Tooltip label={label} side="right">
       <Icon
         width={16}
         height={16}
         className={styles.lock}
         data-encrypted={encrypted}
+        aria-label={label}
         // Make the icon focusable so that the tooltip can be opened
         // with keyboard navigation
         // TODO: Replace this with the solution from