From b45c24537db2c0618626ff15a5d76ee836697e72 Mon Sep 17 00:00:00 2001 From: Jay Sitter Date: Tue, 4 Jul 2023 17:24:57 -0400 Subject: [PATCH] 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 6bf0666..a0393f6 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 ( -
+
+ + +
diff --git a/src/shared/components/common/listing-type-select.tsx b/src/shared/components/common/listing-type-select.tsx index 9d0a1b9..1d917dc 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 ( -
+
{this.props.showSubscribed && ( - + + )} {this.props.showLocal && ( - + + )} +
diff --git a/src/shared/components/person/inbox.tsx b/src/shared/components/person/inbox.tsx index 28bb071..bf246f6 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 { } unreadOrAllRadios() { + const radioId = randomStr(); + return ( -
+
+ + +
@@ -318,62 +326,75 @@ export class Inbox extends Component { } messageTypeRadios() { + const radioId = randomStr(); + return ( -
+
+ + + + + + +
diff --git a/src/shared/components/person/profile.tsx b/src/shared/components/person/profile.tsx index 96ac3da..39979e2 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 ( -
+
{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 ( - + + ); } diff --git a/src/shared/components/person/registration-applications.tsx b/src/shared/components/person/registration-applications.tsx index a26dd79..757170f 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 ( -
+
+ + +
diff --git a/src/shared/components/person/reports.tsx b/src/shared/components/person/reports.tsx index c16b17a..d298930 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 { } unreadOrAllRadios() { + const radioId = randomStr(); + return ( -
+
+ + +
@@ -222,70 +231,83 @@ export class Reports extends Component { } messageTypeRadios() { + const radioId = randomStr(); + return ( -
+
+ + + + + + {amAdmin() && ( - + + )}
); diff --git a/src/shared/components/post/post.tsx b/src/shared/components/post/post.tsx index 3c0015e..f9d3512 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 { } sortRadios() { + const radioId = + this.state.postRes.state === "success" + ? this.state.postRes.data.post_view.post.id + : randomStr(); + return ( <> -
+
+ + + +
-
+
+
-- 2.44.1