From f186328a33a6b4147bcba8f475c8e835a29d8963 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 10 Aug 2022 14:08:47 +0100
Subject: [PATCH 1/7] Fix space panel subspace indentation going missing

---
 res/css/structures/_SpacePanel.pcss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/res/css/structures/_SpacePanel.pcss b/res/css/structures/_SpacePanel.pcss
index 72dbddf75e1..6517aec5e10 100644
--- a/res/css/structures/_SpacePanel.pcss
+++ b/res/css/structures/_SpacePanel.pcss
@@ -286,6 +286,11 @@ $activeBorderColor: $primary-content;
                 visibility: hidden;
             }
         }
+
+        .mx_SpaceTreeLevel {
+            // Indent subspaces
+            padding-left: 16px;
+        }
     }
 
     .mx_SpaceButton_avatarWrapper {

From 7a29ad2cf52d0f10f743d6f32dd5a5b963934965 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 10 Aug 2022 14:15:13 +0100
Subject: [PATCH 2/7] Add cypress test around subspaces in space panel

---
 cypress/e2e/spaces/spaces.spec.ts | 32 +++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/cypress/e2e/spaces/spaces.spec.ts b/cypress/e2e/spaces/spaces.spec.ts
index 0a8212ab8dd..0c4cc2357dd 100644
--- a/cypress/e2e/spaces/spaces.spec.ts
+++ b/cypress/e2e/spaces/spaces.spec.ts
@@ -237,4 +237,36 @@ 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");
+
+        cy.checkA11y();
+        cy.get(".mx_SpacePanel").percySnapshotElement("Space panel collapsed", { widths: [68] });
+
+        cy.get(".mx_SpacePanel_toggleCollapse").click({ force: true }); // button shows only on hover
+        cy.get(".mx_SpacePanel:not(.collapsed)").should("exist");
+
+        cy.contains(".mx_SpaceButton", "Root Space").should("exist")
+            .contains(".mx_SpaceButton", "Child Space").should("exist");
+
+        cy.checkA11y();
+        cy.get(".mx_SpacePanel").invoke("width").then(width => {
+            cy.get(".mx_SpacePanel").percySnapshotElement("Space panel expanded", { widths: [width] });
+        });
+    });
 });

From a95f2de066e359f380abbcff00cd254174e33d84 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 10 Aug 2022 14:15:39 +0100
Subject: [PATCH 3/7] Add cypress test around subspaces in space panel

---
 cypress/e2e/spaces/spaces.spec.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/cypress/e2e/spaces/spaces.spec.ts b/cypress/e2e/spaces/spaces.spec.ts
index 0c4cc2357dd..1d31887b6e7 100644
--- a/cypress/e2e/spaces/spaces.spec.ts
+++ b/cypress/e2e/spaces/spaces.spec.ts
@@ -265,8 +265,6 @@ describe("Spaces", () => {
             .contains(".mx_SpaceButton", "Child Space").should("exist");
 
         cy.checkA11y();
-        cy.get(".mx_SpacePanel").invoke("width").then(width => {
-            cy.get(".mx_SpacePanel").percySnapshotElement("Space panel expanded", { widths: [width] });
-        });
+        cy.get(".mx_SpacePanel").percySnapshotElement("Space panel expanded", { widths: [258] });
     });
 });

From a667549c8e63e57042267fe29e73f40c42264ebb Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 10 Aug 2022 14:23:02 +0100
Subject: [PATCH 4/7] Fix bad selector

---
 cypress/e2e/spaces/spaces.spec.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/cypress/e2e/spaces/spaces.spec.ts b/cypress/e2e/spaces/spaces.spec.ts
