From fcfb818a27fa7f902f12b1434e75f59d945c5387 Mon Sep 17 00:00:00 2001 From: Robin Date: Mon, 20 Nov 2023 18:59:56 -0500 Subject: [PATCH 1/2] Make the encryption lock tooltip accessible via the keyboard --- src/room/EncryptionLock.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/room/EncryptionLock.tsx b/src/room/EncryptionLock.tsx index f35e1f4c..4d080085 100644 --- a/src/room/EncryptionLock.tsx +++ b/src/room/EncryptionLock.tsx @@ -40,6 +40,12 @@ export const EncryptionLock: FC = ({ encrypted }) => { height={16} className={styles.lock} data-encrypted={encrypted} + // Make the icon focusable so that the tooltip can be opened + // with keyboard navigation + // TODO: Replace this with the solution from + // https://github.com/vector-im/compound-web/pull/130 once it + // lands + tabIndex={0} /> ); From 09481d1e4442c7fd32c6c62be18e86e8d570101b Mon Sep 17 00:00:00 2001 From: Robin Date: Mon, 20 Nov 2023 19:02:19 -0500 Subject: [PATCH 2/2] 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 = ({ encrypted }) => { const { t } = useTranslation(); const Icon = encrypted ? LockIcon : LockOffIcon; + const label = encrypted ? t("common.encrypted") : t("common.unencrypted"); return ( - +