Use strong over b for improved a11y semantics

res/css/views/auth/_AuthBody.pcss

@@ -16,7 +16,7 @@ Please see LICENSE files in the repository root for full details.
     padding: 25px 60px;
     box-sizing: border-box;
 
-    b {
+    strong {
         font-weight: var(--cpd-font-weight-semibold);
     }
 

src/IdentityAuthClient.tsx

@@ -141,7 +141,7 @@ export default class IdentityAuthClient {
                                 "terms|identity_server_no_terms_description_1",
                                 {},
                                 {
-                                    server: () => <b>{abbreviateUrl(identityServerUrl)}</b>,
+                                    server: () => <strong>{abbreviateUrl(identityServerUrl)}</strong>,
                                 },
                             )}
                         </p>

src/RoomInvite.tsx

@@ -145,7 +145,7 @@ export function showAnyInviteErrors(
                             "invite|room_failed_partial",
                             {},
                             {
-                                RoomName: () => <b>{room.name}</b>,
+                                RoomName: () => <strong>{room.name}</strong>,
                             },
                         )}
                     </h4>

src/components/structures/auth/forgot-password/CheckEmail.tsx

@@ -46,7 +46,7 @@ export const CheckEmail: React.FC<CheckEmailProps> = ({
             <EMailPromptIcon className="mx_AuthBody_emailPromptIcon--shifted" />
             <h1>{_t("auth|uia|email_auth_header")}</h1>
             <div className="mx_AuthBody_text">
-                <p>{_t("auth|check_email_explainer", { email: email }, { b: (t) => <b>{t}</b> })}</p>
+                <p>{_t("auth|check_email_explainer", { email: email }, { b: (t) => <strong>{t}</strong> })}</p>
                 <div className="mx_AuthBody_did-not-receive">
                     <span className="mx_VerifyEMailDialog_text-light">{_t("auth|check_email_wrong_email_prompt")}</span>
                     <AccessibleButton className="mx_AuthBody_resend-button" kind="link" onClick={onReEnterEmailClick}>

src/components/structures/auth/forgot-password/EnterEmail.tsx

@@ -57,7 +57,7 @@ export const EnterEmail: React.FC<EnterEmailProps> = ({
             <EmailIcon className="mx_AuthBody_icon" />
             <h1>{_t("auth|enter_email_heading")}</h1>
             <p className="mx_AuthBody_text">
-                {_t("auth|enter_email_explainer", { homeserver }, { b: (t) => <b>{t}</b> })}
+                {_t("auth|enter_email_explainer", { homeserver }, { b: (t) => <strong>{t}</strong> })}
             </p>
             <form onSubmit={onSubmit}>
                 <fieldset disabled={loading}>

src/components/structures/auth/forgot-password/VerifyEmailModal.tsx

@@ -50,7 +50,7 @@ export const VerifyEmailModal: React.FC<Props> = ({
                         email,
                     },
                     {
-                        b: (sub) => <b>{sub}</b>,
+                        b: (sub) => <strong>{sub}</strong>,
                     },
                 )}
             </p>

src/components/views/auth/InteractiveAuthEntryComponents.tsx

@@ -468,7 +468,7 @@ export class EmailIdentityAuthEntry extends React.Component<
                     />
                     <p>
                         {_t("auth|uia|email", {
-                            emailAddress: <b>{this.props.inputs.emailAddress}</b>,
+                            emailAddress: <strong>{this.props.inputs.emailAddress}</strong>,
                         })}
                     </p>
                     {this.state.requesting ? (

src/components/views/auth/LoginWithQRFlow.tsx

@@ -293,7 +293,7 @@ export default class LoginWithQRFlow extends React.Component<XOR<Props, MSC3906P
                                 </li>
                                 <li>
                                     {_t("auth|qr_code_login|select_qr_code", {
-                                        scanQRCode: <b>{_t("auth|qr_code_login|scan_qr_code")}</b>,
+                                        scanQRCode: <strong>{_t("auth|qr_code_login|scan_qr_code")}</strong>,
                                     })}
                                 </li>
                                 <li>{_t("auth|qr_code_login|point_the_camera")}</li>

src/components/views/dialogs/AnalyticsLearnMoreDialog.tsx

@@ -72,8 +72,8 @@ export const AnalyticsLearnMoreDialog: React.FC<IProps> = ({
                     {_t("analytics|pseudonymous_usage_data", { analyticsOwner })}
                 </div>
                 <ul className="mx_AnalyticsLearnMore_bullets">
-                    <li>{_t("analytics|bullet_1", {}, { Bold: (sub) => <b>{sub}</b> })}</li>
-                    <li>{_t("analytics|bullet_2", {}, { Bold: (sub) => <b>{sub}</b> })}</li>
+                    <li>{_t("analytics|bullet_1", {}, { Bold: (sub) => <strong>{sub}</strong> })}</li>
+                    <li>{_t("analytics|bullet_2", {}, { Bold: (sub) => <strong>{sub}</strong> })}</li>
                     <li>{_t("analytics|disable_prompt")}</li>
                 </ul>
                 {privacyPolicyLink}

src/components/views/dialogs/BugReportDialog.tsx

@@ -205,7 +205,7 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
         ) {
             warning = (
                 <p>
-                    <b>{_t("bug_reporting|unsupported_browser")}</b>
+                    <strong>{_t("bug_reporting|unsupported_browser")}</strong>
                 </p>
             );
         }
@@ -221,7 +221,7 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
                     {warning}
                     <p>{_t("bug_reporting|description")}</p>
                     <p>
-                        <b>
+                        <strong>
                             {_t(
                                 "bug_reporting|before_submitting",
                                 {},
@@ -237,7 +237,7 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
                                     ),
                                 },
                             )}
-                        </b>
+                        </strong>
                     </p>
 
                     <div className="mx_BugReportDialog_download">

src/components/views/dialogs/CreateRoomDialog.tsx

@@ -280,7 +280,9 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
                         "create_room|join_rule_restricted_label",
                         {},
                         {
-                            SpaceName: () => <b>{this.props.parentSpace?.name ?? _t("common|unnamed_space")}</b>,
+                            SpaceName: () => (
+                                <strong>{this.props.parentSpace?.name ?? _t("common|unnamed_space")}</strong>
+                            ),
                         },
                     )}
                     &nbsp;
@@ -294,7 +296,9 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
                         "create_room|join_rule_public_parent_space_label",
                         {},
                         {
-                            SpaceName: () => <b>{this.props.parentSpace?.name ?? _t("common|unnamed_space")}</b>,
+                            SpaceName: () => (
+                                <strong>{this.props.parentSpace?.name ?? _t("common|unnamed_space")}</strong>
+                            ),
                         },
                     )}
                     &nbsp;

