Use semantic headings in user settings Keyboard (#10793)

* settingssubsection text component

* use semantic headings in HelpUserSetttings tab

* test

* strict

* lint

* semantic heading in labs settings

* semantic headings in keyboard settings tab

* semantic heading in preferencesusersettingstab

* tidying

* findByTestId

* prettier

* allow testids in settings sections

* use semantic headings in LabsUserSettingsTab

* use semantic headings in usersettingspreferences

* rethemendex

* put back margin var

res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.pcss

@@ -15,31 +15,26 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_KeyboardUserSettingsTab .mx_SettingsTab_section {
-    ul {
-        margin: 0;
-        padding: 0;
-    }
-
-    .mx_KeyboardShortcut_shortcutRow,
-    .mx_KeyboardShortcut {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
-
-    .mx_KeyboardShortcut_shortcutRow {
-        column-gap: $spacing-8;
-        margin-bottom: $spacing-4;
-
-        /* TODO: Use flexbox */
-        &:last-of-type {
-            margin-bottom: 0;
-        }
-
-        .mx_KeyboardShortcut {
-            flex-wrap: nowrap;
-            column-gap: 5px; /* TODO: Use a spacing variable */
-        }
-    }
+.mx_KeyboardShortcut_shortcutList {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    display: grid;
+    grid-gap: $spacing-4;
+}
+
+.mx_KeyboardShortcut_shortcutRow,
+.mx_KeyboardShortcut {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.mx_KeyboardShortcut_shortcutRow {
+    column-gap: $spacing-8;
+}
+
+.mx_KeyboardShortcut {
+    flex-wrap: nowrap;
+    column-gap: $spacing-4;
 }

src/components/views/settings/tabs/user/KeyboardUserSettingsTab.tsx

@@ -25,6 +25,9 @@ import {
     getKeyboardShortcutValue,
 } from "../../../../../accessibility/KeyboardShortcutUtils";
 import { KeyboardShortcut } from "../../KeyboardShortcut";
+import SettingsTab from "../SettingsTab";
+import { SettingsSection } from "../../shared/SettingsSection";
+import SettingsSubsection from "../../shared/SettingsSubsection";
 
 interface IKeyboardShortcutRowProps {
     name: KeyBindingAction;
@@ -57,26 +60,27 @@ const KeyboardShortcutSection: React.FC<IKeyboardShortcutSectionProps> = ({ cate
     if (!category.categoryLabel) return null;
 
     return (
-        <div className="mx_SettingsTab_section" key={categoryName}>
-            <div className="mx_SettingsTab_subheading">{_t(category.categoryLabel)}</div>
-            <ul>
-                {" "}
+        <SettingsSubsection heading={_t(category.categoryLabel)} key={categoryName}>
+            <ul className="mx_KeyboardShortcut_shortcutList">
                 {category.settingNames.map((shortcutName) => {
                     return <KeyboardShortcutRow key={shortcutName} name={shortcutName} />;
-                })}{" "}
+                })}
             </ul>
-        </div>
+        </SettingsSubsection>
     );
 };
 
 const KeyboardUserSettingsTab: React.FC = () => {
     return (
-        <div className="mx_SettingsTab mx_KeyboardUserSettingsTab">
-            <div className="mx_SettingsTab_heading">{_t("Keyboard")}</div>
-            {visibleCategories.map(([categoryName, category]) => {
-                return <KeyboardShortcutSection key={categoryName} categoryName={categoryName} category={category} />;
-            })}
-        </div>
+        <SettingsTab>
+            <SettingsSection heading={_t("Keyboard")}>
+                {visibleCategories.map(([categoryName, category]: [CategoryName, ICategory]) => {
+                    return (
+                        <KeyboardShortcutSection key={categoryName} categoryName={categoryName} category={category} />
+                    );
+                })}
+            </SettingsSection>
+        </SettingsTab>
     );
 };