index 1d31887b6e7..273138da70c 100644
--- a/cypress/e2e/spaces/spaces.spec.ts
+++ b/cypress/e2e/spaces/spaces.spec.ts
@@ -261,8 +261,8 @@ describe("Spaces", () => {
         cy.get(".mx_SpacePanel_toggleCollapse").click({ force: true }); // button shows only on hover
         cy.get(".mx_SpacePanel:not(.collapsed)").should("exist");
 
-        cy.contains(".mx_SpaceButton", "Root Space").should("exist")
-            .contains(".mx_SpaceButton", "Child Space").should("exist");
+        cy.contains(".mx_SpaceItem", "Root Space").should("exist")
+            .contains(".mx_SpaceItem", "Child Space").should("exist");
 
         cy.checkA11y();
         cy.get(".mx_SpacePanel").percySnapshotElement("Space panel expanded", { widths: [258] });

From 0f97c1d4afb21f289d52046e60364d1921d73459 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 10 Aug 2022 14:58:15 +0100
Subject: [PATCH 5/7] Fix aria axe violation heading-order

---
 res/css/structures/_HomePage.pcss      | 6 +++---
 src/components/structures/HomePage.tsx | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/res/css/structures/_HomePage.pcss b/res/css/structures/_HomePage.pcss
index 6bfabd9c87f..f35de9919ce 100644
--- a/res/css/structures/_HomePage.pcss
+++ b/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;
diff --git a/src/components/structures/HomePage.tsx b/src/components/structures/HomePage.tsx
index 613625ae702..6e57a49f693 100644
--- a/src/components/structures/HomePage.tsx
+++ b/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,7 +107,7 @@ 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>;
     }
 

From d1b8c2fc8f8d5aa655c9d4aab72e835bf1139bad Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 10 Aug 2022 15:29:59 +0100
Subject: [PATCH 6/7] Fix test

---
 cypress/e2e/spaces/spaces.spec.ts      | 16 ++++++++++++----
 src/components/structures/HomePage.tsx |  2 +-
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/cypress/e2e/spaces/spaces.spec.ts b/cypress/e2e/spaces/spaces.spec.ts
index 273138da70c..8242b3f006a 100644
--- a/cypress/e2e/spaces/spaces.spec.ts
+++ b/cypress/e2e/spaces/spaces.spec.ts
@@ -238,7 +238,7 @@ describe("Spaces", () => {
         });
     });
 
-    it("should render subspaces in the space panel only when expanded", () => {
+    it.only("should render subspaces in the space panel only when expanded", () => {
         cy.injectAxe();
 
         cy.createSpace({
@@ -255,16 +255,24 @@ describe("Spaces", () => {
         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");
 
-        cy.checkA11y();
+        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_SpacePanel_toggleCollapse").click({ force: true }); // button shows only on hover
+        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();
+        cy.checkA11y(undefined, axeOptions);
         cy.get(".mx_SpacePanel").percySnapshotElement("Space panel expanded", { widths: [258] });
     });
 });
diff --git a/src/components/structures/HomePage.tsx b/src/components/structures/HomePage.tsx
index 6e57a49f693..b2596cee435 100644
--- a/src/components/structures/HomePage.tsx
+++ b/src/components/structures/HomePage.tsx
@@ -111,7 +111,7 @@ const HomePage: React.FC<IProps> = ({ justRegistered = false }) => {
         </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">

From d65aa28b81c667753d53c9a7dc3868517a3f0bcb Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 10 Aug 2022 15:53:26 +0100
Subject: [PATCH 7/7] Remove it.only

---
 cypress/e2e/spaces/spaces.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/e2e/spaces/spaces.spec.ts b/cypress/e2e/spaces/spaces.spec.ts
index 8242b3f006a..e7767de9421 100644
--- a/cypress/e2e/spaces/spaces.spec.ts
+++ b/cypress/e2e/spaces/spaces.spec.ts
@@ -238,7 +238,7 @@ describe("Spaces", () => {
         });
     });
 
-    it.only("should render subspaces in the space panel only when expanded", () => {
+    it("should render subspaces in the space panel only when expanded", () => {
         cy.injectAxe();
 
         cy.createSpace({