Minor tweaks to UserSettings dialog (#12651)

* Make user settings dialog title looks like figma design

* dialog: add title to close button

* Update dialog snapshot

* Update playwright snapshot

res/css/views/dialogs/_UserSettingsDialog.pcss

@@ -22,6 +22,15 @@ limitations under the License.
     justify-content: center;
 }
 
+.mx_UserSettingsDialog_title {
+    /* Override default dialog font style */
+    font: var(--cpd-font-heading-md-regular) !important;
+
+    .mx_UserSettingsDialog_title_strong {
+        font: var(--cpd-font-heading-md-semibold);
+    }
+}
+
 /* ICONS */
 /* ========================================================== */
 

src/components/views/dialogs/BaseDialog.tsx

@@ -128,6 +128,7 @@ export default class BaseDialog extends React.Component<IProps> {
                     onClick={this.onCancelClick}
                     className="mx_Dialog_cancelButton"
                     aria-label={_t("dialog_close_label")}
+                    title={_t("dialog_close_label")}
                 />
             );
         }
@@ -184,8 +185,8 @@ export default class BaseDialog extends React.Component<IProps> {
                         )}
                         {this.props.headerButton}
                     </div>
-                    {cancelButton}
                     {this.props.children}
+                    {cancelButton}
                 </FocusLock>
             </MatrixClientContext.Provider>
         );

src/components/views/dialogs/UserSettingsDialog.tsx

