PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix space panel subspace indentation going missing (#9167)

Browse source 
* 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
This commit is contained in:
Michael Telatynski 2022-08-10 16:29:53 +01:00 committed by GitHub
parent df016ff5f6
commit 4e30d3c0fc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 49 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
cypress/e2e/spaces/spaces.spec.ts
View file

@ -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] });
});
});

6
res/css/structures/_HomePage.pcss
View file

@ -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;

5
res/css/structures/_SpacePanel.pcss
View file

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

6
src/components/structures/HomePage.tsx
View file

@ -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">