Use the new isTriggerInteractive tooltip prop

src/room/EncryptionLock.module.css

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 .lock {
+  display: block;
   padding: var(--cpd-space-1x);
   border-radius: var(--cpd-radius-pill-effect);
 }

src/room/EncryptionLock.tsx

@@ -32,19 +32,13 @@ export const EncryptionLock: FC<Props> = ({ encrypted }) => {
   const label = encrypted ? t("common.encrypted") : t("common.unencrypted");
 
   return (
-    <Tooltip label={label} side="right">
+    <Tooltip label={label} side="right" isTriggerInteractive={false}>
       <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
-        // https://github.com/vector-im/compound-web/pull/130 once it
-        // lands
-        tabIndex={0}
       />
     </Tooltip>
   );