lint

Author: Half-Shot

res/css/views/settings/tabs/user/_SidebarUserSettingsTab.pcss

@@ -16,4 +16,4 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_SidebarUserSettingsTab_icon {
     margin-right: var(--cpd-space-2x);
-}
+}

src/components/structures/SpaceHierarchy.tsx

@@ -174,7 +174,14 @@ const Tile: React.FC<ITileProps> = ({
     let checkbox: ReactElement | undefined;
     if (onToggleClick) {
         if (hasPermissions) {
-            checkbox = <StyledCheckbox role="presentation" aria-labelledby={checkboxLabelId} checked={!!selected} tabIndex={-1} />;
+            checkbox = (
+                <StyledCheckbox
+                    role="presentation"
+                    aria-labelledby={checkboxLabelId}
+                    checked={!!selected}
+                    tabIndex={-1}
+                />
+            );
         } else {
             checkbox = (
                 <TextWithTooltip
@@ -183,7 +190,12 @@ const Tile: React.FC<ITileProps> = ({
                         ev.stopPropagation();
                     }}
                 >
-                    <StyledCheckbox role="presentation" aria-labelledby={checkboxLabelId} disabled={true} tabIndex={-1} />
+                    <StyledCheckbox
+                        role="presentation"
+                        aria-labelledby={checkboxLabelId}
+                        disabled={true}
+                        tabIndex={-1}
+                    />
                 </TextWithTooltip>
             );
         }

src/components/views/dialogs/BulkRedactDialog.tsx

@@ -113,7 +113,11 @@ const BulkRedactDialog: React.FC<Props> = (props) => {
                 <div className="mx_Dialog_content" id="mx_Dialog_content">
                     <p>{_t("user_info|redact|confirm_description_1", { count, user })}</p>
                     <p>{_t("user_info|redact|confirm_description_2")}</p>
-                    <StyledCheckbox description={_t("user_info|redact|confirm_keep_state_explainer")} checked={keepStateEvents} onChange={(e) => setKeepStateEvents(e.target.checked)}>
+                    <StyledCheckbox
+                        description={_t("user_info|redact|confirm_keep_state_explainer")}
+                        checked={keepStateEvents}
+                        onChange={(e) => setKeepStateEvents(e.target.checked)}
+                    >
                         {_t("user_info|redact|confirm_keep_state_label")}
                     </StyledCheckbox>
                 </div>

src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx

@@ -51,10 +51,14 @@ const Entry: React.FC<{
                 disabled={!onChange}
                 description={description}
             >
-            <div>
-                {localRoom ? <RoomAvatar role="none" room={room} size="20px" /> : <RoomAvatar oobData={room} size="20px" />}
-                <span className="mx_ManageRestrictedJoinRuleDialog_entry_name">{room.name}</span>
-            </div>
+                <div>
+                    {localRoom ? (
+                        <RoomAvatar role="none" room={room} size="20px" />
+                    ) : (
+                        <RoomAvatar oobData={room} size="20px" />
+                    )}
+                    <span className="mx_ManageRestrictedJoinRuleDialog_entry_name">{room.name}</span>
+                </div>
             </StyledCheckbox>
         </div>
     );

src/components/views/dialogs/SpacePreferencesDialog.tsx

@@ -45,15 +45,13 @@ const SpacePreferencesAppearanceTab: React.FC<Pick<IProps, "space">> = ({ space
                                 !showPeople,
                             );
                         }}
-                        description={
-                            _t("space|preferences|show_people_in_space", {
-                                spaceName: space.name,
-                            })}
+                        description={_t("space|preferences|show_people_in_space", {
+                            spaceName: space.name,
+                        })}
                     >
                         {_t("common|people")}
                     </StyledCheckbox>
-                    <SettingsSubsectionText>
-                    </SettingsSubsectionText>
+                    <SettingsSubsectionText />
                 </SettingsSubsection>
             </SettingsSection>
         </SettingsTab>

src/components/views/elements/LabelledCheckbox.tsx

@@ -28,11 +28,16 @@ interface IProps {
 
 const LabelledCheckbox: React.FC<IProps> = ({ value, label, byline, disabled, onChange, className }) => {
     return (
-        <label className={classnames("mx_LabelledCheckbox", className)}>
-            <StyledCheckbox description={byline} disabled={disabled} checked={value} onChange={(e) => onChange(e.target.checked)}>
+        <div className={classnames("mx_LabelledCheckbox", className)}>
+            <StyledCheckbox
+                description={byline}
+                disabled={disabled}
+                checked={value}
+                onChange={(e) => onChange(e.target.checked)}
+            >
                 <span className="mx_LabelledCheckbox_label">{label}</span>
             </StyledCheckbox>
-        </label>
+        </div>
     );
 };
 

src/components/views/elements/StyledCheckbox.tsx

@@ -6,27 +6,47 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { PropsWithChildren, useId, type ReactNode, type Ref } from "react";
+import React, { useId, type ReactNode, type Ref } from "react";
 import { secureRandomString } from "matrix-js-sdk/src/randomstring";
 import { CheckboxInput, Form, HelpMessage, InlineField, Label } from "@vector-im/compound-web";
 
 interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
     inputRef?: Ref<HTMLInputElement>;
     id?: string;
-    description?: ReactNode,
+    description?: ReactNode;
 }
 
 /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
-export default function StyledCheckbox({id: initialId, children: label, className, inputRef, description, ...otherProps}: PropsWithChildren<IProps>) {
-        const id = initialId || "checkbox_" + secureRandomString(10);
-        const name = useId();
-        const descriptionId = useId();
-        return <Form.Root>
-            <InlineField className={className} name={name} control={
-                    <CheckboxInput ref={inputRef} aria-describedby={description ? descriptionId : undefined} id={id} {...otherProps}/>
-                }>
+const StyledCheckbox: React.FC<IProps> = ({
+    id: initialId,
+    children: label,
+    className,
+    inputRef,
+    description,
+    ...otherProps
+}) => {
+    const id = initialId || "checkbox_" + secureRandomString(10);
+    const name = useId();
+    const descriptionId = useId();
+    return (
+        <Form.Root>
+            <InlineField
+                className={className}
+                name={name}
+                control={
+                    <CheckboxInput
+                        ref={inputRef}
+                        aria-describedby={description ? descriptionId : undefined}
+                        id={id}
+                        {...otherProps}
+                    />
+                }
+            >
                 {label && <Label htmlFor={id}>{label}</Label>}
                 {description && <HelpMessage id={descriptionId}>{description}</HelpMessage>}
             </InlineField>
-        </Form.Root>;
-}
+        </Form.Root>
+    );
+};
+
+export default StyledCheckbox;

src/components/views/settings/devices/SelectableDeviceTile.tsx

@@ -20,7 +20,7 @@ interface Props extends DeviceTileProps {
 const SelectableDeviceTile: React.FC<Props> = ({ children, device, isSelected, onSelect, onClick }) => {
     return (
         <div className="mx_SelectableDeviceTile">
-                        {/* hs-a11y-todo */}
+            {/* hs-a11y-todo */}
             <StyledCheckbox
                 checked={isSelected}
                 onChange={onSelect}

src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx

@@ -139,7 +139,7 @@ const SidebarUserSettingsTab: React.FC = () => {
                         className="mx_SidebarUserSettingsTab_checkbox"
                         description={_t("settings|sidebar|metaspaces_orphans_description")}
                     >
-                            {_t("settings|sidebar|metaspaces_orphans")}
+                        {_t("settings|sidebar|metaspaces_orphans")}
                     </StyledCheckbox>
                     {SettingsStore.getValue("feature_video_rooms") && (
                         <StyledCheckbox