rzerres/element-call
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Give the lock icon an accessible label

Browse Source
This commit is contained in:
Robin
2023-11-20 19:02:19 -05:00
parent fcfb818a27
commit 09481d1e44
1 changed files with 3 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/room/EncryptionLock.tsx
View File

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