From 68b193085262b3b9e5d79c67e0ed70bcb500c121 Mon Sep 17 00:00:00 2001 From: Kerry Date: Wed, 17 May 2023 14:34:55 +1200 Subject: [PATCH] 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 --- .../tabs/user/_KeyboardUserSettingsTab.pcss | 49 +- .../tabs/user/KeyboardUserSettingsTab.tsx | 28 +- .../KeyboardUserSettingsTab-test.tsx.snap | 2090 +++++++++-------- 3 files changed, 1117 insertions(+), 1050 deletions(-) diff --git a/res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.pcss index 6f387380f2..c4e5b5c0aa 100644 --- a/res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.pcss +++ b/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; } diff --git a/src/components/views/settings/tabs/user/KeyboardUserSettingsTab.tsx b/src/components/views/settings/tabs/user/KeyboardUserSettingsTab.tsx index c08ee2381f..f64c1ce87b 100644 --- a/src/components/views/settings/tabs/user/KeyboardUserSettingsTab.tsx +++ b/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 = ({ cate if (!category.categoryLabel) return null; return ( -
-
{_t(category.categoryLabel)}
-
    - {" "} + +
      {category.settingNames.map((shortcutName) => { return ; - })}{" "} + })}
    -
+ ); }; const KeyboardUserSettingsTab: React.FC = () => { return ( -
-
{_t("Keyboard")}
- {visibleCategories.map(([categoryName, category]) => { - return ; - })} -
+ + + {visibleCategories.map(([categoryName, category]: [CategoryName, ICategory]) => { + return ( + + ); + })} + + ); }; diff --git a/test/components/views/settings/tabs/user/__snapshots__/KeyboardUserSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/KeyboardUserSettingsTab-test.tsx.snap index 112497f7bf..9d0badffda 100644 --- a/test/components/views/settings/tabs/user/__snapshots__/KeyboardUserSettingsTab-test.tsx.snap +++ b/test/components/views/settings/tabs/user/__snapshots__/KeyboardUserSettingsTab-test.tsx.snap @@ -3,1023 +3,1091 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
- Keyboard -
-
- Composer +

+ Keyboard +

+
+
+
+

+ Composer +

+
+
+
    +
  • + Send message +
    + + + Enter + + +
    +
    • +
  • + New line +
    + + + Shift + + + + + + + Enter + + +
    +
    • +
  • + Toggle Bold +
    + + + Ctrl + + + + + + + b + + +
    +
    • +
  • + Toggle Italics +
    + + + Ctrl + + + + + + + i + + +
    +
    • +
  • + Toggle Quote +
    + + + Ctrl + + + + + + + Shift + + + + + + + > + + +
    +
    • +
  • + Toggle Link +
    + + + Ctrl + + + + + + + Shift + + + + + + + l + + +
    +
    • +
  • + Toggle Code Block +
    + + + Ctrl + + + + + + + e + + +
    +
    • +
  • + Undo edit +
    + + + Ctrl + + + + + + + z + + +
    +
    • +
  • + Redo edit +
    + + + Ctrl + + + + + + + y + + +
    +
    • +
  • + Jump to start of the composer +
    + + + Ctrl + + + + + + + Home + + +
    +
    • +
  • + Jump to end of the composer +
    + + + Ctrl + + + + + + + End + + +
    +
    • +
  • + Cancel replying to a message +
    + + + Esc + + +
    +
    • +
  • + Navigate to next message to edit +
    + + + ↓ + + +
    +
    • +
  • + Navigate to previous message to edit +
    + + + ↑ + + +
    +
    • +
  • + Navigate to next message in composer history +
    + + + Ctrl + + + + + + + Alt + + + + + + + ↓ + + +
    +
    • +
  • + Navigate to previous message in composer history +
    + + + Ctrl + + + + + + + Alt + + + + + + + ↑ + + +
    +
    • +
  • + Send a sticker +
    + + + Ctrl + + + + + + + ; + + +
    +
    • +
+
+
+
+
+

+ Calls +

+
+
+
    +
  • + Toggle microphone mute +
    + + + Ctrl + + + + + + + d + + +
    +
    • +
  • + Toggle webcam on/off +
    + + + Ctrl + + + + + + + e + + +
    +
    • +
