Accessibility improvements in settings (#32968)

* Add more playwright axe tests to settings dialogs

* Fix axe issue heading-order

* Fix heading order

* Iterate

* Update snapshots

* Iterate

* Update snapshots

* Iterate

* Update screenshot

* Iterate

* Iterate

* Update snapshot

apps/web/playwright/e2e/settings/account-user-settings-tab.spec.ts

@@ -24,7 +24,7 @@ test.describe("Account user settings tab", () => {
         },
     });
 
-    test("should be rendered properly", { tag: "@screenshot" }, async ({ uut, user }) => {
+    test("should be rendered properly", { tag: "@screenshot" }, async ({ uut, user, axe }) => {
         await expect(uut).toMatchScreenshot("account.png");
 
         // Assert that the top heading is rendered
@@ -70,6 +70,8 @@ test.describe("Account user settings tab", () => {
         await expect(accountManagementSection.getByRole("button", { name: "Deactivate Account" })).toHaveClass(
             /mx_AccessibleButton_kind_danger/,
         );
+
+        await expect(axe).toHaveNoViolations();
     });
 
     test("should respond to small screen sizes", { tag: "@screenshot" }, async ({ page, uut }) => {

apps/web/playwright/e2e/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts

@@ -13,7 +13,7 @@ test.describe("Appearance user settings tab", () => {
         displayName: "Hanako",
     });
 
-    test("should be rendered properly", { tag: "@screenshot" }, async ({ page, user, app }) => {
+    test("should be rendered properly", { tag: "@screenshot" }, async ({ page, user, app, axe }) => {
         const tab = await app.settings.openUserSettings("Appearance");
 
         // Click "Show advanced" link button
@@ -23,6 +23,8 @@ test.describe("Appearance user settings tab", () => {
         await expect(tab.getByRole("button", { name: "Hide advanced" })).toBeVisible();
 
         await expect(tab).toMatchScreenshot("appearance-tab.png");
+
+        await expect(axe).toHaveNoViolations();
     });
 
     test(

apps/web/playwright/e2e/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts

@@ -23,7 +23,7 @@ test.describe("Appearance user settings tab", () => {
         test(
             "should be rendered with the light theme selected",
             { tag: "@screenshot" },
-            async ({ page, app, util }) => {
+            async ({ page, app, util, axe }) => {
                 // Assert that 'Match system theme' is not checked
                 await expect(util.getMatchSystemThemeSwitch()).not.toBeChecked();
 
@@ -34,6 +34,8 @@ test.describe("Appearance user settings tab", () => {
                 await expect(util.getHighContrastTheme()).not.toBeChecked();
 
                 await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-light.png");
+
+                await expect(axe).toHaveNoViolations();
             },
         );
 

apps/web/playwright/e2e/settings/device-management.spec.ts

@@ -23,7 +23,7 @@ test.describe("Device manager", () => {
         }
     });
 
-    test("should display sessions", async ({ page, app }) => {
+    test("should display sessions", async ({ page, app, axe }) => {
         await app.settings.openUserSettings("Sessions");
         const tab = page.locator(".mx_SettingsTab");
 
@@ -85,7 +85,7 @@ test.describe("Device manager", () => {
         // session name updated in details
         await expect(firstSession.locator(".mx_DeviceDetailHeading h4").getByText(sessionName)).toBeVisible();
         // and main list item
-        await expect(firstSession.locator(".mx_DeviceTile h4").getByText(sessionName)).toBeVisible();
+        await expect(firstSession.locator(".mx_DeviceTile h3").getByText(sessionName)).toBeVisible();
 
         // sign out using the device details sign out
         await firstSession.getByRole("button", { name: "Remove this session" }).click();
@@ -96,5 +96,7 @@ test.describe("Device manager", () => {
         // no other sessions or security recommendations sections when only one session
         await expect(tab.getByText("Other sessions")).not.toBeVisible();
         await expect(tab.getByTestId("security-recommendations-section")).not.toBeVisible();
+
+        await expect(axe).toHaveNoViolations();
     });
 });

apps/web/playwright/e2e/settings/encryption-user-tab/advanced.spec.ts

@@ -16,7 +16,7 @@ test.describe("Advanced section in Encryption tab", () => {
         await bootstrapCrossSigningForClient(clientHandle, credentials, true);
     });
 
-    test("should show the encryption details", { tag: "@screenshot" }, async ({ page, app, util }) => {
+    test("should show the encryption details", { tag: "@screenshot" }, async ({ page, app, util, axe }) => {
         await util.openEncryptionTab();
         const section = util.getEncryptionDetailsSection();
 
@@ -26,6 +26,8 @@ test.describe("Advanced section in Encryption tab", () => {
         await expect(section).toMatchScreenshot("encryption-details.png", {
             mask: [section.getByTestId("deviceId"), section.getByTestId("sessionKey")],
         });
+
+        await expect(axe).toHaveNoViolations();
     });
 
     test("should show the import room keys dialog", async ({ page, app, util }) => {

apps/web/playwright/e2e/settings/general-room-settings-tab.spec.ts

@@ -20,7 +20,7 @@ test.describe("General room settings tab", () => {
         await app.viewRoomByName(roomName);
     });
 
-    test("should be rendered properly", { tag: "@screenshot" }, async ({ page, app }) => {
+    test("should be rendered properly", { tag: "@screenshot" }, async ({ page, app, axe }) => {
         const settings = await app.settings.openRoomSettings("General");
 
         // Assert that "Show less" details element is rendered
@@ -34,6 +34,9 @@ test.describe("General room settings tab", () => {
         // Assert that "Show more" details element is rendered instead of "Show more"
         await expect(settings.getByText("Show less")).not.toBeVisible();
         await expect(settings.getByText("Show more")).toBeVisible();
+
+        axe.disableRules("color-contrast"); // XXX: We have some known contrast issues here
+        await expect(axe).toHaveNoViolations();
     });
 
     test("long address should not cause dialog to overflow", { tag: "@no-webkit" }, async ({ page, app, user }) => {

apps/web/playwright/e2e/settings/preferences-user-settings-tab.spec.ts

@@ -25,7 +25,7 @@ test.describe("Preferences user settings tab", () => {
         labsFlags: ["feature_new_room_list"],
     });
 
-    test("should be rendered properly", { tag: "@screenshot" }, async ({ app, page, user }) => {
+    test("should be rendered properly", { tag: "@screenshot" }, async ({ app, page, user, axe }) => {
         await page.setViewportSize({ width: 1024, height: 4000 });
         const tab = await app.settings.openUserSettings("Preferences");
         // Assert that the top heading is rendered
@@ -39,6 +39,8 @@ test.describe("Preferences user settings tab", () => {
                 }
             `,
         });
+
+        await expect(axe).toHaveNoViolations();
     });
 
     test("should be able to change the app language", { tag: ["@no-firefox", "@no-webkit"] }, async ({ uut, user }) => {

apps/web/playwright/e2e/settings/quick-settings-menu.spec.ts

@@ -8,11 +8,13 @@ Please see LICENSE files in the repository root for full details.
 import { test, expect } from "../../element-web-test";
 
 test.describe("Quick settings menu", () => {
-    test("should be rendered properly", { tag: "@screenshot" }, async ({ app, page, user }) => {
+    test("should be rendered properly", { tag: "@screenshot" }, async ({ app, page, user, axe }) => {
         await page.getByRole("button", { name: "Quick settings" }).click();
         // Assert that the top heading is renderedc
         const settings = page.getByTestId("quick-settings-menu");
         await expect(settings).toBeVisible();
         await expect(settings).toMatchScreenshot("quick-settings.png");
+
+        await expect(axe).toHaveNoViolations();
     });
 });

apps/web/playwright/e2e/settings/room-settings/roles-permissions-room-settings-tab.spec.ts

@@ -25,7 +25,7 @@ test.describe("Roles & Permissions room settings tab", () => {
         settings = await app.settings.openRoomSettings("Roles & Permissions");
     });
 
-    test("should be able to change the role of a user", async ({ page, app, user }) => {
+    test("should be able to change the role of a user", async ({ page, app, user, axe }) => {
         const privilegedUserSection = settings.locator(".mx_SettingsFieldset").first();
         const applyButton = privilegedUserSection.getByRole("button", { name: "Apply" });
 
@@ -55,5 +55,7 @@ test.describe("Roles & Permissions room settings tab", () => {
         settings = await app.settings.openRoomSettings("Roles & Permissions");
         combobox = privilegedUserSection.getByRole("combobox", { name: user.userId });
         await expect(combobox).toHaveValue("50");
+
+        await expect(axe).toHaveNoViolations();
     });
 });

apps/web/playwright/e2e/settings/security-user-settings-tab.spec.ts

@@ -32,12 +32,14 @@ test.describe("Security user settings tab", () => {
         });
 
         test.describe("AnalyticsLearnMoreDialog", () => {
-            test("should be rendered properly", { tag: "@screenshot" }, async ({ app, page, user }) => {
+            test("should be rendered properly", { tag: "@screenshot" }, async ({ app, page, user, axe }) => {
                 const tab = await app.settings.openUserSettings("Security");
                 await tab.getByRole("button", { name: "Learn more" }).click();
                 await expect(page.locator(".mx_AnalyticsLearnMoreDialog_wrapper .mx_Dialog")).toMatchScreenshot(
                     "Security-user-settings-tab-with-posthog-enable-b5d89-csLearnMoreDialog-should-be-rendered-properly-1.png",
                 );
+
+                await expect(axe).toHaveNoViolations();
             });
         });
 

apps/web/res/css/views/settings/tabs/_SettingsSection.pcss

@@ -36,5 +36,5 @@ Please see LICENSE files in the repository root for full details.
     grid-template-columns: minmax(0, 1fr);
     gap: $spacing-32;
 
-    padding: $spacing-16 0;
+    margin: $spacing-16 0;
 }

apps/web/src/components/structures/ContextMenu.tsx

@@ -8,7 +8,15 @@ 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, { type JSX, type CSSProperties, type RefObject, type SyntheticEvent, useRef, useState } from "react";
+import React, {
+    type JSX,
+    type CSSProperties,
+    type RefObject,
+    type SyntheticEvent,
+    useRef,
+    useState,
+    type AriaRole,
+} from "react";
 import ReactDOM from "react-dom";
 import classNames from "classnames";
 import FocusLock from "react-focus-lock";
@@ -74,27 +82,31 @@ export interface MenuProps extends IPosition {
 
 export interface IProps extends MenuProps {
     // If true, insert an invisible screen-sized element behind the menu that when clicked will close it.
-    hasBackground?: boolean;
+    "hasBackground"?: boolean;
     // whether this context menu should be focus managed. If false it must handle itself
-    managed?: boolean;
+    "managed"?: boolean;
-    wrapperClassName?: string;
+    "wrapperClassName"?: string;
-    menuClassName?: string;
+    "menuClassName"?: string;
 
     // If true, this context menu will be mounted as a child to the parent container. Otherwise
     // it will be mounted to a container at the root of the DOM.
-    mountAsChild?: boolean;
+    "mountAsChild"?: boolean;
 
     // If specified, contents will be wrapped in a FocusLock, this is only needed if the context menu is being rendered
     // within an existing FocusLock e.g inside a modal.
-    focusLock?: boolean;
+    "focusLock"?: boolean;
 
     // call onFinished on any interaction with the menu
-    closeOnInteraction?: boolean;
+    "closeOnInteraction"?: boolean;
 
     // Function to be called on menu close
     onFinished(this: void): void;
     // on resize callback
     windowResize?(this: void): void;
+
+    // Role & label for accessibility
+    "role"?: AriaRole;
+    "aria-label"?: string;
 }
 
 interface IState {
@@ -257,9 +269,11 @@ export default class ContextMenu extends React.PureComponent<React.PropsWithChil
             focusLock,
             managed,
             wrapperClassName,
-            chevronFace: propsChevronFace,
+            "chevronFace": propsChevronFace,
-            chevronOffset: propsChevronOffset,
+            "chevronOffset": propsChevronOffset,
             mountAsChild,
+            role,
+            "aria-label": ariaLabel,
             ...props
         } = this.props;
 
@@ -424,6 +438,8 @@ export default class ContextMenu extends React.PureComponent<React.PropsWithChil
                         onClick={this.onClick}
                         onKeyDown={onKeyDownHandler}
                         onContextMenu={this.onContextMenuPreventBubbling}
+                        role={role}
+                        aria-label={ariaLabel}
                     >
                         {background}
                         <TooltipProvider>

apps/web/src/components/views/settings/SetIntegrationManager.tsx

@@ -76,8 +76,10 @@ export default class SetIntegrationManager extends React.Component<EmptyObject,
             >
                 <div className="mx_SettingsFlag">
                     <div className="mx_SetIntegrationManager_heading_manager">
-                        <Heading size="3">{_t("integration_manager|manage_title")}</Heading>
+                        <Heading as="h2" size="3">
-                        <Heading id="mx_SetIntegrationManager_ManagerName" size="4">
+                            {_t("integration_manager|manage_title")}
+                        </Heading>
+                        <Heading id="mx_SetIntegrationManager_ManagerName" as="h3" size="4">
                             {managerName}
                         </Heading>
                     </div>

apps/web/src/components/views/settings/SettingsHeader.tsx

@@ -13,6 +13,10 @@ import { Heading } from "@vector-im/compound-web";
  * The heading for a settings section.
  */
 interface SettingsHeaderProps {
+    /**
+     * The component to render the heading as, defaults to h2
+     */
+    as?: React.ComponentProps<typeof Heading>["as"];
     /**
      * Whether the user has a recommended tag.
      */
@@ -23,12 +27,12 @@ interface SettingsHeaderProps {
     label: string;
 }
 
-export function SettingsHeader({ hasRecommendedTag = false, label }: SettingsHeaderProps): JSX.Element {
+export function SettingsHeader({ hasRecommendedTag = false, label, as = "h2" }: SettingsHeaderProps): JSX.Element {
     const classes = classNames("mx_SettingsHeader", {
         mx_SettingsHeader_recommended: hasRecommendedTag,
     });
     return (
-        <Heading className={classes} as="h2" size="sm" weight="semibold">
+        <Heading className={classes} as={as} size="sm" weight="semibold">
             {label}
         </Heading>
     );

apps/web/src/components/views/settings/UserPersonalInfoSettings.tsx

@@ -18,7 +18,7 @@ import { type ThirdPartyIdentifier } from "../../../AddThreepid";
 import SettingsStore from "../../../settings/SettingsStore";
 import { UIFeature } from "../../../settings/UIFeature";
 import { AddRemoveThreepids } from "./AddRemoveThreepids";
-import Heading from "../typography/Heading.tsx";
+import { SettingsSection } from "./shared/SettingsSection.tsx";
 
 type LoadingState = "loading" | "loaded" | "error";
 
@@ -82,8 +82,7 @@ export const UserPersonalInfoSettings: React.FC<UserPersonalInfoSettingsProps> =
     if (!SettingsStore.getValue(UIFeature.ThirdPartyID)) return null;
 
     return (
-        <div className="mx_UserPersonalInfoSettings">
+        <SettingsSection heading={_t("settings|general|personal_info")} className="mx_UserPersonalInfoSettings">
-            <Heading size="2">{_t("settings|general|personal_info")}</Heading>
             <SettingsSubsection
                 heading={_t("settings|general|emails_heading")}
                 stretchContent
@@ -123,6 +122,6 @@ export const UserPersonalInfoSettings: React.FC<UserPersonalInfoSettingsProps> =
                     />
                 </ThreepidSectionWrapper>
             </SettingsSubsection>
-        </div>
+        </SettingsSection>
     );
 };

apps/web/src/components/views/settings/UserProfileSettings.tsx

@@ -27,7 +27,7 @@ import AccessibleButton from "../elements/AccessibleButton";
 import LogoutDialog, { shouldShowLogoutDialog } from "../dialogs/LogoutDialog";
 import Modal from "../../../Modal";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
-import Heading from "../typography/Heading.tsx";
+import { SettingsSection } from "./shared/SettingsSection.tsx";
 
 const SpinnerToast: React.FC<{ children?: ReactNode }> = ({ children }) => (
     <>
@@ -194,54 +194,55 @@ const UserProfileSettings: React.FC<UserProfileSettingsProps> = ({
     const someFieldsDisabled = !canSetDisplayName || !canSetAvatar;
 
     return (
-        <div className="mx_UserProfileSettings">
+        <SettingsSection heading={_t("common|profile")}>
-            <Heading size="2">{_t("common|profile")}</Heading>
+            <div className="mx_UserProfileSettings">
-            <div>
+                <div>
-                {someFieldsDisabled
+                    {someFieldsDisabled
-                    ? _t("settings|general|profile_subtitle_oidc")
+                        ? _t("settings|general|profile_subtitle_oidc")
-                    : _t("settings|general|profile_subtitle")}
+                        : _t("settings|general|profile_subtitle")}
-            </div>
+                </div>
-            <div className="mx_UserProfileSettings_profile">
+                <div className="mx_UserProfileSettings_profile">
-                <AvatarSetting
+                    <AvatarSetting
-                    avatar={avatarURL ?? undefined}
+                        avatar={avatarURL ?? undefined}
-                    avatarAccessibleName={_t("common|user_avatar")}
+                        avatarAccessibleName={_t("common|user_avatar")}
-                    onChange={onAvatarChange}
+                        onChange={onAvatarChange}
-                    removeAvatar={avatarURL ? onAvatarRemove : undefined}
+                        removeAvatar={avatarURL ? onAvatarRemove : undefined}
-                    placeholderName={displayName}
+                        placeholderName={displayName}
-                    placeholderId={client.getUserId() ?? ""}
+                        placeholderId={client.getUserId() ?? ""}
-                    disabled={!canSetAvatar}
+                        disabled={!canSetAvatar}
-                />
+                    />
-                <EditInPlace
+                    <EditInPlace
-                    className="mx_UserProfileSettings_profile_displayName"
+                        className="mx_UserProfileSettings_profile_displayName"
-                    label={_t("settings|general|display_name")}
+                        label={_t("settings|general|display_name")}
-                    value={displayName}
+                        value={displayName}
-                    saveButtonLabel={_t("common|save")}
+                        saveButtonLabel={_t("common|save")}
-                    cancelButtonLabel={_t("common|cancel")}
+                        cancelButtonLabel={_t("common|cancel")}
-                    savedLabel={_t("common|saved")}
+                        savedLabel={_t("common|saved")}
-                    savingLabel={_t("common|updating")}
+                        savingLabel={_t("common|updating")}
-                    onChange={onDisplayNameChanged}
+                        onChange={onDisplayNameChanged}
-                    onCancel={onDisplayNameCancel}
+                        onCancel={onDisplayNameCancel}
-                    onSave={onDisplayNameSave}
+                        onSave={onDisplayNameSave}
-                    disabled={!canSetDisplayName}
+                        disabled={!canSetDisplayName}
-                >
+                    >
-                    {displayNameError && <ErrorMessage>{_t("settings|general|display_name_error")}</ErrorMessage>}
+                        {displayNameError && <ErrorMessage>{_t("settings|general|display_name_error")}</ErrorMessage>}
-                </EditInPlace>
+                    </EditInPlace>
-            </div>
+                </div>
-            {avatarError && (
+                {avatarError && (
-                <Alert title={_t("settings|general|avatar_upload_error_title")} type="critical">
+                    <Alert title={_t("settings|general|avatar_upload_error_title")} type="critical">
-                    {maxUploadSize === undefined
+                        {maxUploadSize === undefined
-                        ? _t("settings|general|avatar_upload_error_text_generic")
+                            ? _t("settings|general|avatar_upload_error_text_generic")
-                        : _t("settings|general|avatar_upload_error_text", { size: formatBytes(maxUploadSize) })}
+                            : _t("settings|general|avatar_upload_error_text", { size: formatBytes(maxUploadSize) })}
-                </Alert>
+                    </Alert>
-            )}
-            {userIdentifier && <UsernameBox username={userIdentifier} />}
-            <Flex gap="var(--cpd-space-4x)" className="mx_UserProfileSettings_profile_buttons">
-                {externalAccountManagementUrl && (
-                    <ManageAccountButton externalAccountManagementUrl={externalAccountManagementUrl} />
                 )}
-                <SignOutButton />
+                {userIdentifier && <UsernameBox username={userIdentifier} />}
-            </Flex>
+                <Flex gap="var(--cpd-space-4x)" className="mx_UserProfileSettings_profile_buttons">
-        </div>
+                    {externalAccountManagementUrl && (
+                        <ManageAccountButton externalAccountManagementUrl={externalAccountManagementUrl} />
+                    )}
+                    <SignOutButton />
+                </Flex>
+            </div>
+        </SettingsSection>
     );
 };
 

apps/web/src/components/views/settings/devices/DeviceTile.tsx

@@ -22,7 +22,11 @@ export interface DeviceTileProps {
 }
 
 const DeviceTileName: React.FC<{ device: ExtendedDevice }> = ({ device }) => {
-    return <Heading size="4">{device.display_name || device.device_id}</Heading>;
+    return (
+        <Heading as="h3" size="4">
+            {device.display_name || device.device_id}
+        </Heading>
+    );
 };
 
 const DeviceTile: React.FC<DeviceTileProps> = ({ device, children, isSelected, onClick }) => {

apps/web/src/components/views/settings/encryption/KeyStoragePanel.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { useCallback } from "react";
-import { InlineField, InlineSpinner, Label, Root, ToggleControl } from "@vector-im/compound-web";
+import { InlineField, InlineSpinner, Label, Link, Root, ToggleControl } from "@vector-im/compound-web";
 
 import type { FormEvent } from "react";
 import { SettingsSection } from "../shared/SettingsSection";
@@ -56,9 +56,9 @@ export const KeyStoragePanel: React.FC<Props> = ({ onKeyStorageDisableClick }) =
             }
             subHeading={_t("settings|encryption|key_storage|description", undefined, {
                 a: (sub) => (
-                    <a href={SdkConfig.get("help_key_storage_url")} target="_blank" rel="noreferrer noopener">
+                    <Link href={SdkConfig.get("help_key_storage_url")} target="_blank">
                         {sub}
-                    </a>
+                    </Link>
                 ),
             })}
         >

apps/web/src/components/views/settings/shared/SettingsSection.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import classnames from "classnames";
-import React, { type HTMLAttributes } from "react";
+import React, { type ComponentProps, createContext, type HTMLAttributes, useContext } from "react";
 
 import Heading from "../../typography/Heading";
 import { SettingsHeader } from "../SettingsHeader";
@@ -19,15 +19,30 @@ export interface SettingsSectionProps extends HTMLAttributes<HTMLDivElement> {
     legacy?: boolean;
 }
 
-function renderHeading(heading: string | React.ReactNode | undefined, legacy: boolean): React.ReactNode | undefined {
+type HeadingLevel = 2 | 3 | 4 | 5 | 6;
+
+/**
+ * React context to correctly set heading levels in nested settings sections dynamically
+ */
+export const HeadingLevelContext = createContext<HeadingLevel>(2);
+
+function SectionHeading({
+    heading,
+    legacy,
+    level,
+}: {
+    heading: string | React.ReactNode | undefined;
+    legacy: boolean;
+    level: HeadingLevel;
+}): React.ReactNode | undefined {
     switch (typeof heading) {
         case "string":
             return legacy ? (
-                <Heading as="h2" size="3">
+                <Heading as={`h${level}`} size={(level + 1).toString() as ComponentProps<typeof Heading>["size"]}>
                     {heading}
                 </Heading>
             ) : (
-                <SettingsHeader label={heading} />
+                <SettingsHeader as={`h${level}`} label={heading} />
             );
         case "undefined":
             return undefined;
@@ -60,22 +75,28 @@ export const SettingsSection: React.FC<SettingsSectionProps> = ({
     legacy = true,
     children,
     ...rest
-}) => (
+}) => {
-    <div
+    const level = useContext(HeadingLevelContext);
-        {...rest}
+
-        className={classnames("mx_SettingsSection", className, {
+    return (
-            mx_SettingsSection_newUi: !legacy,
+        <div
-        })}
+            {...rest}
-    >
+            className={classnames("mx_SettingsSection", className, {
-        {heading &&
+                mx_SettingsSection_newUi: !legacy,
-            (subHeading ? (
+            })}
-                <div className="mx_SettingsSection_header">
+        >
-                    {renderHeading(heading, legacy)}
+            {heading &&
-                    {subHeading}
+                (subHeading ? (
-                </div>
+                    <div className="mx_SettingsSection_header">
-            ) : (
+                        <SectionHeading heading={heading} legacy={legacy} level={level} />
-                renderHeading(heading, legacy)
+                        {subHeading}
-            ))}
+                    </div>
-        {legacy ? <div className="mx_SettingsSection_subSections">{children}</div> : children}
+                ) : (
-    </div>
+                    <SectionHeading heading={heading} legacy={legacy} level={level} />
-);
+                ))}
+            <HeadingLevelContext.Provider value={heading ? ((level + 1) as HeadingLevel) : level}>
+                {legacy ? <div className="mx_SettingsSection_subSections">{children}</div> : children}
+            </HeadingLevelContext.Provider>
+        </div>
+    );
+};

apps/web/src/components/views/settings/shared/SettingsSubsection.tsx

@@ -7,10 +7,11 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import classNames from "classnames";
-import React, { type HTMLAttributes } from "react";
+import React, { type HTMLAttributes, useContext } from "react";
 import { Form, Separator } from "@vector-im/compound-web";
 
 import { SettingsSubsectionHeading } from "./SettingsSubsectionHeading";
+import { HeadingLevelContext } from "./SettingsSection.tsx";
 
 export interface SettingsSubsectionProps extends HTMLAttributes<HTMLDivElement> {
     heading?: string | React.ReactNode;
@@ -45,6 +46,8 @@ export const SettingsSubsection: React.FC<SettingsSubsectionProps> = ({
     formWrap,
     ...rest
 }) => {
+    const level = useContext(HeadingLevelContext);
+
     const content = (
         <div
             {...rest}
@@ -52,7 +55,11 @@ export const SettingsSubsection: React.FC<SettingsSubsectionProps> = ({
                 mx_SettingsSubsection_newUi: !legacy,
             })}
         >
-            {typeof heading === "string" ? <SettingsSubsectionHeading heading={heading} /> : <>{heading}</>}
+            {typeof heading === "string" ? (
+                <SettingsSubsectionHeading heading={heading} as={`h${level}`} />
+            ) : (
+                <>{heading}</>
+            )}
             {!!description && (
                 <div className="mx_SettingsSubsection_description">
                     <SettingsSubsectionText>{description}</SettingsSubsectionText>

apps/web/src/components/views/settings/shared/SettingsSubsectionHeading.tsx

@@ -18,7 +18,7 @@ export interface SettingsSubsectionHeadingProps extends HTMLAttributes<HTMLDivEl
 
 export const SettingsSubsectionHeading: React.FC<SettingsSubsectionHeadingProps> = ({
     heading,
-    as = "h3",
+    as = "h2",
     children,
     ...rest
 }) => {

apps/web/src/components/views/settings/tabs/user/AccountUserSettingsTab.tsx

@@ -45,7 +45,7 @@ const AccountSection: React.FC<AccountSectionProps> = ({
     if (!canChangePassword) return <></>;
 
     return (
-        <>
+        <SettingsSection>
             <SettingsSubsection
                 heading={_t("settings|general|account_section")}
                 stretchContent
@@ -59,7 +59,7 @@ const AccountSection: React.FC<AccountSectionProps> = ({
                     onFinished={onPasswordChanged}
                 />
             </SettingsSubsection>
-        </>
+        </SettingsSection>
     );
 };
 
@@ -179,21 +179,19 @@ const AccountUserSettingsTab: React.FC<IProps> = ({ closeSettingsFn }) => {
 
     return (
         <SettingsTab data-testid="mx_AccountUserSettingsTab">
-            <SettingsSection>
+            <UserProfileSettings
-                <UserProfileSettings
+                externalAccountManagementUrl={externalAccountManagementUrl}
-                    externalAccountManagementUrl={externalAccountManagementUrl}
+                canSetDisplayName={canSetDisplayName}
-                    canSetDisplayName={canSetDisplayName}
+                canSetAvatar={canSetAvatar}
-                    canSetAvatar={canSetAvatar}
+            />
-                />
+            {(!isAccountManagedExternally || canMake3pidChanges) && (
-                {(!isAccountManagedExternally || canMake3pidChanges) && (
+                <UserPersonalInfoSettings canMake3pidChanges={canMake3pidChanges} />
-                    <UserPersonalInfoSettings canMake3pidChanges={canMake3pidChanges} />
+            )}
-                )}
+            <AccountSection
-                <AccountSection
+                canChangePassword={canChangePassword}
-                    canChangePassword={canChangePassword}
+                onPasswordChanged={onPasswordChanged}
-                    onPasswordChanged={onPasswordChanged}
+                onPasswordChangeError={onPasswordChangeError}
-                    onPasswordChangeError={onPasswordChangeError}
+            />
-                />
-            </SettingsSection>
             {accountManagementSection}
         </SettingsTab>
     );

apps/web/src/components/views/spaces/QuickSettingsButton.tsx

@@ -58,6 +58,8 @@ const QuickSettingsButton: React.FC<{
                 onFinished={closeMenu}
                 managed={false}
                 focusLock={true}
+                role="region"
+                aria-label={_t("quick_settings|title")}
             >
                 <h2>{_t("quick_settings|title")}</h2>
 

apps/web/src/components/views/spaces/QuickThemeSwitcher.tsx

@@ -72,7 +72,7 @@ const QuickThemeSwitcher: React.FC<Props> = ({ requestClose }) => {
 
     return (
         <div className="mx_QuickThemeSwitcher">
-            <h4 className="mx_QuickThemeSwitcher_heading">{_t("common|theme")}</h4>
+            <h3 className="mx_QuickThemeSwitcher_heading">{_t("common|theme")}</h3>
             <Dropdown
                 id="mx_QuickSettingsButton_themePickerDropdown"
                 onOptionChange={onOptionChange}

apps/web/test/unit-tests/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap

@@ -9,11 +9,11 @@ exports[`FontScalingPanel renders the font scaling UI 1`] = `
     <div
       class="mx_SettingsSubsectionHeading"
     >
-      <h3
+      <h2
         class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
       >
         Font size
-      </h3>
+      </h2>
     </div>
     <div
       class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"

apps/web/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap

@@ -9,11 +9,11 @@ exports[`<LayoutSwitcher /> should render 1`] = `
     <div
       class="mx_SettingsSubsectionHeading"
     >
-      <h3
+      <h2
         class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
       >
         Message layout
-      </h3>
+      </h2>
     </div>
     <div
       class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"

apps/web/test/unit-tests/components/views/settings/__snapshots__/SetIntegrationManager-test.tsx.snap

@@ -11,17 +11,17 @@ exports[`SetIntegrationManager should render manage integrations sections 1`] =
     <div
       class="mx_SetIntegrationManager_heading_manager"
     >
-      <h3
+      <h2
         class="mx_Heading_h3"
       >
         Manage integrations
-      </h3>
+      </h2>
-      <h4
+      <h3
         class="mx_Heading_h4"
         id="mx_SetIntegrationManager_ManagerName"
       >
         (scalar.vector.im)
-      </h4>
+      </h3>
     </div>
   </div>
   <div

apps/web/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap

@@ -9,11 +9,11 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
     <div
       class="mx_SettingsSubsectionHeading"
     >
-      <h3
+      <h2
         class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
       >
         Theme
-      </h3>
+      </h2>
     </div>
     <div
       class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
@@ -288,11 +288,11 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
     <div
       class="mx_SettingsSubsectionHeading"
     >
-      <h3
+      <h2
         class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
       >
         Theme
-      </h3>
+      </h2>
     </div>
     <div
       class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
@@ -567,11 +567,11 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
     <div
       class="mx_SettingsSubsectionHeading"
     >
-      <h3
+      <h2
         class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
       >
         Theme
-      </h3>
+      </h2>
     </div>
     <div
       class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"

apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap

@@ -137,11 +137,11 @@ exports[`<CurrentDeviceSection /> handles when device is falsy 1`] = `
     <div
       class="mx_SettingsSubsectionHeading"
     >
-      <h3
+      <h2
         class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
       >
         Current session
-      </h3>
+      </h2>
       <div
         aria-disabled="true"
         aria-expanded="false"
@@ -183,11 +183,11 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
     <div
       class="mx_SettingsSubsectionHeading"
     >
-      <h3
+      <h2
         class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
       >
         Current session
-      </h3>
+      </h2>
       <div
         aria-expanded="false"
         aria-haspopup="true"
@@ -257,11 +257,11 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
         <div
           class="mx_DeviceTile_info"
         >
-          <h4
+          <h3
             class="mx_Heading_h4"
           >
             alices_device
-          </h4>
+          </h3>
           <div
             class="mx_DeviceTile_metadata"
           >
@@ -370,11 +370,11 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
     <div
       class="mx_SettingsSubsectionHeading"
     >
-      <h3
+      <h2
         class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
       >
         Current session
-      </h3>
+      </h2>
       <div
         aria-expanded="false"
         aria-haspopup="true"
@@ -444,11 +444,11 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
         <div
           class="mx_DeviceTile_info"
         >
-          <h4
+          <h3
             class="mx_Heading_h4"
           >
             alices_device
-          </h4>
+          </h3>
           <div
             class="mx_DeviceTile_metadata"
           >

apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/DeviceTile-test.tsx.snap

@@ -45,11 +45,11 @@ exports[`<DeviceTile /> renders a device with no metadata 1`] = `
     <div
       class="mx_DeviceTile_info"
     >
-      <h4
+      <h3
         class="mx_Heading_h4"
       >
         123
-      </h4>
+      </h3>
       <div
         class="mx_DeviceTile_metadata"
       >
@@ -118,11 +118,11 @@ exports[`<DeviceTile /> renders a verified device with no metadata 1`] = `
     <div
       class="mx_DeviceTile_info"
     >
-      <h4
+      <h3
         class="mx_Heading_h4"
       >
         123
-      </h4>
+      </h3>
       <div
         class="mx_DeviceTile_metadata"
       >
@@ -191,11 +191,11 @@ exports[`<DeviceTile /> renders display name with a tooltip 1`] = `
     <div
       class="mx_DeviceTile_info"
     >
-      <h4
+      <h3
         class="mx_Heading_h4"
       >
         My device
-      </h4>
+      </h3>
       <div
         class="mx_DeviceTile_metadata"
       >
@@ -264,11 +264,11 @@ exports[`<DeviceTile /> separates metadata with a dot 1`] = `
     <div
       class="mx_DeviceTile_info"
     >
-      <h4
+      <h3
         class="mx_Heading_h4"
       >
         123
-      </h4>
+      </h3>
       <div
         class="mx_DeviceTile_metadata"
       >

apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap

@@ -9,11 +9,11 @@ exports[`<SecurityRecommendations /> renders both cards when user has both unver
     <div
       class="mx_SettingsSubsectionHeading"
     >
-      <h3
+      <h2
         class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
       >
         Security recommendations
-      </h3>
+      </h2>
     </div>
     <div
       class="mx_SettingsSubsection_description"
@@ -141,11 +141,11 @@ exports[`<SecurityRecommendations /> renders inactive devices section when user
     <div
       class="mx_SettingsSubsectionHeading"
     >
-      <h3
+      <h2
         class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
       >
         Security recommendations
-      </h3>
+      </h2>
     </div>
     <div
       class="mx_SettingsSubsection_description"
@@ -273,11 +273,11 @@ exports[`<SecurityRecommendations /> renders unverified devices section when use
     <div
       class="mx_SettingsSubsectionHeading"
     >
-      <h3
+      <h2
         class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
       >
         Security recommendations
-      </h3>
+      </h2>
     </div>
     <div
       class="mx_SettingsSubsection_description"

apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap

@@ -101,11 +101,11 @@ exports[`<SelectableDeviceTile /> renders unselected device tile with checkbox 1
               <div
                 class="mx_DeviceTile_info"
               >
-                <h4
+                <h3
                   class="mx_Heading_h4"
                 >
                   My Device
-                </h4>
+                </h3>
                 <div
                   class="mx_DeviceTile_metadata"
                 >

apps/web/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap

@@ -948,11 +948,11 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
             <div
               class="mx_SettingsSubsectionHeading"
             >
-              <h3
+              <h2
                 class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
               >
                 Email summary
-              </h3>
+              </h2>
             </div>
             <div
               class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
@@ -998,11 +998,11 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
             <div
               class="mx_SettingsSubsectionHeading"
             >
-              <h3
+              <h2
                 class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
               >
                 Quick Actions
-              </h3>
+              </h2>
             </div>
             <div
               class="mx_SettingsSubsection_content"
@@ -2174,11 +2174,11 @@ exports[`<Notifications /> matches the snapshot 1`] = `
             <div
               class="mx_SettingsSubsectionHeading"
             >
-              <h3
+              <h2
                 class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
               >
                 Email summary
-              </h3>
+              </h2>
             </div>
             <div
               class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
@@ -2280,11 +2280,11 @@ exports[`<Notifications /> matches the snapshot 1`] = `
             <div
               class="mx_SettingsSubsectionHeading"
             >
-              <h3
+              <h2
                 class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
               >
                 Notification targets
-              </h3>
+              </h2>
             </div>
             <div
               class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
@@ -2308,11 +2308,11 @@ exports[`<Notifications /> matches the snapshot 1`] = `
             <div
               class="mx_SettingsSubsectionHeading"
             >
-              <h3
+              <h2
                 class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
               >
                 Quick Actions
-              </h3>
+              </h2>
             </div>
             <div
               class="mx_SettingsSubsection_content"

apps/web/test/unit-tests/components/views/settings/shared/__snapshots__/SettingsSubsection-test.tsx.snap

@@ -8,11 +8,11 @@ exports[`<SettingsSubsection /> renders with plain text description 1`] = `
     <div
       class="mx_SettingsSubsectionHeading"
     >
-      <h3
+      <h2
         class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
       >
         Test
-      </h3>
+      </h2>
     </div>
     <div
       class="mx_SettingsSubsection_description"
@@ -42,11 +42,11 @@ exports[`<SettingsSubsection /> renders with plain text heading 1`] = `
     <div
       class="mx_SettingsSubsectionHeading"
     >
-      <h3
+      <h2
         class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
       >
         Test
-      </h3>
+      </h2>
     </div>
     <div
       class="mx_SettingsSubsection_content"
@@ -67,11 +67,11 @@ exports[`<SettingsSubsection /> renders with react element description 1`] = `
     <div
       class="mx_SettingsSubsectionHeading"
     >
-      <h3
+      <h2
         class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
       >
         Test
-      </h3>
+      </h2>
     </div>
     <div
       class="mx_SettingsSubsection_description"
@@ -127,11 +127,11 @@ exports[`<SettingsSubsection /> renders without description 1`] = `
     <div
       class="mx_SettingsSubsectionHeading"
     >
-      <h3
+      <h2
         class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
       >
         Test
-      </h3>
+      </h2>
     </div>
     <div
       class="mx_SettingsSubsection_content"

apps/web/test/unit-tests/components/views/settings/shared/__snapshots__/SettingsSubsectionHeading-test.tsx.snap

@@ -6,11 +6,11 @@ exports[`<SettingsSubsectionHeading /> renders with children 1`] = `
     <div
       class="mx_SettingsSubsectionHeading"
     >
-      <h3
+      <h2
         class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
       >
         test
-      </h3>
+      </h2>
       <a
         href="/#"
       >
@@ -27,11 +27,11 @@ exports[`<SettingsSubsectionHeading /> renders without children 1`] = `
     <div
       class="mx_SettingsSubsectionHeading"
     >
-      <h3
+      <h2
         class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
       >
         test
-      </h3>
+      </h2>
     </div>
   </div>,
 }

apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap

@@ -22,11 +22,11 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
             <div
               class="mx_SettingsSubsectionHeading"
             >
-              <h3
+              <h2
                 class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
               >
                 Theme
-              </h3>
+              </h2>
             </div>
             <div
               class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
@@ -152,11 +152,11 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
             <div
               class="mx_SettingsSubsectionHeading"
             >
-              <h3
+              <h2
                 class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
               >
                 Message layout
-              </h3>
+              </h2>
             </div>
             <div
               class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
@@ -510,11 +510,11 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
             <div
               class="mx_SettingsSubsectionHeading"
             >
-              <h3
+              <h2
                 class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
               >
                 Font size
-              </h3>
+              </h2>
             </div>
             <div
               class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
@@ -692,11 +692,11 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
             <div
               class="mx_SettingsSubsectionHeading"
             >
-              <h3
+              <h2
                 class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
               >
                 Image size in the timeline
-              </h3>
+              </h2>
             </div>
             <div
               class="mx_SettingsSubsection_content"

apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/KeyboardUserSettingsTab-test.tsx.snap

@@ -20,11 +20,11 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
             <div
               class="mx_SettingsSubsectionHeading"
             >
-              <h3
+              <h2
                 class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
               >
                 Composer
-              </h3>
+              </h2>
             </div>
             <div
               class="mx_SettingsSubsection_content"
@@ -381,11 +381,11 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
             <div
               class="mx_SettingsSubsectionHeading"
             >
-              <h3
+              <h2
                 class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
               >
                 Calls
-              </h3>
+              </h2>
             </div>
             <div
               class="mx_SettingsSubsection_content"
@@ -442,11 +442,11 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
             <div
               class="mx_SettingsSubsectionHeading"
             >
-              <h3
+              <h2
                 class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
               >
                 Room
-              </h3>
+              </h2>
             </div>
             <div
               class="mx_SettingsSubsection_content"
@@ -611,11 +611,11 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
             <div
               class="mx_SettingsSubsectionHeading"
             >
-              <h3
+              <h2
                 class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
               >
                 Room List
-              </h3>
+              </h2>
             </div>
             <div
               class="mx_SettingsSubsection_content"
@@ -702,11 +702,11 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
             <div
               class="mx_SettingsSubsectionHeading"
             >
-              <h3
+              <h2
                 class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
               >
                 Accessibility
-              </h3>
+              </h2>
             </div>
             <div
               class="mx_SettingsSubsection_content"
@@ -771,11 +771,11 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
             <div
               class="mx_SettingsSubsectionHeading"
             >
-              <h3
+              <h2
                 class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
               >
                 Navigation
-              </h3>
+              </h2>
             </div>
             <div
               class="mx_SettingsSubsection_content"
@@ -1062,11 +1062,11 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
             <div
               class="mx_SettingsSubsectionHeading"
             >
-              <h3
+              <h2
                 class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
               >
                 Autocomplete
-              </h3>
+              </h2>
             </div>
             <div
               class="mx_SettingsSubsection_content"

apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/MjolnirUserSettingsTab-test.tsx.snap

@@ -41,11 +41,11 @@ exports[`<MjolnirUserSettingsTab /> renders correctly when user has no ignored u
             <div
               class="mx_SettingsSubsectionHeading"
             >
-              <h3
+              <h2
                 class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
               >
                 Personal ban list
-              </h3>
+              </h2>
             </div>
             <div
               class="mx_SettingsSubsection_description"
@@ -97,11 +97,11 @@ exports[`<MjolnirUserSettingsTab /> renders correctly when user has no ignored u
             <div
               class="mx_SettingsSubsectionHeading"
             >
-              <h3
+              <h2
                 class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
               >
                 Subscribed lists
-              </h3>
+              </h2>
             </div>
             <div
               class="mx_SettingsSubsection_description"

apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap

@@ -24,11 +24,11 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               <div
                 class="mx_SettingsSubsectionHeading"
               >
-                <h3
+                <h2
                   class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
                 >
                   Language
-                </h3>
+                </h2>
               </div>
               <div
                 class="mx_SettingsSubsection_content"
@@ -77,11 +77,11 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               <div
                 class="mx_SettingsSubsectionHeading"
               >
-                <h3
+                <h2
                   class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
                 >
                   Room list
-                </h3>
+                </h2>
               </div>
               <div
                 class="mx_SettingsSubsection_content"
@@ -129,11 +129,11 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               <div
                 class="mx_SettingsSubsectionHeading"
               >
-                <h3
+                <h2
                   class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
                 >
                   Spaces
-                </h3>
+                </h2>
               </div>
               <div
                 class="mx_SettingsSubsection_content"
@@ -188,11 +188,11 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               <div
                 class="mx_SettingsSubsectionHeading"
               >
-                <h3
+                <h2
                   class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
                 >
                   Keyboard shortcuts
-                </h3>
+                </h2>
               </div>
               <div
                 class="mx_SettingsSubsection_description"
@@ -260,11 +260,11 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               <div
                 class="mx_SettingsSubsectionHeading"
               >
-                <h3
+                <h2
                   class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
                 >
                   Displaying time
-                </h3>
+                </h2>
               </div>
               <div
                 class="mx_SettingsSubsection_content"
@@ -421,11 +421,11 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               <div
                 class="mx_SettingsSubsectionHeading"
               >
-                <h3
+                <h2
                   class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
                 >
                   Presence
-                </h3>
+                </h2>
               </div>
               <div
                 class="mx_SettingsSubsection_description"
@@ -523,11 +523,11 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               <div
                 class="mx_SettingsSubsectionHeading"
               >
-                <h3
+                <h2
                   class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
                 >
                   Composer
-                </h3>
+                </h2>
               </div>
               <div
                 class="mx_SettingsSubsection_content"
@@ -784,11 +784,11 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               <div
                 class="mx_SettingsSubsectionHeading"
               >
-                <h3
+                <h2
                   class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
                 >
                   Code blocks
-                </h3>
+                </h2>
               </div>
               <div
                 class="mx_SettingsSubsection_content"
@@ -902,11 +902,11 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               <div
                 class="mx_SettingsSubsectionHeading"
               >
-                <h3
+                <h2
                   class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
                 >
                   Images, GIFs and videos
-                </h3>
+                </h2>
               </div>
               <div
                 class="mx_SettingsSubsection_content"
@@ -1020,11 +1020,11 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               <div
                 class="mx_SettingsSubsectionHeading"
               >
-                <h3
+                <h2
                   class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
                 >
                   Timeline
-                </h3>
+                </h2>
               </div>
               <div
                 class="mx_SettingsSubsection_content"
@@ -1401,11 +1401,11 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
             <div
               class="mx_SettingsSubsectionHeading"
             >
-              <h3
+              <h2
                 class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
               >
                 Moderation and safety
-              </h3>
+              </h2>
             </div>
             <div
               class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
@@ -1615,11 +1615,11 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               <div
                 class="mx_SettingsSubsectionHeading"
               >
-                <h3
+                <h2
                   class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
                 >
                   Room directory
-                </h3>
+                </h2>
               </div>
               <div
                 class="mx_SettingsSubsection_content"
@@ -1668,11 +1668,11 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               <div
                 class="mx_SettingsSubsectionHeading"
               >
-                <h3
+                <h2
                   class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
                 >
                   General
-                </h3>
+                </h2>
               </div>
               <div
                 class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"

apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap

@@ -44,17 +44,17 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
           <div
             class="mx_SetIntegrationManager_heading_manager"
           >
-            <h3
+            <h2
               class="mx_Heading_h3"
             >
               Manage integrations
-            </h3>
+            </h2>
-            <h4
+            <h3
               class="mx_Heading_h4"
               id="mx_SetIntegrationManager_ManagerName"
             >
               (scalar.vector.im)
-            </h4>
+            </h3>
           </div>
         </div>
         <div

apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap

@@ -83,11 +83,11 @@ exports[`<SessionManagerTab /> current session section renders current session s
   <div
     class="mx_SettingsSubsectionHeading"
   >
-    <h3
+    <h2
       class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
     >
       Current session
-    </h3>
+    </h2>
     <div
       aria-expanded="false"
       aria-haspopup="true"
@@ -159,11 +159,11 @@ exports[`<SessionManagerTab /> current session section renders current session s
       <div
         class="mx_DeviceTile_info"
       >
-        <h4
+        <h3
           class="mx_Heading_h4"
         >
           Alices device
-        </h4>
+        </h3>
         <div
           class="mx_DeviceTile_metadata"
         >
@@ -260,11 +260,11 @@ exports[`<SessionManagerTab /> current session section renders current session s
   <div
     class="mx_SettingsSubsectionHeading"
   >
-    <h3
+    <h2
       class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
     >
       Current session
-    </h3>
+    </h2>
     <div
       aria-expanded="false"
       aria-haspopup="true"
@@ -334,11 +334,11 @@ exports[`<SessionManagerTab /> current session section renders current session s
       <div
         class="mx_DeviceTile_info"
       >
-        <h4
+        <h3
           class="mx_Heading_h4"
         >
           Alices device
-        </h4>
+        </h3>
         <div
           class="mx_DeviceTile_metadata"
         >

apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap

@@ -20,11 +20,11 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
             <div
               class="mx_SettingsSubsectionHeading"
             >
-              <h3
+              <h2
                 class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
               >
                 Spaces to show
-              </h3>
+              </h2>
             </div>
             <div
               class="mx_SettingsSubsection_description"
@@ -310,11 +310,11 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
             <div
               class="mx_SettingsSubsectionHeading"
             >
-              <h3
+              <h2
                 class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
               >
                 Spaces to show
-              </h3>
+              </h2>
             </div>
             <div
               class="mx_SettingsSubsection_description"

apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap

@@ -173,11 +173,11 @@ exports[`<SpaceSettingsVisibilityTab /> for a public space renders addresses sec
             <div
               class="mx_SettingsSection"
             >
-              <h2
+              <h3
-                class="mx_Heading_h3"
+                class="mx_Heading_h4"
               >
                 Address
-              </h2>
+              </h3>
               <div
                 class="mx_SettingsSection_subSections"
               >