Use semantic headings in user settings Help & About

res/css/components/views/settings/shared/_SettingsSubsection.pcss

@@ -20,13 +20,30 @@ limitations under the License.
 }
 
 .mx_SettingsSubsection_description {
+    margin-top: $spacing-8;
+}
+
+.mx_SettingsSubsection_text {
     width: 100%;
     box-sizing: inherit;
-    line-height: $font-24px;
-    margin-bottom: $spacing-24;
+    font-size: $font-15px;
     color: $secondary-content;
 }
 
 .mx_SettingsSubsection_content {
     width: 100%;
+    display: grid;
+    grid-gap: $spacing-8;
+    grid-template-columns: 1fr;
+    justify-items: flex-start;
+    margin-top: $spacing-24;
+
+    summary {
+        color: $accent;
+    }
+    details[open] {
+        summary {
+            margin-bottom: $spacing-8;
+        }
+    }
 }

res/css/components/views/settings/shared/_SettingsSubsectionHeading.pcss

@@ -17,7 +17,6 @@ limitations under the License.
 .mx_SettingsSubsectionHeading {
     display: flex;
     flex-direction: row;
-    padding-bottom: $spacing-8;
 
     gap: $spacing-8;
 }

src/components/structures/RoomStatusBar.tsx

@@ -30,6 +30,7 @@ import AccessibleButton from "../views/elements/AccessibleButton";
 import InlineSpinner from "../views/elements/InlineSpinner";
 import MatrixClientContext from "../../contexts/MatrixClientContext";
 import { RoomStatusBarUnsentMessages } from "./RoomStatusBarUnsentMessages";
+import ExternalLink from "../views/elements/ExternalLink";
 
 const STATUS_BAR_HIDDEN = 0;
 const STATUS_BAR_EXPANDED = 1;
@@ -213,9 +214,9 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
                 {},
                 {
                     consentLink: (sub) => (
-                        <a href={consentError!.data?.consent_uri} target="_blank" rel="noreferrer noopener">
+                        <ExternalLink href={consentError!.data?.consent_uri} target="_blank" rel="noreferrer noopener">
                             {sub}
-                        </a>
+                        </ExternalLink>
                     ),
                 },
             );

src/components/structures/SpaceRoomView.tsx

@@ -77,6 +77,7 @@ import MainSplit from "./MainSplit";
 import RightPanel from "./RightPanel";
 import SpaceHierarchy, { showRoom } from "./SpaceHierarchy";
 import { RoomPermalinkCreator } from "../../utils/permalinks/Permalinks";
+import ExternalLink from "../views/elements/ExternalLink";
 
 interface IProps {
     space: Room;
@@ -593,9 +594,9 @@ const SpaceSetupPrivateInvite: React.FC<{
                     {
                         b: (sub) => <b>{sub}</b>,
                         link: () => (
-                            <a href="https://app.element.io/" rel="noreferrer noopener" target="_blank">
+                            <ExternalLink href="https://app.element.io/" rel="noreferrer noopener" target="_blank">
                                 app.element.io
-                            </a>
+                            </ExternalLink>
                         ),
                     },
                 )}

src/components/views/dialogs/AnalyticsLearnMoreDialog.tsx

@@ -22,6 +22,7 @@ import DialogButtons from "../elements/DialogButtons";
 import Modal, { ComponentProps } from "../../../Modal";
 import SdkConfig from "../../../SdkConfig";
 import { getPolicyUrl } from "../../../toasts/AnalyticsToast";
