Replace checkboxes with Compound checkboxes, and appropriately label each checkbox. (#29363)

* Fix labelling of avatar menu

* Make the integration manager toggle more clear.

* fix label

* lint

* Update snapshots.

* Refactor many cases of checkbox to use the new compound component.

* Remove non-checkbox related changes

* Reset some things

* Remove usages of mx_checkbox* styling.

* Use label locators for apperance tests.

* small linter tweaks

* lint

* update screenshot

* Test updates

* lint

* Realign checkboxes for device selection.

* Fixup QuickSettings styling

* remove comment

* lint

* flex comment

* remove unused label

* remove redundant classes

* add test for spaces

* lint

* Copyright

* fixup spaces test

* spaces lint

* Replace pin with compound pin.

* Realign icons

* Remove hack for colouring icons

* Adjust existing rooms component to correctly label room.

* Add test for adding an existing room to an existing space.

* Set deterministic sort order for rooms

* lint

src/components/structures/SpaceHierarchy.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024,2025 New Vector Ltd.
 Copyright 2021-2023 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -16,6 +16,7 @@ import React, {
     useCallback,
     useContext,
     useEffect,
+    useId,
     useMemo,
     useRef,
     useState,
@@ -116,6 +117,7 @@ const Tile: React.FC<ITileProps> = ({
     const [showChildren, toggleShowChildren] = useStateToggle(true);
     const [onFocus, isActive, ref, nodeRef] = useRovingTabIndex();
     const [busy, setBusy] = useState(false);
+    const checkboxLabelId = useId();
 
     const onPreviewClick = (ev: ButtonEvent): void => {
         ev.preventDefault();
@@ -172,7 +174,14 @@ const Tile: React.FC<ITileProps> = ({
     let checkbox: ReactElement | undefined;
     if (onToggleClick) {
         if (hasPermissions) {
-            checkbox = <StyledCheckbox checked={!!selected} onChange={onToggleClick} tabIndex={isActive ? 0 : -1} />;
+            checkbox = (
+                <StyledCheckbox
+                    role="presentation"
+                    aria-labelledby={checkboxLabelId}
+                    checked={!!selected}
+                    tabIndex={-1}
+                />
+            );
         } else {
             checkbox = (
                 <TextWithTooltip
@@ -181,7 +190,12 @@ const Tile: React.FC<ITileProps> = ({
                         ev.stopPropagation();
                     }}
                 >
-                    <StyledCheckbox disabled={true} tabIndex={isActive ? 0 : -1} />
+                    <StyledCheckbox
+                        role="presentation"
+                        aria-labelledby={checkboxLabelId}
+                        disabled={true}
+                        tabIndex={-1}
+                    />
                 </TextWithTooltip>
             );
         }
@@ -248,7 +262,7 @@ const Tile: React.FC<ITileProps> = ({
             <div className="mx_SpaceHierarchy_roomTile_item">
                 <div className="mx_SpaceHierarchy_roomTile_avatar">{avatar}</div>
                 <div className="mx_SpaceHierarchy_roomTile_name">
-                    {name}
+                    <span id={checkboxLabelId}>{name}</span>
                     {joinedSection}
                     {suggestedSection}
                 </div>
@@ -330,11 +344,14 @@ const Tile: React.FC<ITileProps> = ({
         };
     }
 
+    const shouldToggle = hasPermissions && onToggleClick;
+
     return (
         <li
             className="mx_SpaceHierarchy_roomTileWrapper"
             role="treeitem"
             aria-selected={selected}
+            aria-labelledby={checkboxLabelId}
             aria-expanded={children ? showChildren : undefined}
         >
             <AccessibleButton
@@ -342,7 +359,7 @@ const Tile: React.FC<ITileProps> = ({
                     mx_SpaceHierarchy_subspace: room.room_type === RoomType.Space,
                     mx_SpaceHierarchy_joining: busy,
                 })}
-                onClick={hasPermissions && onToggleClick ? onToggleClick : onPreviewClick}
+                onClick={shouldToggle ? onToggleClick : onPreviewClick}
                 onKeyDown={onKeyDown}
                 ref={ref}
                 onFocus={onFocus}