From 322a44bf24ec63bc2c0518ea7751e4a3a2f8e9e7 Mon Sep 17 00:00:00 2001
From: SleeplessOne1917 <abias1122@gmail.com>
Date: Tue, 4 Jul 2023 20:53:28 +0000
Subject: [PATCH 1/5] Fix data-bs-theme (#1810)

* Fix data-bs-theme

* Add other dark themes

* Add vaporwave-dark to dark theme list
---
 src/client/index.tsx                      |  4 ++--
 src/server/handlers/catch-all-handler.tsx |  2 +-
 src/shared/components/app/app.tsx         | 15 ++++++++-------
 src/shared/utils/browser/data-bs-theme.ts | 14 ++++++++++----
 4 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/client/index.tsx b/src/client/index.tsx
index 36059f97..2bdd948f 100644
--- a/src/client/index.tsx
+++ b/src/client/index.tsx
@@ -2,7 +2,7 @@ import { initializeSite, setupDateFns } from "@utils/app";
 import { hydrate } from "inferno-hydrate";
 import { Router } from "inferno-router";
 import { App } from "../shared/components/app/app";
-import { HistoryService } from "../shared/services";
+import { HistoryService, UserService } from "../shared/services";
 
 import "bootstrap/js/dist/collapse";
 import "bootstrap/js/dist/dropdown";
@@ -14,7 +14,7 @@ async function startClient() {
 
   const wrapper = (
     <Router history={HistoryService.history}>
-      <App />
+      <App user={UserService.Instance.myUserInfo} />
     </Router>
   );
 
diff --git a/src/server/handlers/catch-all-handler.tsx b/src/server/handlers/catch-all-handler.tsx
index 6b214944..4b011045 100644
--- a/src/server/handlers/catch-all-handler.tsx
+++ b/src/server/handlers/catch-all-handler.tsx
@@ -114,7 +114,7 @@ export default async (req: Request, res: Response) => {
 
     const wrapper = (
       <StaticRouter location={url} context={isoData}>
-        <App />
+        <App user={site?.my_user} />
       </StaticRouter>
     );
 
diff --git a/src/shared/components/app/app.tsx b/src/shared/components/app/app.tsx
index 3452f962..2000bec2 100644
--- a/src/shared/components/app/app.tsx
+++ b/src/shared/components/app/app.tsx
@@ -3,6 +3,7 @@ import { dataBsTheme } from "@utils/browser";
 import { Component, RefObject, createRef, linkEvent } from "inferno";
 import { Provider } from "inferno-i18next-dess";
 import { Route, Switch } from "inferno-router";
+import { MyUserInfo } from "lemmy-js-client";
 import { IsoDataOptionalSite } from "../../interfaces";
 import { routes } from "../../routes";
 import { FirstLoadService, I18NextService, UserService } from "../../services";
@@ -14,10 +15,14 @@ import { Navbar } from "./navbar";
 import "./styles.scss";
 import { Theme } from "./theme";
 
-export class App extends Component<any, any> {
+interface AppProps {
+  user?: MyUserInfo;
+}
+
+export class App extends Component<AppProps, any> {
   private isoData: IsoDataOptionalSite = setIsoData(this.context);
   private readonly mainContentRef: RefObject<HTMLElement>;
-  constructor(props: any, context: any) {
+  constructor(props: AppProps, context: any) {
     super(props, context);
     this.mainContentRef = createRef();
   }
@@ -29,10 +34,6 @@ export class App extends Component<any, any> {
 
   user = UserService.Instance.myUserInfo;
 
-  componentDidMount() {
-    this.setState({ bsTheme: dataBsTheme(this.user) });
-  }
-
   render() {
     const siteRes = this.isoData.site_res;
     const siteView = siteRes?.site_view;
@@ -43,7 +44,7 @@ export class App extends Component<any, any> {
           <div
             id="app"
             className="lemmy-site"
-            data-bs-theme={this.state?.bsTheme}
+            data-bs-theme={dataBsTheme(this.props.user)}
           >
             <button
               type="button"
diff --git a/src/shared/utils/browser/data-bs-theme.ts b/src/shared/utils/browser/data-bs-theme.ts
index 8d73f315..97433366 100644
--- a/src/shared/utils/browser/data-bs-theme.ts
+++ b/src/shared/utils/browser/data-bs-theme.ts
@@ -1,11 +1,17 @@
+import { MyUserInfo } from "lemmy-js-client";
 import isDark from "./is-dark";
 
-export default function dataBsTheme(user) {
+export default function dataBsTheme(user?: MyUserInfo) {
   return (isDark() && user?.local_user_view.local_user.theme === "browser") ||
     (user &&
-      ["darkly", "darkly-red", "darkly-pureblack"].includes(
-        user.local_user_view.local_user.theme
-      ))
+      [
+        "darkly",
+        "darkly-red",
+        "darkly-pureblack",
+        "darkly-compact",
+        "i386",
+        "vaporwave-dark",
+      ].includes(user.local_user_view.local_user.theme))
     ? "dark"
     : "light";
 }

From 778c3533f07076711fac643c202bb9917e00e5db Mon Sep 17 00:00:00 2001
From: Jay Sitter <jsit@users.noreply.github.com>
Date: Tue, 4 Jul 2023 16:54:38 -0400
Subject: [PATCH 2/5] feat: Subtler user badge style (#1796)

---
 src/shared/components/common/user-badges.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/shared/components/common/user-badges.tsx b/src/shared/components/common/user-badges.tsx
index 03a1caec..ac84781d 100644
--- a/src/shared/components/common/user-badges.tsx
+++ b/src/shared/components/common/user-badges.tsx
@@ -53,7 +53,7 @@ export class UserBadges extends Component<UserBadgesProps> {
               {getRoleLabelPill({
                 label: I18NextService.i18n.t("banned"),
                 tooltip: I18NextService.i18n.t("banned"),
-                classes: "text-bg-danger",
+                classes: "text-danger border border-danger",
                 shrink: false,
               })}
             </span>
@@ -63,7 +63,7 @@ export class UserBadges extends Component<UserBadgesProps> {
               {getRoleLabelPill({
                 label: I18NextService.i18n.t("deleted"),
                 tooltip: I18NextService.i18n.t("deleted"),
-                classes: "text-bg-danger",
+                classes: "text-danger border border-danger",
                 shrink: false,
               })}
             </span>
@@ -74,7 +74,7 @@ export class UserBadges extends Component<UserBadgesProps> {
               {getRoleLabelPill({
                 label: I18NextService.i18n.t("op").toUpperCase(),
                 tooltip: I18NextService.i18n.t("creator"),
-                classes: "text-bg-info",
+                classes: "text-info border border-info",
                 shrink: false,
               })}
             </span>
@@ -84,7 +84,7 @@ export class UserBadges extends Component<UserBadgesProps> {
               {getRoleLabelPill({
                 label: I18NextService.i18n.t("mod"),
                 tooltip: I18NextService.i18n.t("mod"),
-                classes: "text-bg-primary",
+                classes: "text-primary border border-primary",
               })}
             </span>
           )}
@@ -93,7 +93,7 @@ export class UserBadges extends Component<UserBadgesProps> {
               {getRoleLabelPill({
                 label: I18NextService.i18n.t("admin"),
                 tooltip: I18NextService.i18n.t("admin"),
-                classes: "text-bg-danger",
+                classes: "text-danger border border-danger",
               })}
             </span>
           )}

From 26ff0f7e06bf32024161a60a5503e1a041ab778c Mon Sep 17 00:00:00 2001
From: jcgurango <jc@jcgurango.com>
Date: Wed, 5 Jul 2023 05:06:34 +0800
Subject: [PATCH 3/5] Fix home page not using site-level listing type #1612
 (#1778)

* Fix home page not using site-level listing type

* Use null handling instead
---
 src/shared/components/home/home.tsx | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx
index 5e733674..741dfa57 100644
--- a/src/shared/components/home/home.tsx
+++ b/src/shared/components/home/home.tsx
@@ -114,7 +114,7 @@ interface HomeState {
 }
 
 interface HomeProps {
-  listingType: ListingType;
+  listingType?: ListingType;
   dataType: DataType;
   sort: SortType;
   page: number;
@@ -163,12 +163,12 @@ function getDataTypeFromQuery(type?: string): DataType {
   return type ? DataType[type] : DataType.Post;
 }
 
-function getListingTypeFromQuery(type?: string): ListingType {
+function getListingTypeFromQuery(type?: string): ListingType | undefined {
   const myListingType =
     UserService.Instance.myUserInfo?.local_user_view?.local_user
       ?.default_listing_type;
 
-  return (type ? (type as ListingType) : myListingType) ?? "Local";
+  return type ? (type as ListingType) : myListingType;
 }
 
 function getSortTypeFromQuery(type?: string): SortType {
@@ -311,11 +311,12 @@ export class Home extends Component<any, HomeState> {
     client,
     auth,
     query: { dataType: urlDataType, listingType, page: urlPage, sort: urlSort },
+    site,
   }: InitialFetchRequest<QueryParams<HomeProps>>): Promise<HomeData> {
     const dataType = getDataTypeFromQuery(urlDataType);
-
-    // TODO figure out auth default_listingType, default_sort_type
-    const type_ = getListingTypeFromQuery(listingType);
+    const type_ =
+      getListingTypeFromQuery(listingType) ??
+      site.site_view.local_site.default_post_listing_type;
     const sort = getSortTypeFromQuery(urlSort);
 
     const page = urlPage ? Number(urlPage) : 1;
@@ -761,7 +762,10 @@ export class Home extends Component<any, HomeState> {
         </div>
         <div className="col-auto">
           <ListingTypeSelect
-            type_={listingType}
+            type_={
+              listingType ??
+              this.state.siteRes.site_view.local_site.default_post_listing_type
+            }
             showLocal={showLocal(this.isoData)}
             showSubscribed
             onChange={this.handleListingTypeChange}
@@ -770,7 +774,12 @@ export class Home extends Component<any, HomeState> {
         <div className="col-auto">
           <SortSelect sort={sort} onChange={this.handleSortChange} />
         </div>
-        <div className="col-auto ps-0">{getRss(listingType)}</div>
+        <div className="col-auto ps-0">
+          {getRss(
+            listingType ??
+              this.state.siteRes.site_view.local_site.default_post_listing_type
+          )}
+        </div>
       </div>
     );
   }

From c3ab9e74f8775f4b811866d2675b00f9702bde3d Mon Sep 17 00:00:00 2001
From: Alec Armbruster <35377827+alectrocute@users.noreply.github.com>
Date: Tue, 4 Jul 2023 17:08:32 -0400
Subject: [PATCH 4/5] fix toaster upon user settings change (#1802)

Co-authored-by: SleeplessOne1917 <abias1122@gmail.com>
---
 src/shared/components/home/login.tsx             |  4 +++-
 src/shared/components/home/setup.tsx             |  2 +-
 src/shared/components/home/signup.tsx            |  4 +++-
 src/shared/components/person/password-change.tsx |  4 +++-
 src/shared/components/person/settings.tsx        | 11 +++++++++--
 src/shared/services/UserService.ts               | 10 ++++++++--
 6 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/shared/components/home/login.tsx b/src/shared/components/home/login.tsx
index ffc372b3..e2986b57 100644
--- a/src/shared/components/home/login.tsx
+++ b/src/shared/components/home/login.tsx
@@ -175,7 +175,9 @@ export class Login extends Component<any, State> {
         }
 
         case "success": {
-          UserService.Instance.login(loginRes.data);
+          UserService.Instance.login({
+            res: loginRes.data,
+          });
           const site = await HttpService.client.getSite({
             auth: myAuth(),
           });
diff --git a/src/shared/components/home/setup.tsx b/src/shared/components/home/setup.tsx
index 943fd5f8..f4bdb555 100644
--- a/src/shared/components/home/setup.tsx
+++ b/src/shared/components/home/setup.tsx
@@ -206,7 +206,7 @@ export class Setup extends Component<any, State> {
       if (i.state.registerRes.state == "success") {
         const data = i.state.registerRes.data;
 
-        UserService.Instance.login(data);
+        UserService.Instance.login({ res: data });
         i.setState({ doneRegisteringUser: true });
       }
     }
diff --git a/src/shared/components/home/signup.tsx b/src/shared/components/home/signup.tsx
index 1e1f636a..bb1e1f11 100644
--- a/src/shared/components/home/signup.tsx
+++ b/src/shared/components/home/signup.tsx
@@ -469,7 +469,9 @@ export class Signup extends Component<any, State> {
 
           // Only log them in if a jwt was set
           if (data.jwt) {
-            UserService.Instance.login(data);
+            UserService.Instance.login({
+              res: data,
+            });
 
             const site = await HttpService.client.getSite({ auth: myAuth() });
 
diff --git a/src/shared/components/person/password-change.tsx b/src/shared/components/person/password-change.tsx
index 68a22f62..565f55e6 100644
--- a/src/shared/components/person/password-change.tsx
+++ b/src/shared/components/person/password-change.tsx
@@ -135,7 +135,9 @@ export class PasswordChange extends Component<any, State> {
 
       if (i.state.passwordChangeRes.state === "success") {
         const data = i.state.passwordChangeRes.data;
-        UserService.Instance.login(data);
+        UserService.Instance.login({
+          res: data,
+        });
 
         const site = await HttpService.client.getSite({ auth: myAuth() });
         if (site.state === "success") {
diff --git a/src/shared/components/person/settings.tsx b/src/shared/components/person/settings.tsx
index dfdf79c4..4caef458 100644
--- a/src/shared/components/person/settings.tsx
+++ b/src/shared/components/person/settings.tsx
@@ -1175,8 +1175,12 @@ export class Settings extends Component<any, SettingsState> {
       ...i.state.saveUserSettingsForm,
       auth: myAuthRequired(),
     });
+
     if (saveRes.state === "success") {
-      UserService.Instance.login(saveRes.data);
+      UserService.Instance.login({
+        res: saveRes.data,
+        showToast: false,
+      });
       toast(I18NextService.i18n.t("saved"));
       window.scrollTo(0, 0);
     }
@@ -1198,7 +1202,10 @@ export class Settings extends Component<any, SettingsState> {
         auth: myAuthRequired(),
       });
       if (changePasswordRes.state === "success") {
-        UserService.Instance.login(changePasswordRes.data);
+        UserService.Instance.login({
+          res: changePasswordRes.data,
+          showToast: false,
+        });
         window.scrollTo(0, 0);
         toast(I18NextService.i18n.t("password_changed"));
       }
diff --git a/src/shared/services/UserService.ts b/src/shared/services/UserService.ts
index 0724f400..70e8e9ca 100644
--- a/src/shared/services/UserService.ts
+++ b/src/shared/services/UserService.ts
@@ -26,12 +26,18 @@ export class UserService {
     this.#setJwtInfo();
   }
 
-  public login(res: LoginResponse) {
+  public login({
+    res,
+    showToast = true,
+  }: {
+    res: LoginResponse;
+    showToast?: boolean;
+  }) {
     const expires = new Date();
     expires.setDate(expires.getDate() + 365);
 
     if (isBrowser() && res.jwt) {
-      toast(I18NextService.i18n.t("logged_in"));
+      showToast && toast(I18NextService.i18n.t("logged_in"));
       setAuthCookie(res.jwt);
       this.#setJwtInfo();
     }

From b45c24537db2c0618626ff15a5d76ee836697e72 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jsit@users.noreply.github.com>
Date: Tue, 4 Jul 2023 17:24:57 -0400
Subject: [PATCH 5/5] fix: Fix focus ring styles for radio button toggles #1772
 (#1773)

---
 .../components/common/data-type-select.tsx    |  54 ++++---
 .../components/common/listing-type-select.tsx |  77 +++++----
 src/shared/components/person/inbox.tsx        | 147 +++++++++--------
 src/shared/components/person/profile.tsx      |  22 ++-
 .../person/registration-applications.tsx      |  51 +++---
 src/shared/components/person/reports.tsx      | 148 ++++++++++--------
 src/shared/components/post/post.tsx           | 125 ++++++++-------
 7 files changed, 363 insertions(+), 261 deletions(-)

diff --git a/src/shared/components/common/data-type-select.tsx b/src/shared/components/common/data-type-select.tsx
index 6bf0666c..a0393f67 100644
--- a/src/shared/components/common/data-type-select.tsx
+++ b/src/shared/components/common/data-type-select.tsx
@@ -1,3 +1,5 @@
+import { randomStr } from "@utils/helpers";
+import classNames from "classnames";
 import { Component, linkEvent } from "inferno";
 import { DataType } from "../../interfaces";
 import { I18NextService } from "../../services";
@@ -15,6 +17,8 @@ export class DataTypeSelect extends Component<
   DataTypeSelectProps,
   DataTypeSelectState
 > {
+  private id = `listing-type-input-${randomStr()}`;
+
   state: DataTypeSelectState = {
     type_: this.props.type_,
   };
@@ -31,33 +35,41 @@ export class DataTypeSelect extends Component<
 
   render() {
     return (
-      <div className="data-type-select btn-group btn-group-toggle flex-wrap">
+      <div
+        className="data-type-select btn-group btn-group-toggle flex-wrap"
+        role="group"
+      >
+        <input
+          id={`${this.id}-posts`}
+          type="radio"
+          className="btn-check"
+          value={DataType.Post}
+          checked={this.state.type_ === DataType.Post}
+          onChange={linkEvent(this, this.handleTypeChange)}
+        />
         <label
-          className={`pointer btn btn-outline-secondary 
-            ${this.state.type_ == DataType.Post && "active"}
-          `}
+          htmlFor={`${this.id}-posts`}
+          className={classNames("pointer btn btn-outline-secondary", {
+            active: this.state.type_ === DataType.Post,
+          })}
         >
-          <input
-            type="radio"
-            className="btn-check"
-            value={DataType.Post}
-            checked={this.state.type_ == DataType.Post}
-            onChange={linkEvent(this, this.handleTypeChange)}
-          />
           {I18NextService.i18n.t("posts")}
         </label>
+
+        <input
+          id={`${this.id}-comments`}
+          type="radio"
+          className="btn-check"
+          value={DataType.Comment}
+          checked={this.state.type_ === DataType.Comment}
+          onChange={linkEvent(this, this.handleTypeChange)}
+        />
         <label
-          className={`pointer btn btn-outline-secondary ${
-            this.state.type_ == DataType.Comment && "active"
-          }`}
+          htmlFor={`${this.id}-comments`}
+          className={classNames("pointer btn btn-outline-secondary", {
+            active: this.state.type_ === DataType.Comment,
+          })}
         >
-          <input
-            type="radio"
-            className="btn-check"
-            value={DataType.Comment}
-            checked={this.state.type_ == DataType.Comment}
-            onChange={linkEvent(this, this.handleTypeChange)}
-          />
           {I18NextService.i18n.t("comments")}
         </label>
       </div>
diff --git a/src/shared/components/common/listing-type-select.tsx b/src/shared/components/common/listing-type-select.tsx
index 9d0a1b9f..1d917dcd 100644
--- a/src/shared/components/common/listing-type-select.tsx
+++ b/src/shared/components/common/listing-type-select.tsx
@@ -1,4 +1,5 @@
 import { randomStr } from "@utils/helpers";
+import classNames from "classnames";
 import { Component, linkEvent } from "inferno";
 import { ListingType } from "lemmy-js-client";
 import { I18NextService, UserService } from "../../services";
@@ -38,60 +39,72 @@ export class ListingTypeSelect extends Component<
 
   render() {
     return (
-      <div className="listing-type-select btn-group btn-group-toggle flex-wrap">
+      <div
+        className="listing-type-select btn-group btn-group-toggle flex-wrap"
+        role="group"
+      >
         {this.props.showSubscribed && (
-          <label
-            title={I18NextService.i18n.t("subscribed_description")}
-            className={`btn btn-outline-secondary 
-            ${this.state.type_ == "Subscribed" && "active"}
-            ${!UserService.Instance.myUserInfo ? "disabled" : "pointer"}
-          `}
-          >
+          <>
             <input
               id={`${this.id}-subscribed`}
               type="radio"
               className="btn-check"
               value={"Subscribed"}
-              checked={this.state.type_ == "Subscribed"}
+              checked={this.state.type_ === "Subscribed"}
               onChange={linkEvent(this, this.handleTypeChange)}
               disabled={!UserService.Instance.myUserInfo}
             />
-            {I18NextService.i18n.t("subscribed")}
-          </label>
+            <label
+              htmlFor={`${this.id}-subscribed`}
+              title={I18NextService.i18n.t("subscribed_description")}
+              className={classNames("btn btn-outline-secondary", {
+                active: this.state.type_ === "Subscribed",
+                disabled: !UserService.Instance.myUserInfo,
+                pointer: UserService.Instance.myUserInfo,
+              })}
+            >
+              {I18NextService.i18n.t("subscribed")}
+            </label>
+          </>
         )}
         {this.props.showLocal && (
-          <label
-            title={I18NextService.i18n.t("local_description")}
-            className={`pointer btn btn-outline-secondary ${
-              this.state.type_ == "Local" && "active"
-            }`}
-          >
+          <>
             <input
               id={`${this.id}-local`}
               type="radio"
               className="btn-check"
               value={"Local"}
-              checked={this.state.type_ == "Local"}
+              checked={this.state.type_ === "Local"}
               onChange={linkEvent(this, this.handleTypeChange)}
             />
-            {I18NextService.i18n.t("local")}
-          </label>
+            <label
+              htmlFor={`${this.id}-local`}
+              title={I18NextService.i18n.t("local_description")}
+              className={classNames("pointer btn btn-outline-secondary", {
+                active: this.state.type_ === "Local",
+              })}
+            >
+              {I18NextService.i18n.t("local")}
+            </label>
+          </>
         )}
+        <input
+          id={`${this.id}-all`}
+          type="radio"
+          className="btn-check"
+          value={"All"}
+          checked={this.state.type_ === "All"}
+          onChange={linkEvent(this, this.handleTypeChange)}
+        />
         <label
           title={I18NextService.i18n.t("all_description")}
-          className={`pointer btn btn-outline-secondary ${
-            (this.state.type_ == "All" && "active") ||
-            (!this.props.showLocal && this.state.type_ == "Local" && "active")
-          }`}
+          htmlFor={`${this.id}-all`}
+          className={classNames("pointer btn btn-outline-secondary", {
+            active:
+              this.state.type_ === "All" ||
+              (!this.props.showLocal && this.state.type_) === "Local",
+          })}
         >
-          <input
-            id={`${this.id}-all`}
-            type="radio"
-            className="btn-check"
-            value={"All"}
-            checked={this.state.type_ == "All"}
-            onChange={linkEvent(this, this.handleTypeChange)}
-          />
           {I18NextService.i18n.t("all")}
         </label>
       </div>
diff --git a/src/shared/components/person/inbox.tsx b/src/shared/components/person/inbox.tsx
index 28bb0716..bf246f64 100644
--- a/src/shared/components/person/inbox.tsx
+++ b/src/shared/components/person/inbox.tsx
@@ -11,8 +11,9 @@ import {
   setIsoData,
   updatePersonBlock,
 } from "@utils/app";
-import { capitalizeFirstLetter } from "@utils/helpers";
+import { capitalizeFirstLetter, randomStr } from "@utils/helpers";
 import { RouteDataResponse } from "@utils/types";
+import classNames from "classnames";
 import { Component, linkEvent } from "inferno";
 import {
   AddAdmin,
@@ -283,34 +284,41 @@ export class Inbox extends Component<any, InboxState> {
   }
 
   unreadOrAllRadios() {
+    const radioId = randomStr();
+
     return (
-      <div className="btn-group btn-group-toggle flex-wrap">
+      <div className="btn-group btn-group-toggle flex-wrap" role="group">
+        <input
+          id={`${radioId}-unread`}
+          type="radio"
+          className="btn-check"
+          value={UnreadOrAll.Unread}
+          checked={this.state.unreadOrAll === UnreadOrAll.Unread}
+          onChange={linkEvent(this, this.handleUnreadOrAllChange)}
+        />
         <label
-          className={`btn btn-outline-secondary pointer
-            ${this.state.unreadOrAll == UnreadOrAll.Unread && "active"}
-          `}
+          htmlFor={`${radioId}-unread`}
+          className={classNames("btn btn-outline-secondary pointer", {
+            active: this.state.unreadOrAll === UnreadOrAll.Unread,
+          })}
         >
-          <input
-            type="radio"
-            className="btn-check"
-            value={UnreadOrAll.Unread}
-            checked={this.state.unreadOrAll == UnreadOrAll.Unread}
-            onChange={linkEvent(this, this.handleUnreadOrAllChange)}
-          />
           {I18NextService.i18n.t("unread")}
         </label>
+
+        <input
+          id={`${radioId}-all`}
+          type="radio"
+          className="btn-check"
+          value={UnreadOrAll.All}
+          checked={this.state.unreadOrAll === UnreadOrAll.All}
+          onChange={linkEvent(this, this.handleUnreadOrAllChange)}
+        />
         <label
-          className={`btn btn-outline-secondary pointer
-            ${this.state.unreadOrAll == UnreadOrAll.All && "active"}
-          `}
+          htmlFor={`${radioId}-all`}
+          className={classNames("btn btn-outline-secondary pointer", {
+            active: this.state.unreadOrAll === UnreadOrAll.All,
+          })}
         >
-          <input
-            type="radio"
-            className="btn-check"
-            value={UnreadOrAll.All}
-            checked={this.state.unreadOrAll == UnreadOrAll.All}
-            onChange={linkEvent(this, this.handleUnreadOrAllChange)}
-          />
           {I18NextService.i18n.t("all")}
         </label>
       </div>
@@ -318,62 +326,75 @@ export class Inbox extends Component<any, InboxState> {
   }
 
   messageTypeRadios() {
+    const radioId = randomStr();
+
     return (
-      <div className="btn-group btn-group-toggle flex-wrap">
+      <div className="btn-group btn-group-toggle flex-wrap" role="group">
+        <input
+          id={`${radioId}-all`}
+          type="radio"
+          className="btn-check"
+          value={MessageType.All}
+          checked={this.state.messageType === MessageType.All}
+          onChange={linkEvent(this, this.handleMessageTypeChange)}
+        />
         <label
-          className={`btn btn-outline-secondary pointer
-            ${this.state.messageType == MessageType.All && "active"}
-          `}
+          htmlFor={`${radioId}-all`}
+          className={classNames("btn btn-outline-secondary pointer", {
+            active: this.state.messageType === MessageType.All,
+          })}
         >
-          <input
-            type="radio"
-            className="btn-check"
-            value={MessageType.All}
-            checked={this.state.messageType == MessageType.All}
-            onChange={linkEvent(this, this.handleMessageTypeChange)}
-          />
           {I18NextService.i18n.t("all")}
         </label>
+
+        <input
+          id={`${radioId}-replies`}
+          type="radio"
+          className="btn-check"
+          value={MessageType.Replies}
+          checked={this.state.messageType === MessageType.Replies}
+          onChange={linkEvent(this, this.handleMessageTypeChange)}
+        />
         <label
-          className={`btn btn-outline-secondary pointer
-            ${this.state.messageType == MessageType.Replies && "active"}
-          `}
+          htmlFor={`${radioId}-replies`}
+          className={classNames("btn btn-outline-secondary pointer", {
+            active: this.state.messageType === MessageType.Replies,
+          })}
         >
-          <input
-            type="radio"
-            className="btn-check"
-            value={MessageType.Replies}
-            checked={this.state.messageType == MessageType.Replies}
-            onChange={linkEvent(this, this.handleMessageTypeChange)}
-          />
           {I18NextService.i18n.t("replies")}
         </label>
+
+        <input
+          id={`${radioId}-mentions`}
+          type="radio"
+          className="btn-check"
+          value={MessageType.Mentions}
+          checked={this.state.messageType === MessageType.Mentions}
+          onChange={linkEvent(this, this.handleMessageTypeChange)}
+        />
         <label
-          className={`btn btn-outline-secondary pointer
-            ${this.state.messageType == MessageType.Mentions && "active"}
-          `}
+          htmlFor={`${radioId}-mentions`}
+          className={classNames("btn btn-outline-secondary pointer", {
+            active: this.state.messageType === MessageType.Mentions,
+          })}
         >
-          <input
-            type="radio"
-            className="btn-check"
-            value={MessageType.Mentions}
-            checked={this.state.messageType == MessageType.Mentions}
-            onChange={linkEvent(this, this.handleMessageTypeChange)}
-          />
           {I18NextService.i18n.t("mentions")}
         </label>
+
+        <input
+          id={`${radioId}-messages`}
+          type="radio"
+          className="btn-check"
+          value={MessageType.Messages}
+          checked={this.state.messageType === MessageType.Messages}
+          onChange={linkEvent(this, this.handleMessageTypeChange)}
+        />
         <label
-          className={`btn btn-outline-secondary pointer
-            ${this.state.messageType == MessageType.Messages && "active"}
-          `}
+          htmlFor={`${radioId}-messages`}
+          className={classNames("btn btn-outline-secondary pointer", {
+            active: this.state.messageType === MessageType.Messages,
+          })}
         >
-          <input
-            type="radio"
-            className="btn-check"
-            value={MessageType.Messages}
-            checked={this.state.messageType == MessageType.Messages}
-            onChange={linkEvent(this, this.handleMessageTypeChange)}
-          />
           {I18NextService.i18n.t("messages")}
         </label>
       </div>
diff --git a/src/shared/components/person/profile.tsx b/src/shared/components/person/profile.tsx
index 96ac3da3..39979e29 100644
--- a/src/shared/components/person/profile.tsx
+++ b/src/shared/components/person/profile.tsx
@@ -18,6 +18,7 @@ import {
   getQueryParams,
   getQueryString,
   numToSI,
+  randomStr,
 } from "@utils/helpers";
 import { canMod, isAdmin, isBanned } from "@utils/roles";
 import type { QueryParams } from "@utils/types";
@@ -397,7 +398,7 @@ export class Profile extends Component<
 
   get viewRadios() {
     return (
-      <div className="btn-group btn-group-toggle flex-wrap mb-2">
+      <div className="btn-group btn-group-toggle flex-wrap mb-2" role="group">
         {this.getRadio(PersonDetailsView.Overview)}
         {this.getRadio(PersonDetailsView.Comments)}
         {this.getRadio(PersonDetailsView.Posts)}
@@ -409,22 +410,27 @@ export class Profile extends Component<
   getRadio(view: PersonDetailsView) {
     const { view: urlView } = getProfileQueryParams();
     const active = view === urlView;
+    const radioId = randomStr();
 
     return (
-      <label
-        className={classNames("btn btn-outline-secondary pointer", {
-          active,
-        })}
-      >
+      <>
         <input
+          id={radioId}
           type="radio"
           className="btn-check"
           value={view}
           checked={active}
           onChange={linkEvent(this, this.handleViewChange)}
         />
-        {I18NextService.i18n.t(view.toLowerCase() as NoOptionI18nKeys)}
-      </label>
+        <label
+          htmlFor={radioId}
+          className={classNames("btn btn-outline-secondary pointer", {
+            active,
+          })}
+        >
+          {I18NextService.i18n.t(view.toLowerCase() as NoOptionI18nKeys)}
+        </label>
+      </>
     );
   }
 
diff --git a/src/shared/components/person/registration-applications.tsx b/src/shared/components/person/registration-applications.tsx
index a26dd79e..757170f8 100644
--- a/src/shared/components/person/registration-applications.tsx
+++ b/src/shared/components/person/registration-applications.tsx
@@ -3,7 +3,9 @@ import {
   myAuthRequired,
   setIsoData,
 } from "@utils/app";
+import { randomStr } from "@utils/helpers";
 import { RouteDataResponse } from "@utils/types";
+import classNames from "classnames";
 import { Component, linkEvent } from "inferno";
 import {
   ApproveRegistrationApplication,
@@ -125,34 +127,41 @@ export class RegistrationApplications extends Component<
   }
 
   unreadOrAllRadios() {
+    const radioId = randomStr();
+
     return (
-      <div className="btn-group btn-group-toggle flex-wrap mb-2">
+      <div className="btn-group btn-group-toggle flex-wrap mb-2" role="group">
+        <input
+          id={`${radioId}-unread`}
+          type="radio"
+          className="btn-check"
+          value={UnreadOrAll.Unread}
+          checked={this.state.unreadOrAll === UnreadOrAll.Unread}
+          onChange={linkEvent(this, this.handleUnreadOrAllChange)}
+        />
         <label
-          className={`btn btn-outline-secondary pointer
-            ${this.state.unreadOrAll == UnreadOrAll.Unread && "active"}
-          `}
+          htmlFor={`${radioId}-unread`}
+          className={classNames("btn btn-outline-secondary pointer", {
+            active: this.state.unreadOrAll === UnreadOrAll.Unread,
+          })}
         >
-          <input
-            type="radio"
-            className="btn-check"
-            value={UnreadOrAll.Unread}
-            checked={this.state.unreadOrAll == UnreadOrAll.Unread}
-            onChange={linkEvent(this, this.handleUnreadOrAllChange)}
-          />
           {I18NextService.i18n.t("unread")}
         </label>
+
+        <input
+          id={`${radioId}-all`}
+          type="radio"
+          className="btn-check"
+          value={UnreadOrAll.All}
+          checked={this.state.unreadOrAll === UnreadOrAll.All}
+          onChange={linkEvent(this, this.handleUnreadOrAllChange)}
+        />
         <label
-          className={`btn btn-outline-secondary pointer
-            ${this.state.unreadOrAll == UnreadOrAll.All && "active"}
-          `}
+          htmlFor={`${radioId}-all`}
+          className={classNames("btn btn-outline-secondary pointer", {
+            active: this.state.unreadOrAll === UnreadOrAll.All,
+          })}
         >
-          <input
-            type="radio"
-            className="btn-check"
-            value={UnreadOrAll.All}
-            checked={this.state.unreadOrAll == UnreadOrAll.All}
-            onChange={linkEvent(this, this.handleUnreadOrAllChange)}
-          />
           {I18NextService.i18n.t("all")}
         </label>
       </div>
diff --git a/src/shared/components/person/reports.tsx b/src/shared/components/person/reports.tsx
index c16b17ac..d298930e 100644
--- a/src/shared/components/person/reports.tsx
+++ b/src/shared/components/person/reports.tsx
@@ -5,8 +5,10 @@ import {
   myAuthRequired,
   setIsoData,
 } from "@utils/app";
+import { randomStr } from "@utils/helpers";
 import { amAdmin } from "@utils/roles";
 import { RouteDataResponse } from "@utils/types";
+import classNames from "classnames";
 import { Component, linkEvent } from "inferno";
 import {
   CommentReportResponse,
@@ -187,34 +189,41 @@ export class Reports extends Component<any, ReportsState> {
   }
 
   unreadOrAllRadios() {
+    const radioId = randomStr();
+
     return (
-      <div className="btn-group btn-group-toggle flex-wrap mb-2">
+      <div className="btn-group btn-group-toggle flex-wrap mb-2" role="group">
+        <input
+          id={`${radioId}-unread`}
+          type="radio"
+          className="btn-check"
+          value={UnreadOrAll.Unread}
+          checked={this.state.unreadOrAll === UnreadOrAll.Unread}
+          onChange={linkEvent(this, this.handleUnreadOrAllChange)}
+        />
         <label
-          className={`btn btn-outline-secondary pointer
-            ${this.state.unreadOrAll == UnreadOrAll.Unread && "active"}
-          `}
+          htmlFor={`${radioId}-unread`}
+          className={classNames("btn btn-outline-secondary pointer", {
+            active: this.state.unreadOrAll === UnreadOrAll.Unread,
+          })}
         >
-          <input
-            type="radio"
-            className="btn-check"
-            value={UnreadOrAll.Unread}
-            checked={this.state.unreadOrAll == UnreadOrAll.Unread}
-            onChange={linkEvent(this, this.handleUnreadOrAllChange)}
-          />
           {I18NextService.i18n.t("unread")}
         </label>
+
+        <input
+          id={`${radioId}-all`}
+          type="radio"
+          className="btn-check"
+          value={UnreadOrAll.All}
+          checked={this.state.unreadOrAll === UnreadOrAll.All}
+          onChange={linkEvent(this, this.handleUnreadOrAllChange)}
+        />
         <label
-          className={`btn btn-outline-secondary pointer
-            ${this.state.unreadOrAll == UnreadOrAll.All && "active"}
-          `}
+          htmlFor={`${radioId}-all`}
+          className={classNames("btn btn-outline-secondary pointer", {
+            active: this.state.unreadOrAll === UnreadOrAll.All,
+          })}
         >
-          <input
-            type="radio"
-            className="btn-check"
-            value={UnreadOrAll.All}
-            checked={this.state.unreadOrAll == UnreadOrAll.All}
-            onChange={linkEvent(this, this.handleUnreadOrAllChange)}
-          />
           {I18NextService.i18n.t("all")}
         </label>
       </div>
@@ -222,70 +231,83 @@ export class Reports extends Component<any, ReportsState> {
   }
 
   messageTypeRadios() {
+    const radioId = randomStr();
+
     return (
-      <div className="btn-group btn-group-toggle flex-wrap mb-2">
+      <div className="btn-group btn-group-toggle flex-wrap mb-2" role="group">
+        <input
+          id={`${radioId}-all`}
+          type="radio"
+          className="btn-check"
+          value={MessageType.All}
+          checked={this.state.messageType === MessageType.All}
+          onChange={linkEvent(this, this.handleMessageTypeChange)}
+        />
         <label
-          className={`btn btn-outline-secondary pointer
-            ${this.state.messageType == MessageType.All && "active"}
-          `}
+          htmlFor={`${radioId}-all`}
+          className={classNames("btn btn-outline-secondary pointer", {
+            active: this.state.messageType === MessageType.All,
+          })}
         >
-          <input
-            type="radio"
-            className="btn-check"
-            value={MessageType.All}
-            checked={this.state.messageType == MessageType.All}
-            onChange={linkEvent(this, this.handleMessageTypeChange)}
-          />
           {I18NextService.i18n.t("all")}
         </label>
+
+        <input
+          id={`${radioId}-comments`}
+          type="radio"
+          className="btn-check"
+          value={MessageType.CommentReport}
+          checked={this.state.messageType === MessageType.CommentReport}
+          onChange={linkEvent(this, this.handleMessageTypeChange)}
+        />
         <label
-          className={`btn btn-outline-secondary pointer
-            ${this.state.messageType == MessageType.CommentReport && "active"}
-          `}
+          htmlFor={`${radioId}-comments`}
+          className={classNames("btn btn-outline-secondary pointer", {
+            active: this.state.messageType === MessageType.CommentReport,
+          })}
         >
-          <input
-            type="radio"
-            className="btn-check"
-            value={MessageType.CommentReport}
-            checked={this.state.messageType == MessageType.CommentReport}
-            onChange={linkEvent(this, this.handleMessageTypeChange)}
-          />
           {I18NextService.i18n.t("comments")}
         </label>
+
+        <input
+          id={`${radioId}-posts`}
+          type="radio"
+          className="btn-check"
+          value={MessageType.PostReport}
+          checked={this.state.messageType === MessageType.PostReport}
+          onChange={linkEvent(this, this.handleMessageTypeChange)}
+        />
         <label
-          className={`btn btn-outline-secondary pointer
-            ${this.state.messageType == MessageType.PostReport && "active"}
-          `}
+          htmlFor={`${radioId}-posts`}
+          className={classNames("btn btn-outline-secondary pointer", {
+            active: this.state.messageType === MessageType.PostReport,
+          })}
         >
-          <input
-            type="radio"
-            className="btn-check"
-            value={MessageType.PostReport}
-            checked={this.state.messageType == MessageType.PostReport}
-            onChange={linkEvent(this, this.handleMessageTypeChange)}
-          />
           {I18NextService.i18n.t("posts")}
         </label>
+
         {amAdmin() && (
-          <label
-            className={`btn btn-outline-secondary pointer
-            ${
-              this.state.messageType == MessageType.PrivateMessageReport &&
-              "active"
-            }
-          `}
-          >
+          <>
             <input
+              id={`${radioId}-messages`}
               type="radio"
               className="btn-check"
               value={MessageType.PrivateMessageReport}
               checked={
-                this.state.messageType == MessageType.PrivateMessageReport
+                this.state.messageType === MessageType.PrivateMessageReport
               }
               onChange={linkEvent(this, this.handleMessageTypeChange)}
             />
-            {I18NextService.i18n.t("messages")}
-          </label>
+            <label
+              htmlFor={`${radioId}-messages`}
+              className={classNames("btn btn-outline-secondary pointer", {
+                active:
+                  this.state.messageType === MessageType.PrivateMessageReport,
+              })}
+            >
+              {I18NextService.i18n.t("messages")}
+            </label>
+          </>
         )}
       </div>
     );
diff --git a/src/shared/components/post/post.tsx b/src/shared/components/post/post.tsx
index 3c0015ec..f9d35127 100644
--- a/src/shared/components/post/post.tsx
+++ b/src/shared/components/post/post.tsx
@@ -19,10 +19,11 @@ import {
   restoreScrollPosition,
   saveScrollPosition,
 } from "@utils/browser";
-import { debounce } from "@utils/helpers";
+import { debounce, randomStr } from "@utils/helpers";
 import { isImage } from "@utils/media";
 import { RouteDataResponse } from "@utils/types";
 import autosize from "autosize";
+import classNames from "classnames";
 import { Component, RefObject, createRef, linkEvent } from "inferno";
 import {
   AddAdmin,
@@ -430,80 +431,98 @@ export class Post extends Component<any, PostState> {
   }
 
   sortRadios() {
+    const radioId =
+      this.state.postRes.state === "success"
+        ? this.state.postRes.data.post_view.post.id
+        : randomStr();
+
     return (
       <>
-        <div className="btn-group btn-group-toggle flex-wrap me-3 mb-2">
+        <div
+          className="btn-group btn-group-toggle flex-wrap me-3 mb-2"
+          role="group"
+        >
+          <input
+            id={`${radioId}-hot`}
+            type="radio"
+            className="btn-check"
+            value={"Hot"}
+            checked={this.state.commentSort === "Hot"}
+            onChange={linkEvent(this, this.handleCommentSortChange)}
+          />
           <label
-            className={`btn btn-outline-secondary pointer ${
-              this.state.commentSort === "Hot" && "active"
-            }`}
+            htmlFor={`${radioId}-hot`}
+            className={classNames("btn btn-outline-secondary pointer", {
+              active: this.state.commentSort === "Hot",
+            })}
           >
             {I18NextService.i18n.t("hot")}
-            <input
-              type="radio"
-              className="btn-check"
-              value={"Hot"}
-              checked={this.state.commentSort === "Hot"}
-              onChange={linkEvent(this, this.handleCommentSortChange)}
-            />
           </label>
+          <input
+            id={`${radioId}-top`}
+            type="radio"
+            className="btn-check"
+            value={"Top"}
+            checked={this.state.commentSort === "Top"}
+            onChange={linkEvent(this, this.handleCommentSortChange)}
+          />
           <label
-            className={`btn btn-outline-secondary pointer ${
-              this.state.commentSort === "Top" && "active"
-            }`}
+            htmlFor={`${radioId}-top`}
+            className={classNames("btn btn-outline-secondary pointer", {
+              active: this.state.commentSort === "Top",
+            })}
           >
             {I18NextService.i18n.t("top")}
-            <input
-              type="radio"
-              className="btn-check"
-              value={"Top"}
-              checked={this.state.commentSort === "Top"}
-              onChange={linkEvent(this, this.handleCommentSortChange)}
-            />
           </label>
+          <input
+            id={`${radioId}-new`}
+            type="radio"
+            className="btn-check"
+            value={"New"}
+            checked={this.state.commentSort === "New"}
+            onChange={linkEvent(this, this.handleCommentSortChange)}
+          />
           <label
-            className={`btn btn-outline-secondary pointer ${
-              this.state.commentSort === "New" && "active"
-            }`}
+            htmlFor={`${radioId}-new`}
+            className={classNames("btn btn-outline-secondary pointer", {
+              active: this.state.commentSort === "New",
+            })}
           >
             {I18NextService.i18n.t("new")}
-            <input
-              type="radio"
-              className="btn-check"
-              value={"New"}
-              checked={this.state.commentSort === "New"}
-              onChange={linkEvent(this, this.handleCommentSortChange)}
-            />
           </label>
+          <input
+            id={`${radioId}-old`}
+            type="radio"
+            className="btn-check"
+            value={"Old"}
+            checked={this.state.commentSort === "Old"}
+            onChange={linkEvent(this, this.handleCommentSortChange)}
+          />
           <label
-            className={`btn btn-outline-secondary pointer ${
-              this.state.commentSort === "Old" && "active"
-            }`}
+            htmlFor={`${radioId}-old`}
+            className={classNames("btn btn-outline-secondary pointer", {
+              active: this.state.commentSort === "Old",
+            })}
           >
             {I18NextService.i18n.t("old")}
-            <input
-              type="radio"
-              className="btn-check"
-              value={"Old"}
-              checked={this.state.commentSort === "Old"}
-              onChange={linkEvent(this, this.handleCommentSortChange)}
-            />
           </label>
         </div>
-        <div className="btn-group btn-group-toggle flex-wrap mb-2">
+        <div className="btn-group btn-group-toggle flex-wrap mb-2" role="group">
+          <input
+            id={`${radioId}-chat`}
+            type="radio"
+            className="btn-check"
+            value={CommentViewType.Flat}
+            checked={this.state.commentViewType === CommentViewType.Flat}
+            onChange={linkEvent(this, this.handleCommentViewTypeChange)}
+          />
           <label
-            className={`btn btn-outline-secondary pointer ${
-              this.state.commentViewType === CommentViewType.Flat && "active"
-            }`}
+            htmlFor={`${radioId}-chat`}
+            className={classNames("btn btn-outline-secondary pointer", {
+              active: this.state.commentViewType === CommentViewType.Flat,
+            })}
           >
             {I18NextService.i18n.t("chat")}
-            <input
-              type="radio"
-              className="btn-check"
-              value={CommentViewType.Flat}
-              checked={this.state.commentViewType === CommentViewType.Flat}
-              onChange={linkEvent(this, this.handleCommentViewTypeChange)}
-            />
           </label>
         </div>
       </>