Use `strong` element to semantically denote visually emphasised content (#12320)

* Use `strong` element to semantically denote visually emphasised content

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add comment

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss

@@ -117,6 +117,8 @@ limitations under the License.
                 .mx_AccessSecretStorageDialog_reset {
                     position: relative;
                     padding-inline-start: $spacingStart;
+                    /* To avoid bold styling inherent with <strong> elements */
+                    font-weight: inherit;
 
                     &::before {
                         content: "";

src/async-components/views/dialogs/security/NewRecoveryMethodDialog.tsx

@@ -63,7 +63,9 @@ export default class NewRecoveryMethodDialog extends React.PureComponent<IProps>
 
         const newMethodDetected = <p>{_t("encryption|new_recovery_method_detected|description_1")}</p>;
 
-        const hackWarning = <p className="warning">{_t("encryption|new_recovery_method_detected|warning")}</p>;
+        const hackWarning = (
+            <strong className="warning">{_t("encryption|new_recovery_method_detected|warning")}</strong>
+        );
 
         let content: JSX.Element | undefined;
         if (MatrixClientPeg.safeGet().getKeyBackupEnabled()) {

src/async-components/views/dialogs/security/RecoveryMethodRemovedDialog.tsx

@@ -55,7 +55,7 @@ export default class RecoveryMethodRemovedDialog extends React.PureComponent<IPr
                 <div>
                     <p>{_t("encryption|recovery_method_removed|description_1")}</p>
                     <p>{_t("encryption|recovery_method_removed|description_2")}</p>
-                    <p className="warning">{_t("encryption|recovery_method_removed|warning")}</p>
+                    <strong className="warning">{_t("encryption|recovery_method_removed|warning")}</strong>
                     <DialogButtons
                         primaryButton={_t("common|setup_secure_messages")}
                         onPrimaryButtonClick={this.onSetupClick}

src/components/structures/MatrixChat.tsx

@@ -1176,10 +1176,10 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         const memberCount = roomToLeave?.currentState.getJoinedMemberCount();
         if (memberCount === 1) {
             warnings.push(
-                <span className="warning" key="only_member_warning">
+                <strong className="warning" key="only_member_warning">
                     {" " /* Whitespace, otherwise the sentences get smashed together */}
                     {_t("leave_room_dialog|last_person_warning")}
-                </span>,
+                </strong>,
             );
 
             return warnings;
@@ -1190,12 +1190,12 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             const rule = joinRules.getContent().join_rule;
             if (rule !== "public") {
                 warnings.push(
-                    <span className="warning" key="non_public_warning">
+                    <strong className="warning" key="non_public_warning">
                         {" " /* Whitespace, otherwise the sentences get smashed together */}
                         {isSpace
                             ? _t("leave_room_dialog|space_rejoin_warning")
                             : _t("leave_room_dialog|room_rejoin_warning")}
-                    </span>,
+                    </strong>,
                 );
             }
         }

src/components/views/dialogs/security/AccessSecretStorageDialog.tsx

@@ -278,8 +278,8 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
     public render(): React.ReactNode {
         const hasPassphrase = this.props.keyInfo?.passphrase?.salt && this.props.keyInfo?.passphrase?.iterations;
 
-        const resetButton = (
+        const resetLine = (
-            <div className="mx_AccessSecretStorageDialog_reset">
+            <strong className="mx_AccessSecretStorageDialog_reset">
                 {_t("encryption|reset_all_button", undefined, {
                     a: (sub) => (
                         <AccessibleButton
@@ -291,7 +291,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
                         </AccessibleButton>
                     ),
                 })}
-            </div>
+            </strong>
         );
 
         let content;
@@ -366,7 +366,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
                             onCancel={this.onCancel}
                             focus={false}
                             primaryDisabled={this.state.passPhrase.length === 0}
-                            additive={resetButton}
+                            additive={resetLine}
                         />
                     </form>
                 </div>
@@ -434,7 +434,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
                             onCancel={this.onCancel}
                             focus={false}
                             primaryDisabled={!this.state.recoveryKeyValid}
-                            additive={resetButton}
+                            additive={resetLine}
                         />
                     </form>
                 </div>

src/components/views/settings/SetIdServer.tsx

@@ -137,7 +137,7 @@ export default class SetIdServer extends React.Component<IProps, IState> {
                 </div>
             );
         } else if (this.state.error) {
-            return <span className="warning">{this.state.error}</span>;
+            return <strong className="warning">{this.state.error}</strong>;
         } else {
             return null;
         }
@@ -226,7 +226,7 @@ export default class SetIdServer extends React.Component<IProps, IState> {
             title: _t("terms|identity_server_no_terms_title"),
             description: (
                 <div>
-                    <span className="warning">{_t("identity_server|no_terms")}</span>
+                    <strong className="warning">{_t("identity_server|no_terms")}</strong>
                     <span>&nbsp;{_t("terms|identity_server_no_terms_description_2")}</span>
                 </div>
             ),

src/components/views/settings/tabs/user/MjolnirUserSettingsTab.tsx

@@ -256,7 +256,7 @@ export default class MjolnirUserSettingsTab extends React.Component<{}, IState>
             <SettingsTab>
                 <SettingsSection heading={_t("labs_mjolnir|title")}>
                     <SettingsSubsectionText>
-                        <span className="warning">{_t("labs_mjolnir|advanced_warning")}</span>
+                        <strong className="warning">{_t("labs_mjolnir|advanced_warning")}</strong>
                         <p>{_t("labs_mjolnir|explainer_1", { brand }, { code: (s) => <code>{s}</code> })}</p>
                         <p>{_t("labs_mjolnir|explainer_2")}</p>
                     </SettingsSubsectionText>
@@ -289,7 +289,7 @@ export default class MjolnirUserSettingsTab extends React.Component<{}, IState>
                         heading={_t("labs_mjolnir|lists_heading")}
                         description={
                             <>
-                                <span className="warning">{_t("labs_mjolnir|lists_description_1")}</span>
+                                <strong className="warning">{_t("labs_mjolnir|lists_description_1")}</strong>
                                 &nbsp;
                                 <span>{_t("labs_mjolnir|lists_description_2")}</span>
                             </>

test/components/views/settings/tabs/user/__snapshots__/MjolnirUserSettingsTab-test.tsx.snap

@@ -22,11 +22,11 @@ exports[`<MjolnirUserSettingsTab /> renders correctly when user has no ignored u
           <div
             class="mx_SettingsSubsection_text"
           >
-            <span
+            <strong
               class="warning"
             >
               ⚠ These settings are meant for advanced users.
-            </span>
+            </strong>
             <p>
               <span>
                 Add users and servers you want to ignore here. Use asterisks to have Element match any characters. For example, 
@@ -115,11 +115,11 @@ exports[`<MjolnirUserSettingsTab /> renders correctly when user has no ignored u
               <div
                 class="mx_SettingsSubsection_text"
               >
-                <span
+                <strong
                   class="warning"
                 >
                   Subscribing to a ban list will cause you to join it!
-                </span>
+                </strong>
                  
                 <span>
                   If this isn't what you want, please use a different tool to ignore users.