src/components/views/dialogs/CreateSubspaceDialog.tsx

@@ -95,7 +95,7 @@ const CreateSubspaceDialog: React.FC<IProps> = ({ space, onAddExistingSpaceClick
                     "create_space|subspace_join_rule_restricted_description",
                     {},
                     {
-                        SpaceName: () => <b>{parentSpace.name}</b>,
+                        SpaceName: () => <strong>{parentSpace.name}</strong>,
                     },
                 )}
             </p>
@@ -107,7 +107,7 @@ const CreateSubspaceDialog: React.FC<IProps> = ({ space, onAddExistingSpaceClick
                     "create_space|subspace_join_rule_public_description",
                     {},
                     {
-                        SpaceName: () => <b>{parentSpace.name}</b>,
+                        SpaceName: () => <strong>{parentSpace.name}</strong>,
                     },
                 )}
             </p>

src/components/views/dialogs/LeaveSpaceDialog.tsx

@@ -77,7 +77,7 @@ const LeaveSpaceDialog: React.FC<IProps> = ({ space, onFinished }) => {
                         "space|leave_dialog_description",
                         {},
                         {
-                            spaceName: () => <b>{space.name}</b>,
+                            spaceName: () => <strong>{space.name}</strong>,
                         },
                     )}
                     &nbsp;

src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx

@@ -144,7 +144,7 @@ const ManageRestrictedJoinRuleDialog: React.FC<IProps> = ({ room, selected = [],
                     "room_settings|security|join_rule_restricted_dialog_description",
                     {},
                     {
-                        RoomName: () => <b>{room.name}</b>,
+                        RoomName: () => <strong>{room.name}</strong>,
                     },
                 )}
             </p>

src/components/views/dialogs/ManualDeviceKeyVerificationDialog.tsx

