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. limitations under the License.
*/ */
.mx_KeyboardUserSettingsTab .mx_SettingsTab_section { .mx_KeyboardShortcut_shortcutList {
ul {
margin: 0; margin: 0;
padding: 0; padding: 0;
} width: 100%;
display: grid;
grid-gap: $spacing-4;
}
.mx_KeyboardShortcut_shortcutRow, .mx_KeyboardShortcut_shortcutRow,
.mx_KeyboardShortcut { .mx_KeyboardShortcut {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.mx_KeyboardShortcut_shortcutRow { .mx_KeyboardShortcut_shortcutRow {
column-gap: $spacing-8; column-gap: $spacing-8;
margin-bottom: $spacing-4; }
/* TODO: Use flexbox */ .mx_KeyboardShortcut {
&:last-of-type { flex-wrap: nowrap;
margin-bottom: 0; column-gap: $spacing-4;
}
.mx_KeyboardShortcut {
flex-wrap: nowrap;
column-gap: 5px; /* TODO: Use a spacing variable */
}
}
} }

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

@ -25,6 +25,9 @@ import {
getKeyboardShortcutValue, getKeyboardShortcutValue,
} from "../../../../../accessibility/KeyboardShortcutUtils"; } from "../../../../../accessibility/KeyboardShortcutUtils";
import { KeyboardShortcut } from "../../KeyboardShortcut"; import { KeyboardShortcut } from "../../KeyboardShortcut";
import SettingsTab from "../SettingsTab";
import { SettingsSection } from "../../shared/SettingsSection";
import SettingsSubsection from "../../shared/SettingsSubsection";
interface IKeyboardShortcutRowProps { interface IKeyboardShortcutRowProps {
name: KeyBindingAction; name: KeyBindingAction;
@ -57,26 +60,27 @@ const KeyboardShortcutSection: React.FC<IKeyboardShortcutSectionProps> = ({ cate
if (!category.categoryLabel) return null; if (!category.categoryLabel) return null;
return ( return (
<div className="mx_SettingsTab_section" key={categoryName}> <SettingsSubsection heading={_t(category.categoryLabel)} key={categoryName}>
<div className="mx_SettingsTab_subheading">{_t(category.categoryLabel)}</div> <ul className="mx_KeyboardShortcut_shortcutList">
<ul>
{" "}
{category.settingNames.map((shortcutName) => { {category.settingNames.map((shortcutName) => {
return <KeyboardShortcutRow key={shortcutName} name={shortcutName} />; return <KeyboardShortcutRow key={shortcutName} name={shortcutName} />;
})}{" "} })}
</ul> </ul>
</div> </SettingsSubsection>
); );
}; };
const KeyboardUserSettingsTab: React.FC = () => { const KeyboardUserSettingsTab: React.FC = () => {
return ( return (
<div className="mx_SettingsTab mx_KeyboardUserSettingsTab"> <SettingsTab>
<div className="mx_SettingsTab_heading">{_t("Keyboard")}</div> <SettingsSection heading={_t("Keyboard")}>
{visibleCategories.map(([categoryName, category]) => { {visibleCategories.map(([categoryName, category]: [CategoryName, ICategory]) => {
return <KeyboardShortcutSection key={categoryName} categoryName={categoryName} category={category} />; 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`] = ` exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
<div> <div>
<div <div
class="mx_SettingsTab mx_KeyboardUserSettingsTab" class="mx_SettingsTab"
> >
<div <div
class="mx_SettingsTab_heading" class="mx_SettingsTab_sections"
>
<div
class="mx_SettingsSection"
>
<h2
class="mx_Heading_h2"
> >
Keyboard Keyboard
</div> </h2>
<div <div
class="mx_SettingsTab_section" class="mx_SettingsSection_subSections"
> >
<div <div
class="mx_SettingsTab_subheading" class="mx_SettingsSubsection"
>
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
> >
Composer Composer
</h3>
</div> </div>
<ul> <div
class="mx_SettingsSubsection_content"
>
<ul
class="mx_KeyboardShortcut_shortcutList"
>
<li <li
class="mx_KeyboardShortcut_shortcutRow" class="mx_KeyboardShortcut_shortcutRow"
> >
@ -360,19 +377,27 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
</kbd> </kbd>
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>
</div>
<div <div
class="mx_SettingsTab_section" class="mx_SettingsSubsection"
> >
<div <div
class="mx_SettingsTab_subheading" class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
> >
Calls Calls
</h3>
</div> </div>
<ul> <div
class="mx_SettingsSubsection_content"
>
<ul
class="mx_KeyboardShortcut_shortcutList"
>
<li <li
class="mx_KeyboardShortcut_shortcutRow" class="mx_KeyboardShortcut_shortcutRow"
> >
@ -413,19 +438,27 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
</kbd> </kbd>
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>
</div>
<div <div
class="mx_SettingsTab_section" class="mx_SettingsSubsection"
> >
<div <div
class="mx_SettingsTab_subheading" class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
> >
Room Room
</h3>
</div> </div>
<ul> <div
class="mx_SettingsSubsection_content"
>
<ul
class="mx_KeyboardShortcut_shortcutList"
>
<li <li
class="mx_KeyboardShortcut_shortcutRow" class="mx_KeyboardShortcut_shortcutRow"
> >
@ -574,19 +607,27 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
</kbd> </kbd>
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>
</div>
<div <div
class="mx_SettingsTab_section" class="mx_SettingsSubsection"
> >
<div <div
class="mx_SettingsTab_subheading" class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
> >
Room List Room List
</h3>
</div> </div>
<ul> <div
class="mx_SettingsSubsection_content"
>
<ul
class="mx_KeyboardShortcut_shortcutList"
>
<li <li
class="mx_KeyboardShortcut_shortcutRow" class="mx_KeyboardShortcut_shortcutRow"
> >
@ -657,19 +698,27 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
</kbd> </kbd>
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>
</div>
<div <div
class="mx_SettingsTab_section" class="mx_SettingsSubsection"
> >
<div <div
class="mx_SettingsTab_subheading" class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
> >
Accessibility Accessibility
</h3>
</div> </div>
<ul> <div
class="mx_SettingsSubsection_content"
>
<ul
class="mx_KeyboardShortcut_shortcutList"
>
<li <li
class="mx_KeyboardShortcut_shortcutRow" class="mx_KeyboardShortcut_shortcutRow"
> >
@ -698,19 +747,27 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
</kbd> </kbd>
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>
</div>
<div <div
class="mx_SettingsTab_section" class="mx_SettingsSubsection"
> >
<div <div
class="mx_SettingsTab_subheading" class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
> >
Navigation Navigation
</h3>
</div> </div>
<ul> <div
class="mx_SettingsSubsection_content"
>
<ul
class="mx_KeyboardShortcut_shortcutList"
>
<li <li
class="mx_KeyboardShortcut_shortcutRow" class="mx_KeyboardShortcut_shortcutRow"
> >
@ -935,19 +992,27 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
</kbd> </kbd>
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>
</div>
<div <div
class="mx_SettingsTab_section" class="mx_SettingsSubsection"
> >
<div <div
class="mx_SettingsTab_subheading" class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
> >
Autocomplete Autocomplete
</h3>
</div> </div>
<ul> <div
class="mx_SettingsSubsection_content"
>
<ul
class="mx_KeyboardShortcut_shortcutList"
>
<li <li
class="mx_KeyboardShortcut_shortcutRow" class="mx_KeyboardShortcut_shortcutRow"
> >
@ -1018,9 +1083,12 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
</kbd> </kbd>
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</div>
</div>
</div>
</div>
</div> </div>
`; `;