@@ -50,7 +50,7 @@ interface IProps {
 
 function titleForTabID(tabId: UserTab): React.ReactNode {
     const subs = {
-        strong: (sub: string) => <strong>{sub}</strong>,
+        strong: (sub: string) => <span className="mx_UserSettingsDialog_title_strong">{sub}</span>,
     };
     switch (tabId) {
         case UserTab.General:
@@ -230,6 +230,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
                     hasCancel={true}
                     onFinished={props.onFinished}
                     title={titleForTabID(activeTabId)}
+                    titleClass="mx_UserSettingsDialog_title"
                 >
                     <div className="mx_SettingsDialog_content">
                         <TabbedView

test/components/structures/__snapshots__/MatrixChat-test.tsx.snap

@@ -334,12 +334,6 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
       Leave room
     </h1>
   </div>
-  <div
-    aria-label="Close dialog"
-    class="mx_AccessibleButton mx_Dialog_cancelButton"
-    role="button"
-    tabindex="0"
-  />
   <div
     class="mx_Dialog_content"
     id="mx_Dialog_content"
@@ -369,6 +363,12 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
       </button>
     </span>
   </div>
+  <div
+    aria-label="Close dialog"
+    class="mx_AccessibleButton mx_Dialog_cancelButton"
+    role="button"
+    tabindex="0"
+  />
 </div>
 `;
 
@@ -390,12 +390,6 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
       Leave space
     </h1>
   </div>
-  <div
-    aria-label="Close dialog"
-    class="mx_AccessibleButton mx_Dialog_cancelButton"
-    role="button"
-    tabindex="0"
-  />
   <div
     class="mx_Dialog_content"
     id="mx_Dialog_content"
@@ -425,5 +419,11 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
       </button>
     </span>
   </div>
+  <div
+    aria-label="Close dialog"
+    class="mx_AccessibleButton mx_Dialog_cancelButton"
+    role="button"
+    tabindex="0"
+  />
 </div>
 `;

test/components/views/dialogs/__snapshots__/AppDownloadDialog-test.tsx.snap

@@ -23,12 +23,6 @@ exports[`AppDownloadDialog should allow disabling desktop build 1`] = `
         Download Element
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <div
       class="mx_AppDownloadDialog_mobile"
     >
@@ -139,6 +133,12 @@ exports[`AppDownloadDialog should allow disabling desktop build 1`] = `
         Google Play and the Google Play logo are trademarks of Google LLC.
       </p>
     </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"
@@ -171,12 +171,6 @@ exports[`AppDownloadDialog should allow disabling fdroid build 1`] = `
         Download Element
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <div
       class="mx_AppDownloadDialog_desktop"
     >
@@ -295,6 +289,12 @@ exports[`AppDownloadDialog should allow disabling fdroid build 1`] = `
         Google Play and the Google Play logo are trademarks of Google LLC.
       </p>
     </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"
@@ -327,12 +327,6 @@ exports[`AppDownloadDialog should allow disabling mobile builds 1`] = `
         Download Element
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <div
       class="mx_AppDownloadDialog_desktop"
     >
@@ -364,6 +358,12 @@ exports[`AppDownloadDialog should allow disabling mobile builds 1`] = `
         Google Play and the Google Play logo are trademarks of Google LLC.
       </p>
     </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"
@@ -396,12 +396,6 @@ exports[`AppDownloadDialog should render with desktop, ios, android, fdroid butt
         Download Element
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <div
       class="mx_AppDownloadDialog_desktop"
     >
@@ -530,6 +524,12 @@ exports[`AppDownloadDialog should render with desktop, ios, android, fdroid butt
         Google Play and the Google Play logo are trademarks of Google LLC.
       </p>
     </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"

test/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap

@@ -24,12 +24,6 @@ exports[`<ChangelogDialog /> should fetch github proxy url for each repo with ol
         Changelog
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <div
       class="mx_Dialog_content"
       id="mx_Dialog_content"
@@ -131,6 +125,12 @@ exports[`<ChangelogDialog /> should fetch github proxy url for each repo with ol
         </button>
       </span>
     </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"

test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap

@@ -24,12 +24,6 @@ exports[`ConfirmUserActionDialog renders 1`] = `
         Ban this 
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <div
       class="mx_Dialog_content"
       id="mx_Dialog_content"
@@ -85,6 +79,12 @@ exports[`ConfirmUserActionDialog renders 1`] = `
         </button>
       </span>
     </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"

test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap

@@ -23,12 +23,6 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
         Developer Tools
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <div
       class="mx_DevTools_label_left"
     >
@@ -39,6 +33,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
     >
       Room ID: !id
       <div
+        aria-describedby="floating-ui-2"
         aria-label="Copy"
         class="mx_AccessibleButton mx_CopyableText_copyButton"
         role="button"
@@ -232,6 +227,12 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
         Back
       </button>
     </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"

test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap

@@ -18,12 +18,6 @@ exports[`<ExportDialog /> renders export dialog 1`] = `
       Export Chat
     </h1>
   </div>
-  <div
-    aria-label="Close dialog"
-    class="mx_AccessibleButton mx_Dialog_cancelButton"
-    role="button"
-    tabindex="0"
-  />
   <p>
     Select from the options below to export chats from your timeline
   </p>
@@ -200,6 +194,12 @@ exports[`<ExportDialog /> renders export dialog 1`] = `
       </button>
     </span>
   </div>
+  <div
+    aria-label="Close dialog"
+    class="mx_AccessibleButton mx_Dialog_cancelButton"
+    role="button"
+    tabindex="0"
+  />
 </div>
 `;
 

test/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap

@@ -24,12 +24,6 @@ exports[`LogoutDialog Prompts user to connect backup if there is a backup on the
         You'll lose access to your encrypted messages
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <div>
       <div
         class="mx_Dialog_content"
@@ -78,6 +72,13 @@ exports[`LogoutDialog Prompts user to connect backup if there is a backup on the
         </p>
       </details>
     </div>
+    <div
+      aria-describedby="floating-ui-22"
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"
@@ -111,12 +112,6 @@ exports[`LogoutDialog Prompts user to set up backup if there is no backup on the
         You'll lose access to your encrypted messages
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <div>
       <div
         class="mx_Dialog_content"
@@ -165,6 +160,13 @@ exports[`LogoutDialog Prompts user to set up backup if there is no backup on the
         </p>
       </details>
     </div>
+    <div
+      aria-describedby="floating-ui-28"
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"
@@ -198,12 +200,6 @@ exports[`LogoutDialog shows a regular dialog when crypto is disabled 1`] = `
         Sign out
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <div
       class="mx_Dialog_content"
       id="mx_Dialog_content"
@@ -231,6 +227,12 @@ exports[`LogoutDialog shows a regular dialog when crypto is disabled 1`] = `
         </button>
       </span>
     </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"

test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap

@@ -23,12 +23,6 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
         Select spaces
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <p>
       <span>
         Decide which spaces can access this room. If a space is selected, its members can find and join 
@@ -141,6 +135,12 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
         </div>
       </div>
     </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"
@@ -173,12 +173,6 @@ exports[`<ManageRestrictedJoinRuleDialog /> should render empty state 1`] = `
         Select spaces
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <p>
       <span>
         Decide which spaces can access this room. If a space is selected, its members can find and join 
@@ -242,6 +236,12 @@ exports[`<ManageRestrictedJoinRuleDialog /> should render empty state 1`] = `
         </div>
       </div>
     </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"

test/components/views/dialogs/__snapshots__/ManualDeviceKeyVerificationDialog-test.tsx.snap

@@ -24,12 +24,6 @@ exports[`ManualDeviceKeyVerificationDialog should display the device 1`] = `
         Verify session
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <div
       class="mx_Dialog_content"
       id="mx_Dialog_content"
@@ -106,6 +100,12 @@ exports[`ManualDeviceKeyVerificationDialog should display the device 1`] = `
         </button>
       </span>
     </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"
@@ -139,12 +139,6 @@ exports[`ManualDeviceKeyVerificationDialog should display the device of another
         Verify session
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <div
       class="mx_Dialog_content"
       id="mx_Dialog_content"
@@ -221,6 +215,12 @@ exports[`ManualDeviceKeyVerificationDialog should display the device of another
         </button>
       </span>
     </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"

test/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap

@@ -23,12 +23,6 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
         Message edits
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <div
       class="mx_AutoHideScrollbar mx_ScrollPanel mx_MessageEditHistoryDialog_scrollPanel"
       tabindex="-1"
@@ -107,6 +101,13 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
         </ol>
       </div>
     </div>
+    <div
+      aria-describedby="floating-ui-2"
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"
@@ -139,12 +140,6 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
         Message edits
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <div
       class="mx_AutoHideScrollbar mx_ScrollPanel mx_MessageEditHistoryDialog_scrollPanel"
       tabindex="-1"
@@ -320,6 +315,13 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
         </ol>
       </div>
     </div>
+    <div
+      aria-describedby="floating-ui-8"
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"

test/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap

@@ -24,12 +24,6 @@ exports[`<ServerPickerDialog /> should render dialog 1`] = `
         Sign into your homeserver
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <form
       class="mx_Dialog_content"
       id="mx_ServerPickerDialog"
@@ -131,6 +125,12 @@ exports[`<ServerPickerDialog /> should render dialog 1`] = `
         />
       </a>
     </form>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"

test/components/views/dialogs/security/__snapshots__/CreateKeyBackupDialog-test.tsx.snap

@@ -130,12 +130,6 @@ exports[`CreateKeyBackupDialog should display the success dialog when the key ba
         Success!
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <div>
       <div>
         <p>
@@ -158,6 +152,12 @@ exports[`CreateKeyBackupDialog should display the success dialog when the key ba
         </div>
       </div>
     </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"

test/components/views/dialogs/security/__snapshots__/ExportE2eKeysDialog-test.tsx.snap

@@ -23,12 +23,6 @@ exports[`ExportE2eKeysDialog renders 1`] = `
         Export room keys
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <form>
       <div
         class="mx_Dialog_content"
@@ -102,6 +96,12 @@ exports[`ExportE2eKeysDialog renders 1`] = `
         </button>
       </div>
     </form>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"

test/components/views/dialogs/security/__snapshots__/ImportE2eKeysDialog-test.tsx.snap

@@ -23,12 +23,6 @@ exports[`ImportE2eKeysDialog renders 1`] = `
         Import room keys
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <form>
       <div
         class="mx_Dialog_content"
@@ -103,6 +97,12 @@ exports[`ImportE2eKeysDialog renders 1`] = `
         </button>
       </div>
     </form>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"

test/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap

@@ -23,6 +23,7 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
     class="mx_ZoomButtons"
   >
     <div
+      aria-describedby="floating-ui-6"
       aria-label="Zoom in"
       class="mx_AccessibleButton mx_ZoomButtons_button"
       data-testid="map-zoom-in-button"

test/components/views/settings/tabs/room/__snapshots__/SecurityRoomSettingsTab-test.tsx.snap

@@ -128,12 +128,6 @@ exports[`<SecurityRoomSettingsTab /> join rule handles error when updating join
       Failed to update the join rules
     </h1>
   </div>
-  <div
-    aria-label="Close dialog"
-    class="mx_AccessibleButton mx_Dialog_cancelButton"
-    role="button"
-    tabindex="0"
-  />
   <div
     class="mx_Dialog_content"
     id="mx_Dialog_content"
@@ -149,6 +143,12 @@ exports[`<SecurityRoomSettingsTab /> join rule handles error when updating join
       OK
     </button>
   </div>
+  <div
+    aria-label="Close dialog"
+    class="mx_AccessibleButton mx_Dialog_cancelButton"
+    role="button"
+    tabindex="0"
+  />
 </div>
 `;
 
@@ -170,12 +170,6 @@ exports[`<SecurityRoomSettingsTab /> join rule warns when trying to make an encr
       Are you sure you want to make this encrypted room public?
     </h1>
   </div>
-  <div
-    aria-label="Close dialog"
-    class="mx_AccessibleButton mx_Dialog_cancelButton"
-    role="button"
-    tabindex="0"
-  />
   <div
     class="mx_Dialog_content"
     id="mx_Dialog_content"
@@ -231,5 +225,11 @@ exports[`<SecurityRoomSettingsTab /> join rule warns when trying to make an encr
       </button>
     </span>
   </div>
+  <div
+    aria-label="Close dialog"
+    class="mx_AccessibleButton mx_Dialog_cancelButton"
+    role="button"
+    tabindex="0"
+  />
 </div>
 `;

test/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap

@@ -56,12 +56,6 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
         </div>
       </h1>
     </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    />
     <div
       class="mx_AddExistingToSpace"
     >
@@ -118,6 +112,12 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
         </div>
       </div>
     </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
   </div>
   <div
     data-focus-guard="true"