@@ -69,7 +69,7 @@ export function ManualDeviceKeyVerificationDialog({
                         <label>{_t("encryption|verification|manual_device_verification_device_key_label")}:</label>{" "}
                         <span>
                             <code>
-                                <b>{key}</b>
+                                <strong>{key}</strong>
                             </code>
                         </span>
                     </li>

src/components/views/dialogs/RegistrationEmailPromptDialog.tsx

@@ -54,7 +54,7 @@ const RegistrationEmailPromptDialog: React.FC<IProps> = ({ onFinished }) => {
                         "auth|registration|continue_without_email_description",
                         {},
                         {
-                            b: (sub) => <b>{sub}</b>,
+                            b: (sub) => <strong>{sub}</strong>,
                         },
                     )}
                 </p>

src/components/views/dialogs/RoomUpgradeWarningDialog.tsx

@@ -181,7 +181,7 @@ export default class RoomUpgradeWarningDialog extends React.Component<IProps, IS
                             "room_settings|advanced|upgrade_warning_dialog_explainer",
                             {},
                             {
-                                b: (sub) => <b>{sub}</b>,
+                                b: (sub) => <strong>{sub}</strong>,
                             },
                         )}
                     </p>

src/components/views/dialogs/UploadFailureDialog.tsx

@@ -46,7 +46,7 @@ export default class UploadFailureDialog extends React.Component<IProps> {
                     sizeOfThisFile: fileSize(this.props.badFiles[0].size),
                 },
                 {
-                    b: (sub) => <b>{sub}</b>,
+                    b: (sub) => <strong>{sub}</strong>,
                 },
             );
             buttons = (
@@ -64,7 +64,7 @@ export default class UploadFailureDialog extends React.Component<IProps> {
                     limit: fileSize(this.props.contentMessages.getUploadLimit()!),
                 },
                 {
-                    b: (sub) => <b>{sub}</b>,
+                    b: (sub) => <strong>{sub}</strong>,
                 },
             );
             buttons = (
@@ -82,7 +82,7 @@ export default class UploadFailureDialog extends React.Component<IProps> {
                     limit: fileSize(this.props.contentMessages.getUploadLimit()!),
                 },
                 {
-                    b: (sub) => <b>{sub}</b>,
+                    b: (sub) => <strong>{sub}</strong>,
                 },
             );
             const howManyOthers = this.props.totalFiles - this.props.badFiles.length;

src/components/views/dialogs/devtools/SettingExplorer.tsx

