Use strong over b for improved a11y semantics

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-09-13 12:09:41 +01:00
parent 6b384fe9c1
commit a6e98b0b63
No known key found for this signature in database
GPG key ID: A2B008A5F49F5D0D
35 changed files with 80 additions and 66 deletions

View file

@ -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);
}

View file

@ -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>

View file

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

View file

@ -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}>

View file

@ -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}>

View file

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

View file

@ -465,7 +465,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 ? (

View file

@ -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>

View file

@ -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}

View file

@ -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">

View file

@ -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;

View file

@ -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>

View file

@ -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;

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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;

View file

@ -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>

View file

@ -391,7 +391,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">
@ -453,7 +455,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">

View file

@ -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>

View file

@ -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>

View file

@ -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 />

View file

@ -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>,
},
)}

View file

@ -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>

View file

@ -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(

View file

@ -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>
</>

View file

@ -188,8 +188,8 @@ export default class SetIdServer extends React.Component<IProps, IState> {
"identity_server|change_prompt",
{},
{
current: (sub) => <b>{abbreviateUrl(currentClientIdServer)}</b>,
new: (sub) => <b>{abbreviateUrl(idServer)}</b>,
current: (sub) => <strong>{abbreviateUrl(currentClientIdServer)}</strong>,
new: (sub) => <strong>{abbreviateUrl(idServer)}</strong>,
},
),
button: _t("action|continue"),
@ -235,7 +235,7 @@ export default class SetIdServer extends React.Component<IProps, IState> {
unboundMessage: _t(
"identity_server|disconnect_server",
{},
{ idserver: (sub) => <b>{abbreviateUrl(this.state.currentClientIdServer)}</b> },
{ idserver: (sub) => <strong>{abbreviateUrl(this.state.currentClientIdServer)}</strong> },
),
button: _t("action|disconnect"),
});
@ -278,8 +278,8 @@ export default class SetIdServer extends React.Component<IProps, IState> {
let message;
let danger = false;
const messageElements = {
idserver: (sub: string) => <b>{abbreviateUrl(currentClientIdServer)}</b>,
b: (sub: string) => <b>{sub}</b>,
idserver: (sub: string) => <strong>{abbreviateUrl(currentClientIdServer)}</strong>,
b: (sub: string) => <strong>{sub}</strong>,
};
if (!currentServerReachable) {
message = (
@ -356,13 +356,13 @@ export default class SetIdServer extends React.Component<IProps, IState> {
bodyText = _t(
"identity_server|description_connected",
{},
{ server: (sub) => <b>{abbreviateUrl(idServerUrl)}</b> },
{ server: (sub) => <strong>{abbreviateUrl(idServerUrl)}</strong> },
);
if (this.props.missingTerms) {
bodyText = _t(
"identity_server|change_server_prompt",
{},
{ server: (sub) => <b>{abbreviateUrl(idServerUrl)}</b> },
{ server: (sub) => <strong>{abbreviateUrl(idServerUrl)}</strong> },
);
}
} else {

View file

@ -58,7 +58,7 @@ export default class SetIntegrationManager extends React.Component<IProps, IStat
bodyText = _t(
"integration_manager|use_im_default",
{ serverName: currentManager.name },
{ b: (sub) => <b>{sub}</b> },
{ b: (sub) => <strong>{sub}</strong> },
);
} else {
bodyText = _t("integration_manager|use_im");

View file

@ -115,7 +115,7 @@ export default class AdvancedRoomSettingsTab extends React.Component<IProps, ISt
"room_settings|advanced|room_upgrade_warning",
{},
{
b: (sub) => <b>{sub}</b>,
b: (sub) => <strong>{sub}</strong>,
i: (sub) => <i>{sub}</i>,
},
)}

View file

@ -117,7 +117,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
{_t(
"room_settings|security|enable_encryption_public_room_confirm_description_1",
undefined,
{ b: (sub) => <b>{sub}</b> },
{ b: (sub) => <strong>{sub}</strong> },
)}{" "}
</p>
<p>
@ -308,7 +308,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
<p>
{" "}
{_t("room_settings|security|encrypted_room_public_confirm_description_1", undefined, {
b: (sub) => <b>{sub}</b>,
b: (sub) => <strong>{sub}</strong>,
})}{" "}
</p>
<p>

View file

@ -302,7 +302,7 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
<summary className="mx_HelpUserSettingsTab_accessTokenDetails">
{_t("common|access_token")}
</summary>
<b>{_t("setting|help_about|access_token_detail")}</b>
<strong>{_t("setting|help_about|access_token_detail")}</strong>
<CopyableText getTextToCopy={() => this.context.getAccessToken()}>
{this.context.getAccessToken()}
</CopyableText>

View file

@ -163,7 +163,9 @@ const SpaceSettingsVisibilityTab: React.FC<IProps> = ({ matrixClient: cli, space
<p>
{_t("room_settings|visibility|history_visibility_anyone_space_description")}
<br />
<b>{_t("room_settings|visibility|history_visibility_anyone_space_recommendation")}</b>
<strong>
{_t("room_settings|visibility|history_visibility_anyone_space_recommendation")}
</strong>
</p>
</div>
</SettingsFieldset>

View file

@ -98,7 +98,7 @@ export default class HTMLExporter extends Exporter {
exportDate,
},
{
roomName: () => <b>{safeRoomName}</b>,
roomName: () => <strong>{safeRoomName}</strong>,
exporterDetails: () => (
<a
href={`https://matrix.to/#/${encodeURIComponent(exporter)}`}
@ -107,10 +107,10 @@ export default class HTMLExporter extends Exporter {
>
{exporterName ? (
<>
<b>{escapeHtml(exporterName)}</b>I {" (" + safeExporter + ")"}
<strong>{escapeHtml(exporterName)}</strong>I {" (" + safeExporter + ")"}
</>
) : (
<b>{safeExporter}</b>
<strong>{safeExporter}</strong>
)}
</a>
),

View file

@ -154,14 +154,14 @@ export class CapabilityText {
if (room) {
return (
<TextWithTooltip tooltip={room.getCanonicalAlias() ?? roomId}>
<b>{room.name}</b>
<strong>{room.name}</strong>
</TextWithTooltip>
);
} else {
return (
<b>
<strong>
<code>{roomId}</code>
</b>
</strong>
);
}
},
@ -209,7 +209,7 @@ export class CapabilityText {
eventType: eventCap.eventType,
},
{
b: (sub) => <b>{sub}</b>,
b: (sub) => <strong>{sub}</strong>,
},
),
byline: CapabilityText.bylineFor(eventCap),
@ -222,7 +222,7 @@ export class CapabilityText {
eventType: eventCap.eventType,
},
{
b: (sub) => <b>{sub}</b>,
b: (sub) => <strong>{sub}</strong>,
},
),
byline: CapabilityText.bylineFor(eventCap),
@ -238,7 +238,7 @@ export class CapabilityText {
eventType: eventCap.eventType,
},
{
b: (sub) => <b>{sub}</b>,
b: (sub) => <strong>{sub}</strong>,
},
),
byline: CapabilityText.bylineFor(eventCap),
@ -251,7 +251,7 @@ export class CapabilityText {
eventType: eventCap.eventType,
},
{
b: (sub) => <b>{sub}</b>,
b: (sub) => <strong>{sub}</strong>,
},
),
byline: CapabilityText.bylineFor(eventCap),
@ -266,7 +266,7 @@ export class CapabilityText {
"widget|capability|capability",
{ capability },
{
b: (sub) => <b>{sub}</b>,
b: (sub) => <strong>{sub}</strong>,
},
),
};
@ -390,7 +390,7 @@ export class CapabilityText {
msgtype: eventCap.keyStr,
},
{
b: (sub) => <b>{sub}</b>,
b: (sub) => <strong>{sub}</strong>,
},
);
} else {
@ -400,7 +400,7 @@ export class CapabilityText {
msgtype: eventCap.keyStr,
},
{
b: (sub) => <b>{sub}</b>,
b: (sub) => <strong>{sub}</strong>,
},
);
}
@ -412,7 +412,7 @@ export class CapabilityText {
msgtype: eventCap.keyStr,
},
{
b: (sub) => <b>{sub}</b>,
b: (sub) => <strong>{sub}</strong>,
},
);
} else {
@ -422,7 +422,7 @@ export class CapabilityText {
msgtype: eventCap.keyStr,
},
{
b: (sub) => <b>{sub}</b>,
b: (sub) => <strong>{sub}</strong>,
},
);
}