Use semantic headings in user settings Help & About (#10752)

* split SettingsSection out of SettingsTab, replace usage * correct copyright * use semantic headings in GeneralRoomSettingsTab * use SettingsTab and SettingsSubsection in room settings * fix VoipRoomSettingsTab * use SettingsSection components in space settings * settingssubsection text component * use semantic headings in HelpUserSetttings tab * use ExternalLink components for external links * test * strict * lint
matrix-org · May 3, 2023 · 692d73d · 692d73d
1 parent bbdca11
commit 692d73d
Show file tree

Hide file tree

Showing 7 changed files with 233 additions and 211 deletions.
diff --git a/res/css/components/views/settings/shared/_SettingsSubsection.pcss b/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;
+        }
+    }
 }
diff --git a/res/css/components/views/settings/shared/_SettingsSubsectionHeading.pcss b/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;
 }

diff --git a/src/components/views/settings/shared/SettingsSubsection.tsx b/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>
 );

diff --git a/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx b/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx
diff --git a/test/components/views/dialogs/UserSettingsDialog-test.tsx b/test/components/views/dialogs/UserSettingsDialog-test.tsx
@@ -74,7 +74,9 @@ describe("<UserSettingsDialog />", () => {
 
     const getActiveTabLabel = (container: Element) =>
         container.querySelector(".mx_TabbedView_tabLabel_active")?.textContent;
-    const getActiveTabHeading = (container: Element) => container.querySelector(".mx_SettingsTab_heading")?.textContent;
+    const getActiveTabHeading = (container: Element) =>
+        container.querySelector(".mx_SettingsTab_heading")?.textContent ||
+        container.querySelector(".mx_SettingsSection .mx_Heading_h2")?.textContent;
 
     it("should render general settings tab when no initialTabId", () => {
         const { container } = render(getComponent());

diff --git a/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap
@@ -18,7 +18,11 @@ exports[`<SecurityRecommendations /> renders both cards when user has both unver
     <div
       class="mx_SettingsSubsection_description"
     >
-      Improve your account security by following these recommendations.
+      <div
+        class="mx_SettingsSubsection_text"
+      >
+        Improve your account security by following these recommendations.
+      </div>
     </div>
     <div
       class="mx_SettingsSubsection_content"
@@ -139,7 +143,11 @@ exports[`<SecurityRecommendations /> renders inactive devices section when user
     <div
       class="mx_SettingsSubsection_description"
     >
-      Improve your account security by following these recommendations.
+      <div
+        class="mx_SettingsSubsection_text"
+      >
+        Improve your account security by following these recommendations.
+      </div>
     </div>
     <div
       class="mx_SettingsSubsection_content"
@@ -260,7 +268,11 @@ exports[`<SecurityRecommendations /> renders unverified devices section when use
     <div
       class="mx_SettingsSubsection_description"
     >
-      Improve your account security by following these recommendations.
+      <div
+        class="mx_SettingsSubsection_text"
+      >
+        Improve your account security by following these recommendations.
+      </div>
     </div>
     <div
       class="mx_SettingsSubsection_content"

diff --git a/test/components/views/settings/shared/__snapshots__/SettingsSubsection-test.tsx.snap b/test/components/views/settings/shared/__snapshots__/SettingsSubsection-test.tsx.snap
@@ -17,7 +17,11 @@ exports[`<SettingsSubsection /> renders with plain text description 1`] = `
     <div
       class="mx_SettingsSubsection_description"
     >
-      This describes the subsection
+      <div
+        class="mx_SettingsSubsection_text"
+      >
+        This describes the subsection
+      </div>
     </div>
     <div
       class="mx_SettingsSubsection_content"
@@ -72,14 +76,18 @@ exports[`<SettingsSubsection /> renders with react element description 1`] = `
     <div
       class="mx_SettingsSubsection_description"
     >
-      <p>
-        This describes the section 
-        <a
-          href="/#"
-        >
-          link
-        </a>
-      </p>
+      <div
+        class="mx_SettingsSubsection_text"
+      >
+        <p>
+          This describes the section 
+          <a
+            href="/#"
+          >
+            link
+          </a>
+        </p>
+      </div>
     </div>
     <div
       class="mx_SettingsSubsection_content"