Fix space panel subspace indentation going missing (#9167)

* Fix space panel subspace indentation going missing

* Add cypress test around subspaces in space panel

* Add cypress test around subspaces in space panel

* Fix bad selector

* Fix aria axe violation heading-order

* Fix test

* Remove it.only

cypress/e2e/spaces/spaces.spec.ts

@@ -237,4 +237,42 @@ describe("Spaces", () => {
             cy.contains(".mx_SpaceHierarchy_roomTile", "Gaming").should("exist");
         });
     });
+
+    it("should render subspaces in the space panel only when expanded", () => {
+        cy.injectAxe();
+
+        cy.createSpace({
+            name: "Child Space",
+            initial_state: [],
+        }).then(spaceId => {
+            cy.createSpace({
+                name: "Root Space",
+                initial_state: [
+                    spaceChildInitialState(spaceId),
+                ],
+            }).as("spaceId");
+        });
+        cy.get('.mx_SpacePanel .mx_SpaceButton[aria-label="Root Space"]').should("exist");
+        cy.get('.mx_SpacePanel .mx_SpaceButton[aria-label="Child Space"]').should("not.exist");
+
+        const axeOptions = {
+            rules: {
+                // Disable this check as it triggers on nested roving tab index elements which are in practice fine
+                'nested-interactive': {
+                    enabled: false,
+                },
+            },
+        };
+        cy.checkA11y(undefined, axeOptions);
+        cy.get(".mx_SpacePanel").percySnapshotElement("Space panel collapsed", { widths: [68] });
+
+        cy.get(".mx_SpaceButton_toggleCollapse").click({ force: true });
+        cy.get(".mx_SpacePanel:not(.collapsed)").should("exist");
+
+        cy.contains(".mx_SpaceItem", "Root Space").should("exist")
+            .contains(".mx_SpaceItem", "Child Space").should("exist");
+
+        cy.checkA11y(undefined, axeOptions);
+        cy.get(".mx_SpacePanel").percySnapshotElement("Space panel expanded", { widths: [258] });
+    });
 });

res/css/structures/_HomePage.pcss

@@ -37,15 +37,15 @@ limitations under the License.
     }
 
     h1 {
-        font-weight: 600;
+        font-weight: $font-semi-bold;
         font-size: $font-32px;
         line-height: $font-44px;
         margin-bottom: 4px;
     }
 
-    h4 {
+    h2 {
         margin-top: 4px;
-        font-weight: 600;
+        font-weight: $font-semi-bold;
         font-size: $font-18px;
         line-height: $font-25px;
         color: $muted-fg-color;

res/css/structures/_SpacePanel.pcss

@@ -286,6 +286,11 @@ $activeBorderColor: $primary-content;
                 visibility: hidden;
             }
         }
+
+        .mx_SpaceTreeLevel {
+            // Indent subspaces
+            padding-left: 16px;
+        }
     }
 
     .mx_SpaceButton_avatarWrapper {

src/components/structures/HomePage.tsx

@@ -85,7 +85,7 @@ const UserWelcomeTop = () => {
         </MiniAvatarUploader>
 
         <h1>{ _tDom("Welcome %(name)s", { name: ownProfile.displayName }) }</h1>
-        <h4>{ _tDom("Now, let's help you get started") }</h4>
+        <h2>{ _tDom("Now, let's help you get started") }</h2>
     </div>;
 };
 
@@ -107,11 +107,11 @@ const HomePage: React.FC<IProps> = ({ justRegistered = false }) => {
         introSection = <React.Fragment>
             <img src={logoUrl} alt={config.brand} />
             <h1>{ _tDom("Welcome to %(appName)s", { appName: config.brand }) }</h1>
-            <h4>{ _tDom("Own your conversations.") }</h4>
+            <h2>{ _tDom("Own your conversations.") }</h2>
         </React.Fragment>;
     }
 
-    return <AutoHideScrollbar className="mx_HomePage mx_HomePage_default">
+    return <AutoHideScrollbar className="mx_HomePage mx_HomePage_default" element="main">
         <div className="mx_HomePage_default_wrapper">
             { introSection }
             <div className="mx_HomePage_default_buttons">