fix(tabs): Fix tab semantics and a11y (#1382)

[lemmy-ui.git] / src / shared / components / home / rate-limit-form.tsx

diff --git a/src/shared/components/home/rate-limit-form.tsx b/src/shared/components/home/rate-limit-form.tsx
index 1b2e281b243402bd7802269e7c07a22a379493ce..11c1a8e85b17f936eb148e98d3969823016b9c43 100644 (file)
--- 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<HTMLInputElement>;
   rateLimitValue?: number;
   rateLimitPerSecondValue?: number;
+  className?: string;
 }
 
 interface RateLimitFormProps {
@@ -49,9 +51,10 @@ function RateLimits({
   handleRateLimitPerSecond,
   rateLimitPerSecondValue,
   rateLimitValue,
+  className,
 }: RateLimitsProps) {
   return (
-    <div className="mb-3 row">
+    <div role="tabpanel" className={classNames("mb-3 row", className)}>
       <div className="col-md-6">
         <label htmlFor="rate-limit">{i18n.t("rate_limit")}</label>
         <input
@@ -142,8 +145,11 @@ export default class RateLimitsForm extends Component<
           tabs={rateLimitTypes.map(rateLimitType => ({
             key: rateLimitType,
             label: i18n.t(`rate_limit_${rateLimitType}`),
-            getNode: () => (
+            getNode: isSelected => (
               <RateLimits
+                className={classNames("tab-pane show", {
+                  active: isSelected,
+                })}
                 handleRateLimit={linkEvent(
                   { rateLimitType, ctx: this },
                   handleRateLimitChange