From 40eefb0c674469c9d501a2dfb52dd5bf003ceeef Mon Sep 17 00:00:00 2001 From: Jay Sitter Date: Wed, 21 Jun 2023 08:27:27 -0400 Subject: [PATCH] fix(tabs): Fix tab semantics and a11y (#1382) * fix: Fix tab semantics for Settings page * fix: Use new tabpanel markup for admin settings * fix: Remove unused currentTab behavior * fix: Remove Bootstrap tab JS dependency * fix: Add tabpanel role to rate limit tab panels * fix: Fix style of tabs --------- Co-authored-by: SleeplessOne1917 Co-authored-by: Dessalines --- src/shared/components/common/tabs.tsx | 26 ++-- src/shared/components/home/admin-settings.tsx | 115 +++++++++++------- .../components/home/rate-limit-form.tsx | 10 +- src/shared/components/person/settings.tsx | 53 +++++--- 4 files changed, 135 insertions(+), 69 deletions(-) diff --git a/src/shared/components/common/tabs.tsx b/src/shared/components/common/tabs.tsx index 17980a47..3c2726a5 100644 --- a/src/shared/components/common/tabs.tsx +++ b/src/shared/components/common/tabs.tsx @@ -1,8 +1,9 @@ +import classNames from "classnames"; import { Component, InfernoNode, linkEvent } from "inferno"; interface TabItem { key: string; - getNode: () => InfernoNode; + getNode: (isSelected: boolean) => InfernoNode; label: string; } @@ -30,24 +31,33 @@ export default class Tabs extends Component { render() { return (
-
    +
      {this.props.tabs.map(({ key, label }) => (
    • ))}
    - {this.props.tabs - .find(tab => tab.key === this.state?.currentTab) - ?.getNode()} +
    + {this.props.tabs.map(({ key, getNode }) => { + return getNode(this.state?.currentTab === key); + })} +
); } diff --git a/src/shared/components/home/admin-settings.tsx b/src/shared/components/home/admin-settings.tsx index 1de9f875..23454ab9 100644 --- a/src/shared/components/home/admin-settings.tsx +++ b/src/shared/components/home/admin-settings.tsx @@ -1,3 +1,4 @@ +import classNames from "classnames"; import { Component, linkEvent } from "inferno"; import { BannedPersonsResponse, @@ -130,22 +131,30 @@ export class AdminSettings extends Component { { key: "site", label: i18n.t("site"), - getNode: () => ( -
-
- -
-
- {this.admins()} - {this.bannedUsers()} + getNode: isSelected => ( +
+
+
+ +
+
+ {this.admins()} + {this.bannedUsers()} +
), @@ -153,40 +162,64 @@ export class AdminSettings extends Component { { key: "rate_limiting", label: "Rate Limiting", - getNode: () => ( - - ), - }, - { - key: "taglines", - label: i18n.t("taglines"), - getNode: () => ( -
- ( +
+
), }, + { + key: "taglines", + label: i18n.t("taglines"), + getNode: isSelected => ( +
+
+ +
+
+ ), + }, { key: "emojis", label: i18n.t("emojis"), - getNode: () => ( -
- + getNode: isSelected => ( +
+
+ +
), }, diff --git a/src/shared/components/home/rate-limit-form.tsx b/src/shared/components/home/rate-limit-form.tsx index 1b2e281b..11c1a8e8 100644 --- a/src/shared/components/home/rate-limit-form.tsx +++ b/src/shared/components/home/rate-limit-form.tsx @@ -1,3 +1,4 @@ +import classNames from "classnames"; import { Component, FormEventHandler, linkEvent } from "inferno"; import { EditSite, LocalSiteRateLimit } from "lemmy-js-client"; import { i18n } from "../../i18next"; @@ -19,6 +20,7 @@ interface RateLimitsProps { handleRateLimitPerSecond: FormEventHandler; rateLimitValue?: number; rateLimitPerSecondValue?: number; + className?: string; } interface RateLimitFormProps { @@ -49,9 +51,10 @@ function RateLimits({ handleRateLimitPerSecond, rateLimitPerSecondValue, rateLimitValue, + className, }: RateLimitsProps) { return ( -
+
({ key: rateLimitType, label: i18n.t(`rate_limit_${rateLimitType}`), - getNode: () => ( + getNode: isSelected => ( { ); } - userSettings() { + userSettings(isSelected) { return ( -
-
-
-
{this.saveUserSettingsHtmlForm()}
+
+
+
+
+
{this.saveUserSettingsHtmlForm()}
+
-
-
-
-
{this.changePasswordHtmlForm()}
+
+
+
{this.changePasswordHtmlForm()}
+
); } - blockCards() { + blockCards(isSelected) { return ( -
-
-
-
{this.blockUserCard()}
+
+
+
+
+
{this.blockUserCard()}
+
-
-
-
-
{this.blockCommunityCard()}
+
+
+
{this.blockCommunityCard()}
+