+import ExternalLink from "../elements/ExternalLink";
 
 export enum ButtonClicked {
     Primary,
@@ -55,10 +56,10 @@ export const AnalyticsLearnMoreDialog: React.FC<IProps> = ({
                 {
                     PrivacyPolicyUrl: (sub) => {
                         return (
-                            <a href={privacyPolicyUrl} rel="norefferer noopener" target="_blank">
+                            <ExternalLink href={privacyPolicyUrl} rel="norefferer noopener" target="_blank">
                                 {sub}
                                 <span className="mx_AnalyticsPolicyLink" />
-                            </a>
+                            </ExternalLink>
                         );
                     },
                 },

src/components/views/dialogs/FeedbackDialog.tsx

@@ -27,6 +27,7 @@ import InfoDialog from "./InfoDialog";
 import { submitFeedback } from "../../../rageshake/submit-rageshake";
 import { useStateToggle } from "../../../hooks/useStateToggle";
 import StyledCheckbox from "../elements/StyledCheckbox";
+import ExternalLink from "../elements/ExternalLink";
 
 interface IProps {
     feature?: string;
@@ -130,16 +131,20 @@ const FeedbackDialog: React.FC<IProps> = (props: IProps) => {
                                 {
                                     existingIssuesLink: (sub) => {
                                         return (
-                                            <a target="_blank" rel="noreferrer noopener" href={existingIssuesUrl}>
+                                            <ExternalLink
+                                                target="_blank"
+                                                rel="noreferrer noopener"
+                                                href={existingIssuesUrl}
+                                            >
                                                 {sub}
-                                            </a>
+                                            </ExternalLink>
                                         );
                                     },
                                     newIssueLink: (sub) => {
                                         return (
-                                            <a target="_blank" rel="noreferrer noopener" href={newIssueUrl}>
+                                            <ExternalLink target="_blank" rel="noreferrer noopener" href={newIssueUrl}>
                                                 {sub}
-                                            </a>
+                                            </ExternalLink>
                                         );
                                     },
                                 },

src/components/views/dialogs/ServerPickerDialog.tsx

@@ -28,6 +28,7 @@ import StyledRadioButton from "../elements/StyledRadioButton";
 import TextWithTooltip from "../elements/TextWithTooltip";
 import withValidation, { IFieldState, IValidationResult } from "../elements/Validation";
 import { ValidatedServerConfig } from "../../../utils/ValidatedServerConfig";
+import ExternalLink from "../elements/ExternalLink";
 
 interface IProps {
     title?: string;
@@ -236,9 +237,13 @@ export default class ServerPickerDialog extends React.PureComponent<IProps, ISta
                     </AccessibleButton>
 
                     <h2>{_t("Learn more")}</h2>
-                    <a href="https://matrix.org/faq/#what-is-a-homeserver%3F" target="_blank" rel="noreferrer noopener">
+                    <ExternalLink
+                        href="https://matrix.org/faq/#what-is-a-homeserver%3F"
+                        target="_blank"
+                        rel="noreferrer noopener"
+                    >
                         {_t("About homeservers")}
-                    </a>
+                    </ExternalLink>
                 </form>
             </BaseDialog>
         );

src/components/views/dialogs/TermsDialog.tsx

@@ -22,6 +22,7 @@ import { _t, pickBestLanguage } from "../../../languageHandler";
 import DialogButtons from "../elements/DialogButtons";
 import BaseDialog from "./BaseDialog";
 import { ServicePolicyPair } from "../../../Terms";
+import ExternalLink from "../elements/ExternalLink";
 
 interface ITermsCheckboxProps {
     onChange: (url: string, checked: boolean) => void;
@@ -148,9 +149,9 @@ export default class TermsDialog extends React.PureComponent<ITermsDialogProps,
                         <td className="mx_TermsDialog_summary">{summary}</td>
                         <td>
                             {termDoc[termsLang].name}
-                            <a rel="noreferrer noopener" target="_blank" href={termDoc[termsLang].url}>
+                            <ExternalLink rel="noreferrer noopener" target="_blank" href={termDoc[termsLang].url}>
                                 <span className="mx_TermsDialog_link" />
-                            </a>
+                            </ExternalLink>
                         </td>
                         <td>
                             <TermsCheckbox

src/components/views/settings/EventIndexPanel.tsx

@@ -26,6 +26,7 @@ import EventIndexPeg from "../../../indexing/EventIndexPeg";
 import { SettingLevel } from "../../../settings/SettingLevel";
 import SeshatResetDialog from "../dialogs/SeshatResetDialog";
 import InlineSpinner from "../elements/InlineSpinner";
+import ExternalLink from "../elements/ExternalLink";
 
 interface IState {
     enabling: boolean;
@@ -197,9 +198,9 @@ export default class EventIndexPanel extends React.Component<{}, IState> {
                         },
                         {
                             nativeLink: (sub) => (
-                                <a href={nativeLink} target="_blank" rel="noreferrer noopener">
+                                <ExternalLink href={nativeLink} target="_blank" rel="noreferrer noopener">
                                     {sub}
-                                </a>
+                                </ExternalLink>
                             ),
                         },
                     )}
@@ -217,9 +218,13 @@ export default class EventIndexPanel extends React.Component<{}, IState> {
                         },
                         {
                             desktopLink: (sub) => (
-                                <a href="https://element.io/get-started" target="_blank" rel="noreferrer noopener">
+                                <ExternalLink
+                                    href="https://element.io/get-started"
+                                    target="_blank"
+                                    rel="noreferrer noopener"
+                                >
                                     {sub}
-                                </a>
+                                </ExternalLink>
                             ),
                         },
                     )}

src/components/views/settings/shared/SettingsSubsection.tsx

@@ -24,10 +24,20 @@ export interface SettingsSubsectionProps extends HTMLAttributes<HTMLDivElement>
     children?: React.ReactNode;
 }
 
-const SettingsSubsection: React.FC<SettingsSubsectionProps> = ({ heading, description, children, ...rest }) => (
+export const SettingsSubsectionText: React.FC<HTMLAttributes<HTMLDivElement>> = ({ children, ...rest }) => (
+    <div {...rest} className="mx_SettingsSubsection_text">
+        {children}
+    </div>
+);
+
+export const SettingsSubsection: React.FC<SettingsSubsectionProps> = ({ heading, description, children, ...rest }) => (
     <div {...rest} className="mx_SettingsSubsection">
         {typeof heading === "string" ? <SettingsSubsectionHeading heading={heading} /> : <>{heading}</>}
-        {!!description && <div className="mx_SettingsSubsection_description">{description}</div>}
+        {!!description && (
+            <div className="mx_SettingsSubsection_description">
+                <SettingsSubsectionText>{description}</SettingsSubsectionText>
+            </div>
+        )}
         <div className="mx_SettingsSubsection_content">{children}</div>
     </div>
 );