Use EditInPlace control for Identity Server picker to improve a11y

res/css/_common.pcss

@@ -596,9 +596,9 @@ 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(
-        .mx_EncryptionUserSettingsTab button
-    ),
+    ):not(.mx_IdentityServerPicker button):not(.mx_ThemeChoicePanel_CustomTheme button):not(
+        .mx_UnpinAllDialog button
+    ):not(.mx_ShareDialog button):not(.mx_EncryptionUserSettingsTab button),
 .mx_Dialog input[type="submit"],
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
 .mx_Dialog_buttons input[type="submit"] {

src/components/views/settings/SetIdServer.tsx

@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type ReactNode } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { type IThreepid } from "matrix-js-sdk/src/matrix";
+import { EditInPlace, ErrorMessage } from "@vector-im/compound-web";
 
 import { _t } from "../../../languageHandler";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
@@ -22,7 +23,6 @@ import { timeout } from "../../../utils/promise";
 import { type ActionPayload } from "../../../dispatcher/payloads";
 import InlineSpinner from "../elements/InlineSpinner";
 import AccessibleButton from "../elements/AccessibleButton";
-import Field from "../elements/Field";
 import QuestionDialog from "../dialogs/QuestionDialog";
 import SettingsFieldset from "./SettingsFieldset";
 import { SettingsSubsectionText } from "./shared/SettingsSubsection";
@@ -86,10 +86,12 @@ export default class SetIdServer extends React.Component<IProps, IState> {
             defaultIdServer = abbreviateUrl(getDefaultIdentityServerUrl());
         }
 
+        const currentClientIdServer = MatrixClientPeg.safeGet().getIdentityServerUrl();
+
         this.state = {
             defaultIdServer,
-            currentClientIdServer: MatrixClientPeg.safeGet().getIdentityServerUrl(),
-            idServer: "",
+            currentClientIdServer,
+            idServer: currentClientIdServer ?? "",
             busy: false,
             disconnectBusy: false,
             checking: false,
@@ -117,26 +119,7 @@ export default class SetIdServer extends React.Component<IProps, IState> {
     private onIdentityServerChanged = (ev: React.ChangeEvent<HTMLInputElement>): void => {
         const u = ev.target.value;
 
-        this.setState({ idServer: u });
-    };
-
-    private getTooltip = (): JSX.Element | undefined => {
-        if (this.state.checking) {
-            return (
-                <div>
-                    <InlineSpinner />
-                    {_t("identity_server|checking")}
-                </div>
-            );
-        } else if (this.state.error) {
-            return <strong className="warning">{this.state.error}</strong>;
-        } else {
-            return undefined;
-        }
-    };
-
-    private idServerChangeEnabled = (): boolean => {
-        return !!this.state.idServer && !this.state.busy;
+        this.setState({ idServer: u, error: undefined });
     };
 
     private saveIdServer = (fullUrl: string): void => {
@@ -148,7 +131,7 @@ export default class SetIdServer extends React.Component<IProps, IState> {
             busy: false,
             error: undefined,
             currentClientIdServer: fullUrl,
-            idServer: "",
+            idServer: fullUrl,
         });
     };
 
@@ -175,7 +158,7 @@ export default class SetIdServer extends React.Component<IProps, IState> {
                 // Double check that the identity server even has terms of service.
                 const hasTerms = await doesIdentityServerHaveTerms(MatrixClientPeg.safeGet(), fullUrl);
                 if (!hasTerms) {
-                    const [confirmed] = await this.showNoTermsWarning(fullUrl);
+                    const [confirmed] = await this.showNoTermsWarning();
                     save = !!confirmed;
                 }
 
@@ -213,7 +196,7 @@ export default class SetIdServer extends React.Component<IProps, IState> {
         });
     };
 