+
+
+
+
+

+ Room +

+
+
+
    +
  • + Search (must be enabled) +
    + + + Ctrl + + + + + + + f + + +
    +
    • +
  • + Upload a file +
    + + + Ctrl + + + + + + + Shift + + + + + + + u + + +
    +
    • +
  • + Dismiss read marker and jump to bottom +
    + + + Esc + + +
    +
    • +
  • + Jump to oldest unread message +
    + + + Shift + + + + + + + Page Up + + +
    +
    • +
  • + Scroll up in the timeline +
    + + + Page Up + + +
    +
    • +
  • + Scroll down in the timeline +
    + + + Page Down + + +
    +
    • +
  • + Jump to first message +
    + + + Ctrl + + + + + + + Home + + +
    +
    • +
  • + Jump to last message +
    + + + Ctrl + + + + + + + End + + +
    +
    • +
+
+
+
+
+

+ Room List +

+
+
+
    +
  • + Select room from the room list +
    + + + Enter + + +
    +
    • +
  • + Collapse room list section +
    + + + ← + + +
    +
    • +
  • + Expand room list section +
    + + + → + + +
    +
    • +
  • + Navigate down in the room list +
    + + + ↓ + + +
    +
    • +
  • + Navigate up in the room list +
    + + + ↑ + + +
    +
    • +
+
+
+
+
+

+ Accessibility +

+
+
+
    +
  • + Close dialog or context menu +
    + + + Esc + + +
    +
    • +
  • + Activate selected button +
    + + + Enter + + +
    +
    • +
+
+
+
+
+

+ Navigation +