@@ -128,7 +128,7 @@ const EditSetting: React.FC<IEditSettingProps> = ({ setting, onBack }) => {
             </h3>
 
             <div className="mx_DevTools_SettingsExplorer_warning">
-                <b>{_t("devtools|caution_colon")}</b> {_t("devtools|use_at_own_risk")}
+                <strong>{_t("devtools|caution_colon")}</strong> {_t("devtools|use_at_own_risk")}
             </div>
 
             <div>

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

@@ -405,7 +405,9 @@ export default class RestoreKeyBackupDialog extends React.PureComponent<IProps,
             title = _t("restore_key_backup_dialog|enter_phrase_title");
             content = (
                 <div>
-                    <p>{_t("restore_key_backup_dialog|key_backup_warning", {}, { b: (sub) => <b>{sub}</b> })}</p>
+                    <p>
+                        {_t("restore_key_backup_dialog|key_backup_warning", {}, { b: (sub) => <strong>{sub}</strong> })}
+                    </p>
                     <p>{_t("restore_key_backup_dialog|enter_phrase_description")}</p>
 
                     <form className="mx_RestoreKeyBackupDialog_primaryContainer">
@@ -467,7 +469,9 @@ export default class RestoreKeyBackupDialog extends React.PureComponent<IProps,
 
             content = (
                 <div>
-                    <p>{_t("restore_key_backup_dialog|key_backup_warning", {}, { b: (sub) => <b>{sub}</b> })}</p>
+                    <p>
+                        {_t("restore_key_backup_dialog|key_backup_warning", {}, { b: (sub) => <strong>{sub}</strong> })}
+                    </p>
                     <p>{_t("restore_key_backup_dialog|enter_key_description")}</p>
 
                     <div className="mx_RestoreKeyBackupDialog_primaryContainer">

src/components/views/rooms/NewRoomIntro.tsx

@@ -97,7 +97,7 @@ const NewRoomIntro: React.FC = () => {
                         introMessage,
                         {},
                         {
-                            displayName: () => <b>{displayName}</b>,
+                            displayName: () => <strong>{displayName}</strong>,
                         },
                     )}
                 </p>
@@ -241,7 +241,7 @@ const NewRoomIntro: React.FC = () => {
                         "room|intro|start_of_room",
                         {},
                         {
-                            roomName: () => <b>{room.name}</b>,
+                            roomName: () => <strong>{room.name}</strong>,
                         },
                     )}
                 </p>

src/components/views/rooms/RoomPreviewCard.tsx

@@ -95,7 +95,7 @@ const RoomPreviewCard: FC<IProps> = ({ room, onJoinButtonClicked, onRejectButton
                                 "room|invites_you_text",
                                 {},
                                 {
-                                    inviter: () => <b>{inviter?.name || inviteSender}</b>,
+                                    inviter: () => <strong>{inviter?.name || inviteSender}</strong>,
                                 },
                             )}
                         </div>

src/components/views/rooms/RoomSearchAuxPanel.tsx

@@ -38,7 +38,7 @@ const RoomSearchAuxPanel: React.FC<Props> = ({ searchInfo, isRoomEncrypted, onSe
                             _t(
                                 "room|search|summary",
                                 { count: searchInfo.count },
-                                { query: () => <b>{searchInfo.term}</b> },
+                                { query: () => <strong>{searchInfo.term}</strong> },
                             )
                         ) : (
                             <InlineSpinner />

src/components/views/rooms/RoomUpgradeWarningBar.tsx

@@ -69,7 +69,7 @@ export default class RoomUpgradeWarningBar extends React.PureComponent<IProps, I
                             "room_settings|advanced|room_upgrade_warning",
                             {},
                             {
-                                b: (sub) => <b>{sub}</b>,
+                                b: (sub) => <strong>{sub}</strong>,
                                 i: (sub) => <i>{sub}</i>,
                             },
                         )}

src/components/views/settings/CryptographyPanel.tsx

@@ -78,7 +78,7 @@ export default class CryptographyPanel extends React.Component<IProps, IState> {
                             <th scope="row">{_t("settings|security|session_key")}</th>
                             <td>
                                 <code>
-                                    <b>{identityKey}</b>
+                                    <strong>{identityKey}</strong>
                                 </code>
                             </td>
                         </tr>

src/components/views/settings/JoinRuleSettings.tsx

@@ -281,7 +281,7 @@ const JoinRuleSettings: React.FC<JoinRuleSettingsProps> = ({
                 "room_settings|security|join_rule_restricted_description_active_space",
                 {},
                 {
-                    spaceName: () => <b>{SpaceStore.instance.activeSpaceRoom!.name}</b>,
+                    spaceName: () => <strong>{SpaceStore.instance.activeSpaceRoom!.name}</strong>,
                 },
             );
         } else {
@@ -349,7 +349,7 @@ const JoinRuleSettings: React.FC<JoinRuleSettingsProps> = ({
                     (roomId) => !cli.getRoom(roomId)?.currentState.maySendStateEvent(EventType.SpaceChild, userId),
                 );
                 if (unableToUpdateSomeParents) {
-                    warning = <b>{_t("room_settings|security|join_rule_restricted_upgrade_warning")}</b>;
+                    warning = <strong>{_t("room_settings|security|join_rule_restricted_upgrade_warning")}</strong>;
                 }
 
                 upgradeRequiredDialog(

src/components/views/settings/SecureBackupPanel.tsx

@@ -259,7 +259,7 @@ export default class SecureBackupPanel extends React.PureComponent<{}, IState> {
                 statusDescription = (
                     <>
                         <SettingsSubsectionText>
-                            {_t("settings|security|key_backup_inactive", {}, { b: (sub) => <b>{sub}</b> })}
+                            {_t("settings|security|key_backup_inactive", {}, { b: (sub) => <strong>{sub}</strong> })}
                         </SettingsSubsectionText>
                         <SettingsSubsectionText>
                             {_t("settings|security|key_backup_connect_prompt")}
@@ -336,7 +336,11 @@ export default class SecureBackupPanel extends React.PureComponent<{}, IState> {
             statusDescription = (
                 <>
                     <SettingsSubsectionText>
-                        {_t("settings|security|key_backup_inactive_warning", {}, { b: (sub) => <b>{sub}</b> })}
+                        {_t(
+                            "settings|security|key_backup_inactive_warning",
+                            {},
+                            { b: (sub) => <strong>{sub}</strong> },
+                        )}
                     </SettingsSubsectionText>
                     <SettingsSubsectionText>{_t("encryption|setup_secure_backup|explainer")}</SettingsSubsectionText>
                 </>