PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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
Show stats Download patch file Download diff file Expand all files Collapse all files

37
res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.pcss
View file

@ -15,31 +15,26 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_KeyboardUserSettingsTab .mx_SettingsTab_section {
ul {
.mx_KeyboardShortcut_shortcutList {
margin: 0;
padding: 0;
}
width: 100%;
display: grid;
grid-gap: $spacing-4;
}
.mx_KeyboardShortcut_shortcutRow,
.mx_KeyboardShortcut {
.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_shortcutRow {
column-gap: $spacing-8;
}
.mx_KeyboardShortcut {
flex-wrap: nowrap;
column-gap: $spacing-4;
}

26
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} />;
<SettingsTab>
<SettingsSection heading={_t("Keyboard")}>
{visibleCategories.map(([categoryName, category]: [CategoryName, ICategory]) => {
return (
<KeyboardShortcutSection key={categoryName} categoryName={categoryName} category={category} />
);
})}
</div>
</SettingsSection>
</SettingsTab>
);
};

144
test/components/views/settings/tabs/user/__snapshots__/KeyboardUserSettingsTab-test.tsx.snap
View file

@ -3,23 +3,40 @@
exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
<div>
<div
class="mx_SettingsTab mx_KeyboardUserSettingsTab"
class="mx_SettingsTab"
>
<div
class="mx_SettingsTab_heading"
class="mx_SettingsTab_sections"
>
<div
class="mx_SettingsSection"
>
<h2
class="mx_Heading_h2"
>
Keyboard
</div>
</h2>
<div
class="mx_SettingsTab_section"
class="mx_SettingsSection_subSections"
>
<div
class="mx_SettingsTab_subheading"
class="mx_SettingsSubsection"
>
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Composer
</h3>
</div>
<ul>
<div
class="mx_SettingsSubsection_content"
>
<ul
class="mx_KeyboardShortcut_shortcutList"
>
<li
class="mx_KeyboardShortcut_shortcutRow"
>
@ -360,19 +377,27 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
</kbd>
</div>
</li>
</ul>
</div>
</div>
<div
class="mx_SettingsTab_section"
class="mx_SettingsSubsection"
>
<div
class="mx_SettingsTab_subheading"
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Calls
</h3>
</div>
<ul>
<div
class="mx_SettingsSubsection_content"
>
<ul
class="mx_KeyboardShortcut_shortcutList"
>
<li
class="mx_KeyboardShortcut_shortcutRow"
>
@ -413,19 +438,27 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
</kbd>
</div>
</li>
</ul>
</div>
</div>
<div
class="mx_SettingsTab_section"
class="mx_SettingsSubsection"
>
<div
class="mx_SettingsTab_subheading"
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Room
</h3>
</div>
<ul>
<div
class="mx_SettingsSubsection_content"
>
<ul
class="mx_KeyboardShortcut_shortcutList"
>
<li
class="mx_KeyboardShortcut_shortcutRow"
>
@ -574,19 +607,27 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
</kbd>
</div>
</li>
</ul>
</div>
</div>
<div
class="mx_SettingsTab_section"
class="mx_SettingsSubsection"
>
<div
class="mx_SettingsTab_subheading"
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Room List
</h3>
</div>
<ul>
<div
class="mx_SettingsSubsection_content"
>
<ul
class="mx_KeyboardShortcut_shortcutList"
>
<li
class="mx_KeyboardShortcut_shortcutRow"
>
@ -657,19 +698,27 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
</kbd>
</div>
</li>
</ul>
</div>
</div>
<div
class="mx_SettingsTab_section"
class="mx_SettingsSubsection"
>
<div
class="mx_SettingsTab_subheading"
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Accessibility
</h3>
</div>
<ul>
<div
class="mx_SettingsSubsection_content"
>
<ul
class="mx_KeyboardShortcut_shortcutList"
>
<li
class="mx_KeyboardShortcut_shortcutRow"
>
@ -698,19 +747,27 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
</kbd>
</div>
</li>
</ul>
</div>
</div>
<div
class="mx_SettingsTab_section"
class="mx_SettingsSubsection"
>
<div
class="mx_SettingsTab_subheading"
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Navigation
</h3>
</div>
<ul>
<div
class="mx_SettingsSubsection_content"
>
<ul
class="mx_KeyboardShortcut_shortcutList"
>
<li
class="mx_KeyboardShortcut_shortcutRow"
>
@ -935,19 +992,27 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
</kbd>
</div>
</li>
</ul>
</div>
</div>
<div
class="mx_SettingsTab_section"
class="mx_SettingsSubsection"
>
<div
class="mx_SettingsTab_subheading"
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Autocomplete
</h3>
</div>
<ul>
<div
class="mx_SettingsSubsection_content"
>
<ul
class="mx_KeyboardShortcut_shortcutList"
>
<li
class="mx_KeyboardShortcut_shortcutRow"
>
@ -1018,9 +1083,12 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
</kbd>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;