+
+
+
    +
  • + Toggle the top left menu +
    + + + Ctrl + + + + + + + \` + + +
    +
    • +
  • + Toggle right panel +
    + + + Ctrl + + + + + + + . + + +
    +
    • +
  • + Toggle space panel +
    + + + Ctrl + + + + + + + Shift + + + + + + + d + + +
    +
    • +
  • + Open this settings tab +
    + + + Ctrl + + + + + + + / + + +
    +
    • +
  • + Go to Home View +
    + + + Ctrl + + + + + + + Alt + + + + + + + h + + +
    +
    • +
  • + Jump to room search +
    + + + Ctrl + + + + + + + k + + +
    +
    • +
  • + Next unread room or DM +
    + + + Alt + + + + + + + Shift + + + + + + + ↓ + + +
    +
    • +
  • + Previous unread room or DM +
    + + + Alt + + + + + + + Shift + + + + + + + ↑ + + +
    +
    • +
  • + Next room or DM +
    + + + Alt + + + + + + + ↓ + + +
    +
    • +
  • + Previous room or DM +
    + + + Alt + + + + + + + ↑ + + +
    +
    • +
+
+
+
+
+

+ Autocomplete +

+
+
+
    +
  • + Cancel autocomplete +
    + + + Esc + + +
    +
    • +
  • + Next autocomplete suggestion +
    + + + ↓ + + +
    +
    • +
  • + Previous autocomplete suggestion +
    + + + ↑ + + +
    +
    • +
  • + Complete +
    + + + Enter + + +
    +
    • +
  • + Force complete +
    + + + Tab + + +
    +
    • +
+
+
+
-
    - -
  • - Send message -
    - - - Enter - - -
    -
    • -
  • - New line -
    - - - Shift - - - + - - - Enter - - -
    -
    • -
  • - Toggle Bold -
    - - - Ctrl - - - + - - - b - - -
    -
    • -
  • - Toggle Italics -
    - - - Ctrl - - - + - - - i - - -
    -
    • -
  • - Toggle Quote -
    - - - Ctrl - - - + - - - Shift - - - + - - - > - - -
    -
    • -
  • - Toggle Link -
    - - - Ctrl - - - + - - - Shift - - - + - - - l - - -
    -
    • -
  • - Toggle Code Block -
    - - - Ctrl - - - + - - - e - - -
    -
    • -
  • - Undo edit -
    - - - Ctrl - - - + - - - z - - -
    -
    • -
  • - Redo edit -
    - - - Ctrl - - - + - - - y - - -
    -
    • -
  • - Jump to start of the composer -
    - - - Ctrl - - - + - - - Home - - -
    -
    • -
  • - Jump to end of the composer -
    - - - Ctrl - - - + - - - End - - -
    -
    • -
  • - Cancel replying to a message -
    - - - Esc - - -
    -
    • -
  • - Navigate to next message to edit -
    - - - ↓ - - -
    -
    • -
  • - Navigate to previous message to edit -
    - - - ↑ - - -
    -
    • -
  • - Navigate to next message in composer history -
    - - - Ctrl - - - + - - - Alt - - - + - - - ↓ - - -
    -
    • -
  • - Navigate to previous message in composer history -
    - - - Ctrl - - - + - - - Alt - - - + - - - ↑ - - -
    -
    • -
  • - Send a sticker -
    - - - Ctrl - - - + - - - ; - - -
    -
    • - -
-
-
-
- Calls -
-
    - -
  • - Toggle microphone mute -
    - - - Ctrl - - - + - - - d - - -
    -
    • -
  • - Toggle webcam on/off -
    - - - Ctrl - - - + - - - e - - -
    -
    • - -
-
-
-
- Room -
-
    - -
  • - Search (must be enabled) -
    - - - Ctrl - - - + - - - f - - -
    -
    • -
  • - Upload a file -
    - - - Ctrl - - - + - - - Shift - - - + - - - u - - -
    -
    • -
  • - Dismiss read marker and jump to bottom -
    - - - Esc - - -
    -
    • -
  • - Jump to oldest unread message -
    - - - Shift - - - + - - - Page Up - - -
    -
    • -
  • - Scroll up in the timeline -
    - - - Page Up - - -
    -
    • -
  • - Scroll down in the timeline -
    - - - Page Down - - -
    -
    • -
  • - Jump to first message -
    - - - Ctrl - - - + - - - Home - - -
    -
    • -
  • - Jump to last message -
    - - - Ctrl - - - + - - - End - - -
    -
    • - -
-
-
-
- Room List -
-
    - -
  • - Select room from the room list -
    - - - Enter - - -
    -
    • -
  • - Collapse room list section -
    - - - ← - - -
    -
    • -
  • - Expand room list section -
    - - - → - - -
    -
    • -
  • - Navigate down in the room list -
    - - - ↓ - - -
    -
    • -
  • - Navigate up in the room list -
    - - - ↑ - - -
    -
    • - -
-
-
-
- Accessibility -
-
    - -
  • - Close dialog or context menu -
    - - - Esc - - -
    -
    • -
  • - Activate selected button -
    - - - Enter - - -
    -
    • - -
-
-
-
- Navigation -
-
    - -
  • - Toggle the top left menu -
    - - - Ctrl - - - + - - - \` - - -
    -
    • -
  • - Toggle right panel -
    - - - Ctrl - - - + - - - . - - -
    -
    • -
  • - Toggle space panel -
    - - - Ctrl - - - + - - - Shift - - - + - - - d - - -
    -
    • -
  • - Open this settings tab -
    - - - Ctrl - - - + - - - / - - -
    -
    • -
  • - Go to Home View -
    - - - Ctrl - - - + - - - Alt - - - + - - - h - - -
    -
    • -
  • - Jump to room search -
    - - - Ctrl - - - + - - - k - - -
    -
    • -
  • - Next unread room or DM -
    - - - Alt - - - + - - - Shift - - - + - - - ↓ - - -
    -
    • -
  • - Previous unread room or DM -
    - - - Alt - - - + - - - Shift - - - + - - - ↑ - - -
    -
    • -
  • - Next room or DM -
    - - - Alt - - - + - - - ↓ - - -
    -
    • -
  • - Previous room or DM -
    - - - Alt - - - + - - - ↑ - - -
    -
    • - -
-
-
-
- Autocomplete -
-
    - -
  • - Cancel autocomplete -
    - - - Esc - - -
    -
    • -
  • - Next autocomplete suggestion -
    - - - ↓ - - -
    -
    • -
  • - Previous autocomplete suggestion -
    - - - ↑ - - -
    -
    • -
  • - Complete -
    - - - Enter - - -
    -
    • -
  • - Force complete -
    - - - Tab - - -
    -
    • - -