Adapt to breaking changes in Compound

src/room/EncryptionLock.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2023 New Vector Ltd
+Copyright 2023-2024 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -34,13 +34,13 @@ export const EncryptionLock: FC<Props> = ({ encrypted }) => {
   const label = encrypted ? t("common.encrypted") : t("common.unencrypted");
 
   return (
-    <Tooltip label={label} side="right" isTriggerInteractive={false}>
+    <Tooltip label={label} placement="right" isTriggerInteractive={false}>
       <Icon
         width={16}
         height={16}
         className={styles.lock}
         data-encrypted={encrypted}
-        aria-label={label}
+        aria-hidden
       />
     </Tooltip>
   );

src/room/LayoutToggle.module.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2023 New Vector Ltd
+Copyright 2023-2024 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -21,22 +21,15 @@ limitations under the License.
   background: var(--cpd-color-bg-canvas-default);
   box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.5);
   display: flex;
+  position: relative;
 }
 
 .toggle input {
   appearance: none;
-  /*
-   * Safari puts a margin on these, which is not removed via appearance: none
-   * mobile safari also has them take up space in the DOM, so set width 0
-   */
+  /* Safari puts a margin on these, which is not removed via appearance: none */
   margin: 0;
-  width: 0;
-  outline: none !important;
-}
-
-.toggle label {
-  display: block;
-  padding: calc(2.5 * var(--cpd-space-1x));
+  block-size: var(--cpd-space-11x);
+  inline-size: var(--cpd-space-11x);
   cursor: pointer;
   border-radius: var(--cpd-radius-pill-effect);
   color: var(--cpd-color-icon-primary);
@@ -44,41 +37,52 @@ limitations under the License.
   box-shadow: var(--small-drop-shadow);
 }
 
+.toggle svg {
+  display: block;
+  position: absolute;
+  padding: calc(2.5 * var(--cpd-space-1x));
+  pointer-events: none;
+  color: var(--cpd-color-icon-primary);
+}
+
+.toggle svg:nth-child(2) {
+  inset-inline-start: 2px;
+}
+
+.toggle svg:nth-child(4) {
+  inset-inline-end: 2px;
+}
+
 @media (hover: hover) {
-  .toggle label:hover {
+  .toggle input:hover {
     background: var(--cpd-color-bg-action-secondary-hovered);
     box-shadow: none;
   }
 }
 
-.toggle label:active {
+.toggle input:active {
   background: var(--cpd-color-bg-action-secondary-hovered);
   box-shadow: none;
 }
 
-.toggle input:checked + label {
-  color: var(--cpd-color-icon-on-solid-primary);
+.toggle input:checked {
   background: var(--cpd-color-bg-action-primary-rest);
 }
 
+.toggle input:checked + svg {
+  color: var(--cpd-color-icon-on-solid-primary);
+}
+
 @media (hover: hover) {
-  .toggle input:checked + label:hover {
+  .toggle input:checked:hover {
     background: var(--cpd-color-bg-action-primary-hovered);
   }
 }
 
-.toggle input:checked + label:active {
+.toggle input:checked:active {
   background: var(--cpd-color-bg-action-primary-hovered);
 }
 
-.toggle label > svg {
-  display: block;
-}
-
-.toggle label:last-child {
-  margin-inline-start: 5px;
-}
-
-.toggle input:focus-visible + label {
-  outline: auto;
+.toggle input:first-child {
+  margin-inline-end: 5px;
 }

src/room/LayoutToggle.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2023 New Vector Ltd
+Copyright 2023-2024 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { ChangeEvent, FC, useCallback, useId } from "react";
+import { ChangeEvent, FC, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { Tooltip } from "@vector-im/compound-web";
 import {
@@ -41,45 +41,28 @@ export const LayoutToggle: FC<Props> = ({ layout, setLayout, className }) => {
     [setLayout],
   );
 
-  const spotlightId = useId();
-  const gridId = useId();
-
   return (
     <div className={classNames(styles.toggle, className)}>
-      <input
-        id={spotlightId}
-        type="radio"
-        name="layout"
-        value="spotlight"
-        checked={layout === "spotlight"}
-        onChange={onChange}
-      />
       <Tooltip label={t("layout_spotlight_label")}>
-        <label htmlFor={spotlightId}>
-          <SpotlightIcon
-            aria-label={t("layout_spotlight_label")}
-            width={24}
-            height={24}
-          />
-        </label>
+        <input
+          type="radio"
+          name="layout"
+          value="spotlight"
+          checked={layout === "spotlight"}
+          onChange={onChange}
+        />
       </Tooltip>
-      <input
-        id={gridId}
-        type="radio"
-        name="layout"
-        value="grid"
-        checked={layout === "grid"}
-        onChange={onChange}
-      />
+      <SpotlightIcon aria-hidden width={24} height={24} />
       <Tooltip label={t("layout_grid_label")}>
-        <label htmlFor={gridId}>
-          <GridIcon
-            aria-label={t("layout_grid_label")}
-            width={24}
-            height={24}
-          />
-        </label>
+        <input
+          type="radio"
+          name="layout"
+          value="grid"
+          checked={layout === "grid"}
+          onChange={onChange}
+        />
       </Tooltip>
+      <GridIcon aria-hidden width={24} height={24} />
     </div>
   );
 };