Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Use strong element to semantically denote visually emphasised content #12320

Merged
merged 3 commits into from
Mar 6, 2024
Merged

Use strong element to semantically denote visually emphasised content #12320

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
da03ec4
Use `strong` element to semantically denote visually emphasised content
t3chguy Mar 6, 2024
ecd306f
Update snapshots
t3chguy Mar 6, 2024
d7d2ec9
Add comment
t3chguy Mar 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
t3chguy marked this conversation as resolved.
Show resolved Hide resolved

&::before {
content: "";
Expand Down
4 changes: 3 additions & 1 deletion src/async-components/views/dialogs/security/NewRecoveryMethodDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()) {
Expand Down
2 changes: 1 addition & 1 deletion src/async-components/views/dialogs/security/RecoveryMethodRemovedDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
8 changes: 4 additions & 4 deletions src/components/structures/MatrixChat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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>,
);
}
}
Expand Down
10 changes: 5 additions & 5 deletions src/components/views/dialogs/security/AccessSecretStorageDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = (
<div className="mx_AccessSecretStorageDialog_reset">
const resetLine = (
<strong className="mx_AccessSecretStorageDialog_reset">
{_t("encryption|reset_all_button", undefined, {
a: (sub) => (
<AccessibleButton
Expand All @@ -291,7 +291,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
</AccessibleButton>
),
})}
</div>
</strong>
);

let content;
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/components/views/settings/SetIdServer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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>
),
Expand Down
4 changes: 2 additions & 2 deletions src/components/views/settings/tabs/user/MjolnirUserSettingsTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
</>
Expand Down
8 changes: 4 additions & 4 deletions test/components/views/settings/tabs/user/__snapshots__/MjolnirUserSettingsTab-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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.
Expand Down
Loading