-    private showNoTermsWarning(fullUrl: string): Promise<[ok?: boolean]> {
+    private showNoTermsWarning(): Promise<[ok?: boolean]> {
         const { finished } = Modal.createDialog(QuestionDialog, {
             title: _t("terms|identity_server_no_terms_title"),
             description: (
@@ -393,28 +376,25 @@ export default class SetIdServer extends React.Component<IProps, IState> {
 
         return (
             <SettingsFieldset legend={sectionTitle} description={bodyText}>
-                <form className="mx_SetIdServer" onSubmit={this.checkIdServer}>
-                    <Field
-                        label={_t("identity_server|url_field_label")}
-                        type="text"
-                        autoComplete="off"
-                        placeholder={this.state.defaultIdServer}
-                        value={this.state.idServer}
-                        onChange={this.onIdentityServerChanged}
-                        tooltipContent={this.getTooltip()}
-                        tooltipClassName="mx_SetIdServer_tooltip"
-                        disabled={this.state.busy}
-                        forceValidity={this.state.error ? false : undefined}
-                    />
-                    <AccessibleButton
-                        kind="primary_sm"
-                        onClick={this.checkIdServer}
-                        disabled={!this.idServerChangeEnabled()}
-                    >
-                        {_t("action|change")}
-                    </AccessibleButton>
-                    {discoSection}
-                </form>
+                <EditInPlace
+                    className="mx_IdentityServerPicker"
+                    cancelButtonLabel={_t("action|reset")}
+                    disabled={!!this.state.busy}
+                    label={_t("identity_server|url_field_label")}
+                    onCancel={() => this.setState((s) => ({ idServer: s.currentClientIdServer ?? "" }))}
+                    onChange={this.onIdentityServerChanged}
+                    onClearServerErrors={() => this.setState({ error: undefined })}
+                    onSave={this.checkIdServer}
+                    placeholder={this.state.defaultIdServer}
+                    saveButtonLabel={_t("action|change")}
+                    savedLabel={this.state.error ? undefined : _t("identity_server|changed")}
+                    savingLabel={_t("identity_server|checking")}
+                    serverInvalid={!!this.state.error}
+                    value={this.state.idServer}
+                >
+                    {this.state.error && <ErrorMessage>{this.state.error}</ErrorMessage>}
+                </EditInPlace>
+                {discoSection}
             </SettingsFieldset>
         );
     }

src/i18n/strings/en_EN.json

@@ -1243,6 +1243,7 @@
         "change": "Change identity server",
         "change_prompt": "Disconnect from the identity server <current /> and connect to <new /> instead?",
         "change_server_prompt": "If you don't want to use <server /> to discover and be discoverable by existing contacts you know, enter another identity server below.",
+        "changed": "Your identity server has been changed",
         "checking": "Checking server",
         "description_connected": "You are currently using <server></server> to discover and be discoverable by existing contacts you know. You can change your identity server below.",
         "description_disconnected": "You are not currently using an identity server. To discover and be discoverable by existing contacts you know, add one below.",

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

@@ -438,33 +438,29 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
                   class="mx_SettingsFieldset_content"
                 >
                   <form
-                    class="mx_SetIdServer"
+                    class="_root_ssths_24 mx_IdentityServerPicker"
                   >
                     <div
-                      class="mx_Field mx_Field_input"
+                      class="_field_ssths_34"
                     >
-                      <input
-                        autocomplete="off"
-                        id="mx_Field_1"
-                        label="Enter a new identity server"
-                        placeholder=""
-                        type="text"
-                        value=""
-                      />
                       <label
-                        for="mx_Field_1"
+                        class="_label_ssths_67"
+                        for="radix-:r0:"
                       >
                         Enter a new identity server
                       </label>
-                    </div>
-                    <div
-                      aria-disabled="true"
-                      class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_sm mx_AccessibleButton_disabled"
-                      disabled=""
-                      role="button"
-                      tabindex="0"
-                    >
-                      Change
+                      <div
+                        class="_controls_1h4nb_17"
+                      >
+                        <input
+                          class="_control_9gon8_18"
+                          id="radix-:r0:"
+                          name="input"
+                          placeholder=""
+                          title=""
+                          value=""
+                        />
+                      </div>
                     </div>
                   </form>
                 </div>