Use EditInPlace control for Identity Server picker to improve a11y (#…

…29280) * Use EditInPlace for identity server picker. * Exclude picker from default dialog button styles. * Remove unused import. * Update test * Remove unused css * Update test * drop only * Add a test for setting an ID server. * Add a unit test for SetIdServer * fix tests * Reformat mx_Dialog button :not list to use a more readable selector. * Reformat other :not sections * forgot a comma * We're in 2025 now. * Update copyright + use class methods.
element-hq · Feb 21, 2025 · 22943ee · 22943ee
1 parent 2e1798e
commit 22943ee
Show file tree

Hide file tree

Showing 9 changed files with 309 additions and 129 deletions.
diff --git a/playwright/e2e/settings/security-user-settings-tab.spec.ts b/playwright/e2e/settings/security-user-settings-tab.spec.ts
@@ -32,7 +32,7 @@ test.describe("Security user settings tab", () => {
         });
 
         test.describe("AnalyticsLearnMoreDialog", () => {
-            test("should be rendered properly", { tag: "@screenshot" }, async ({ app, page }) => {
+            test("should be rendered properly", { tag: "@screenshot" }, async ({ app, page, user }) => {
                 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(
@@ -41,16 +41,57 @@ test.describe("Security user settings tab", () => {
             });
         });
 
-        test("should contain section to set ID server", async ({ app }) => {
+        test("should be able to set an ID server", async ({ app, context, user, page }) => {
             const tab = await app.settings.openUserSettings("Security");
 
-            const setIdServer = tab.locator(".mx_SetIdServer");
+            await context.route("https://identity.example.org/_matrix/identity/v2", async (route) => {
+                await route.fulfill({
+                    status: 200,
+                    json: {},
+                });
+            });
+            await context.route("https://identity.example.org/_matrix/identity/v2/account/register", async (route) => {
+                await route.fulfill({
+                    status: 200,
+                    json: {
+                        token: "AToken",
+                    },
+                });
+            });
+            await context.route("https://identity.example.org/_matrix/identity/v2/account", async (route) => {
+                await route.fulfill({
+                    status: 200,
+                    json: {
+                        user_id: user.userId,
+                    },
+                });
+            });
+            await context.route("https://identity.example.org/_matrix/identity/v2/terms", async (route) => {
+                await route.fulfill({
+                    status: 200,
+                    json: {
+                        policies: {},
+                    },
+                });
+            });
+            const setIdServer = tab.locator(".mx_IdentityServerPicker");
             await setIdServer.scrollIntoViewIfNeeded();
-            // Assert that an input area for identity server exists
-            await expect(setIdServer.getByRole("textbox", { name: "Enter a new identity server" })).toBeVisible();
+
+            const textElement = setIdServer.getByRole("textbox", { name: "Enter a new identity server" });
+            await textElement.click();
+            await textElement.fill("https://identity.example.org");
+            await setIdServer.getByRole("button", { name: "Change" }).click();
+
+            await expect(setIdServer.getByText("Checking server")).toBeVisible();
+            // Accept terms
+            await page.getByTestId("dialog-primary-button").click();
+            // Check identity has changed.
+            await expect(setIdServer.getByText("Your identity server has been changed")).toBeVisible();
+            // Ensure section title is updated.
+            await expect(tab.getByText(`Identity server (identity.example.org)`, { exact: true })).toBeVisible();
         });
 
-        test("should enable show integrations as enabled", async ({ app, page }) => {
+        test("should enable show integrations as enabled", async ({ app, page, user }) => {
             const tab = await app.settings.openUserSettings("Security");
 
             const setIntegrationManager = tab.locator(".mx_SetIntegrationManager");

diff --git a/res/css/_common.pcss b/res/css/_common.pcss
@@ -589,18 +589,21 @@ legend {
  * in the app look the same by being AccessibleButtons, or possibly by having explict button classes.
  * We should go through and have one consistent set of styles for buttons throughout the app.
  * For now, I am duplicating the selectors here for mx_Dialog and mx_DialogButtons.
- *
- * Elements that should not be styled like a dialog button are mentioned in a :not() pseudo-class.
- * For the widest browser support, we use multiple :not pseudo-classes instead of :not(.a, .b).
  */
 .mx_Dialog
-    button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
-        .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(
-        .mx_EncryptionUserSettingsTab button
+    button:not(
+        .mx_EncryptionUserSettingsTab button,
+        .mx_UserProfileSettings button,
+        .mx_ShareDialog button,
+        .mx_UnpinAllDialog button,
+        .mx_ThemeChoicePanel_CustomTheme button,
+        .mx_Dialog_nonDialogButton,
+        .mx_AccessibleButton,
+        .mx_IdentityServerPicker button,
+        [class|="maplibregl"]
     ),
+.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton),
 .mx_Dialog input[type="submit"],
-.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
 .mx_Dialog_buttons input[type="submit"] {
     @mixin mx_DialogButton;
     margin-left: 0px;
@@ -616,32 +619,46 @@ legend {
 }
 
 .mx_Dialog
-    button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
-        .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(
+    button:not(
+        .mx_Dialog_nonDialogButton,
+        [class|="maplibregl"],
+        .mx_AccessibleButton,
+        .mx_UserProfileSettings button,
+        .mx_ThemeChoicePanel_CustomTheme button,
+        .mx_UnpinAllDialog button,
+        .mx_ShareDialog button,
         .mx_EncryptionUserSettingsTab button
     ):last-child {
     margin-right: 0px;
 }
 
 .mx_Dialog
-    button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
-        .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(
+    button:not(
+        .mx_Dialog_nonDialogButton,
+        [class|="maplibregl"],
+        .mx_AccessibleButton,
+        .mx_UserProfileSettings button,
+        .mx_ThemeChoicePanel_CustomTheme button,
+        .mx_UnpinAllDialog button,
+        .mx_ShareDialog button,
         .mx_EncryptionUserSettingsTab button
     ):focus,
 .mx_Dialog input[type="submit"]:focus,
-.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):focus,
+.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton):focus,
 .mx_Dialog_buttons input[type="submit"]:focus {
     filter: brightness($focus-brightness);
 }
 
-.mx_Dialog button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]),
+.mx_Dialog button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton, [class|="maplibregl"]),
 .mx_Dialog input[type="submit"].mx_Dialog_primary,
 .mx_Dialog_buttons
-    button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(
-        .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(
+    button:not(
+        .mx_Dialog_nonDialogButton,
+        .mx_AccessibleButton,
+        .mx_UserProfileSettings button,
+        .mx_ThemeChoicePanel_CustomTheme button,
+        .mx_UnpinAllDialog button,
+        .mx_ShareDialog button,
         .mx_EncryptionUserSettingsTab button
     ),
 .mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
@@ -651,32 +668,43 @@ legend {
     min-width: 156px;
 }
 
-.mx_Dialog button.danger:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]),
+.mx_Dialog button.danger:not(.mx_Dialog_nonDialogButton, [class|="maplibregl"]),
 .mx_Dialog input[type="submit"].danger,
 .mx_Dialog_buttons
-    button.danger:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(.mx_UserProfileSettings button):not(
-        .mx_ThemeChoicePanel_CustomTheme button
-    ):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(.mx_EncryptionUserSettingsTab button),
+    button.danger:not(
+        .mx_Dialog_nonDialogButton,
+        .mx_AccessibleButton,
+        .mx_UserProfileSettings button,
+        .mx_ThemeChoicePanel_CustomTheme button,
+        .mx_UnpinAllDialog button,
+        .mx_ShareDialog button,
+        .mx_EncryptionUserSettingsTab button
+    ),
 .mx_Dialog_buttons input[type="submit"].danger {
     background-color: var(--cpd-color-bg-critical-primary);
     border: solid 1px var(--cpd-color-bg-critical-primary);
     color: var(--cpd-color-text-on-solid-primary);
 }
 
-.mx_Dialog button.warning:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]),
+.mx_Dialog button.warning:not(.mx_Dialog_nonDialogButton, [class|="maplibregl"]),
 .mx_Dialog input[type="submit"].warning {
     border: solid 1px var(--cpd-color-border-critical-subtle);
     color: var(--cpd-color-text-critical-primary);
 }
 
 .mx_Dialog
-    button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
-        .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(
+    button:not(
+        .mx_Dialog_nonDialogButton,
+        [class|="maplibregl"],
+        .mx_AccessibleButton,
+        .mx_UserProfileSettings button,
+        .mx_ThemeChoicePanel_CustomTheme button,
+        .mx_UnpinAllDialog button,
+        .mx_ShareDialog button,
         .mx_EncryptionUserSettingsTab button
     ):disabled,
 .mx_Dialog input[type="submit"]:disabled,
-.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):disabled,
+.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton):disabled,
 .mx_Dialog_buttons input[type="submit"]:disabled {
     background-color: $light-fg-color;
     border: solid 1px $light-fg-color;

diff --git a/res/css/_components.pcss b/res/css/_components.pcss
@@ -349,7 +349,6 @@
 @import "./views/settings/_PowerLevelSelector.pcss";
 @import "./views/settings/_RoomProfileSettings.pcss";
 @import "./views/settings/_SecureBackupPanel.pcss";
-@import "./views/settings/_SetIdServer.pcss";
 @import "./views/settings/_SetIntegrationManager.pcss";
 @import "./views/settings/_SettingsFieldset.pcss";
 @import "./views/settings/_SettingsHeader.pcss";

diff --git a/res/css/views/settings/_SetIdServer.pcss b/res/css/views/settings/_SetIdServer.pcss