imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use semantic headings in user settings Keyboard (#10793)

Browse source 
* 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
This commit is contained in:
Kerry 2023-05-17 14:34:55 +12:00 • committed by GitHub
parent 38ae8e98e4
commit 68b1930852
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 1117 additions and 1050 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/components/views/settings/tabs/user/KeyboardUserSettingsTab.tsx
View file

@ -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>
);
};