From 85caabaedf3b42a58bf65925ba161e3dec0bdaa1 Mon Sep 17 00:00:00 2001
From: gintil <michael994664@gmail.com>
Date: Sun, 29 Dec 2024 14:59:31 -0500
Subject: [PATCH] Group checkboxes together with fieldset

---
 .../CopyUserFeedSettingsDialog/index.tsx      | 112 +++++++++-------
 .../index.tsx                                 | 122 ++++++++++--------
 2 files changed, 129 insertions(+), 105 deletions(-)

diff --git a/services/backend-api/client/src/features/feed/components/CopyUserFeedSettingsDialog/index.tsx b/services/backend-api/client/src/features/feed/components/CopyUserFeedSettingsDialog/index.tsx
index 2bb9f5b2e..c09a13473 100644
--- a/services/backend-api/client/src/features/feed/components/CopyUserFeedSettingsDialog/index.tsx
+++ b/services/backend-api/client/src/features/feed/components/CopyUserFeedSettingsDialog/index.tsx
@@ -148,6 +148,7 @@ export const CopyUserFeedSettingsDialog = ({ isOpen, onClose, onCloseRef }: Prop
     return (
       <Stack key={category}>
         <Checkbox
+          aria-controls={allCategorySettings.join(" ")}
           isChecked={allCategorySettingsAreChecked}
           isIndeterminate={!allCategorySettingsAreChecked && !noCategorySettingsAreChecked}
           onChange={(e) => onCheckCategoryChange(category, e.target.checked)}
@@ -164,6 +165,7 @@ export const CopyUserFeedSettingsDialog = ({ isOpen, onClose, onCloseRef }: Prop
               <Checkbox
                 key={setting}
                 pl={6}
+                id={setting}
                 onChange={(e) =>
                   onCheckSettingChange(setting as CopyableUserFeedSettings, e.target.checked)
                 }
@@ -206,60 +208,70 @@ export const CopyUserFeedSettingsDialog = ({ isOpen, onClose, onCloseRef }: Prop
                 </Text>
               </Box>
             </Stack>
-            <Stack spacing={2}>
-              <Heading size="sm" as="h2">
-                Settings to Copy
-              </Heading>
-              <Stack>
-                {otherSettings.map((setting) => {
-                  const settingDescription = CopyableSettingDescriptions[setting];
+            <fieldset>
+              <Stack spacing={2}>
+                <legend>
+                  <Heading size="sm" as="h2">
+                    Settings to Copy
+                  </Heading>
+                </legend>
+                <Stack>
+                  {otherSettings.map((setting) => {
+                    const settingDescription = CopyableSettingDescriptions[setting];
 
-                  return (
-                    <Checkbox
-                      onChange={(e) => onCheckSettingChange(setting, e.target.checked)}
-                      isChecked={checkedSettings.includes(setting)}
-                      key={setting}
-                    >
-                      {settingDescription.description}
-                      <br />
-                      {settingDescription.hint && (
-                        <chakra.span color="whiteAlpha.600" fontSize={14}>
-                          {settingDescription.hint}
-                        </chakra.span>
-                      )}
-                    </Checkbox>
-                  );
-                })}
-                {checkboxesByCategories}
+                    return (
+                      <Checkbox
+                        onChange={(e) => onCheckSettingChange(setting, e.target.checked)}
+                        isChecked={checkedSettings.includes(setting)}
+                        key={setting}
+                      >
+                        {settingDescription.description}
+                        <br />
+                        {settingDescription.hint && (
+                          <chakra.span color="whiteAlpha.600" fontSize={14}>
+                            {settingDescription.hint}
+                          </chakra.span>
+                        )}
+                      </Checkbox>
+                    );
+                  })}
+                  {checkboxesByCategories}
+                </Stack>
               </Stack>
-            </Stack>
-            <Stack spacing={2}>
-              <Heading size="sm" as="h2">
-                Target Feeds
-              </Heading>
-              <Text>
-                The feeds that will have their settings overwritten with the selected settings from
-                the source feed.
-              </Text>
-              <Box>
-                <Button size="sm" onClick={onClickSelectNoneConnections}>
-                  Select none
-                </Button>
-              </Box>
-              <Stack mt={1}>
-                <SelectableUserFeedList
-                  onSelectedIdsChange={setCheckedUserFeeds}
-                  selectedIds={checkedUserFeeds}
-                />
+            </fieldset>
+            <fieldset>
+              <Stack spacing={2}>
+                <legend>
+                  <Stack spacing={2}>
+                    <Heading size="sm" as="h2">
+                      Target Feeds
+                    </Heading>
+                    <Text>
+                      The feeds that will have their settings overwritten with the selected settings
+                      from the source feed.
+                    </Text>
+                  </Stack>
+                </legend>
+                <Box>
+                  <Button size="sm" onClick={onClickSelectNoneConnections}>
+                    Select none
+                  </Button>
+                </Box>
+                <Stack mt={1}>
+                  <SelectableUserFeedList
+                    onSelectedIdsChange={setCheckedUserFeeds}
+                    selectedIds={checkedUserFeeds}
+                  />
+                </Stack>
               </Stack>
-            </Stack>
-            {error && (
-              <InlineErrorAlert
-                title={t("common.errors.somethingWentWrong")}
-                description={error.message}
-              />
-            )}
+            </fieldset>
           </Stack>
+          {error && (
+            <InlineErrorAlert
+              title={t("common.errors.somethingWentWrong")}
+              description={error.message}
+            />
+          )}
         </ModalBody>
         <ModalFooter>
           <HStack>
diff --git a/services/backend-api/client/src/features/feedConnections/components/CopyDiscordChannelConnectingSettingsDialog/index.tsx b/services/backend-api/client/src/features/feedConnections/components/CopyDiscordChannelConnectingSettingsDialog/index.tsx
index ce4deef4b..40be0c13c 100644
--- a/services/backend-api/client/src/features/feedConnections/components/CopyDiscordChannelConnectingSettingsDialog/index.tsx
+++ b/services/backend-api/client/src/features/feedConnections/components/CopyDiscordChannelConnectingSettingsDialog/index.tsx
@@ -239,6 +239,7 @@ export const CopyDiscordChannelConnectionSettingsDialog = ({
     return (
       <Stack key={category}>
         <Checkbox
+          aria-controls={allCategorySettings.join(" ")}
           isChecked={allCategorySettingsAreChecked}
           isIndeterminate={!allCategorySettingsAreChecked && !noCategorySettingsAreChecked}
           onChange={(e) => onCheckCategoryChange(category, e.target.checked)}
@@ -268,6 +269,7 @@ export const CopyDiscordChannelConnectionSettingsDialog = ({
             return (
               <Checkbox
                 key={setting}
+                id={setting}
                 pl={6}
                 onChange={(e) =>
                   onCheckSettingChange(
@@ -321,65 +323,75 @@ export const CopyDiscordChannelConnectionSettingsDialog = ({
                 <chakra.span fontWeight={600}>{connection?.name}</chakra.span>
               </Box>
             </Stack>
-            <Stack spacing={2}>
-              <Heading size="sm" as="h2">
-                Settings to Copy
-              </Heading>
-              <Text>Settings to copy from the source connection.</Text>
-              <Stack>
-                {checkboxesByCategories}
-                {otherSettings.map((setting) => {
-                  const settingDescription = CopyableSettingDescriptions[setting];
+            <fieldset>
+              <Stack spacing={2}>
+                <legend>
+                  <Stack spacing={2}>
+                    <Heading size="sm" as="h2">
+                      Settings to Copy
+                    </Heading>
+                    <Text>Settings to copy from the source connection.</Text>
+                  </Stack>
+                </legend>
+                <Stack>
+                  {checkboxesByCategories}
+                  {otherSettings.map((setting) => {
+                    const settingDescription = CopyableSettingDescriptions[setting];
 
-                  if (
-                    setting === CopyableConnectionDiscordChannelSettings.Channel &&
-                    !connection.details.channel
-                  ) {
-                    return null;
-                  }
+                    if (
+                      setting === CopyableConnectionDiscordChannelSettings.Channel &&
+                      !connection.details.channel
+                    ) {
+                      return null;
+                    }
 
-                  return (
-                    <Checkbox
-                      onChange={(e) => onCheckSettingChange(setting, e.target.checked)}
-                      isChecked={checkedSettings.includes(setting)}
-                      key={setting}
-                    >
-                      {settingDescription.description}
-                      <br />
-                      {settingDescription.hint && (
-                        <chakra.span color="whiteAlpha.600" fontSize={14}>
-                          {settingDescription.hint}
-                        </chakra.span>
-                      )}
-                    </Checkbox>
-                  );
-                })}
+                    return (
+                      <Checkbox
+                        onChange={(e) => onCheckSettingChange(setting, e.target.checked)}
+                        isChecked={checkedSettings.includes(setting)}
+                        key={setting}
+                      >
+                        {settingDescription.description}
+                        <br />
+                        {settingDescription.hint && (
+                          <chakra.span color="whiteAlpha.600" fontSize={14}>
+                            {settingDescription.hint}
+                          </chakra.span>
+                        )}
+                      </Checkbox>
+                    );
+                  })}
+                </Stack>
               </Stack>
-            </Stack>
-            <Stack spacing={2}>
-              <Heading size="sm" as="h2">
-                Target Connections
-              </Heading>
-              <Text>
-                The connections that will have their settings overwritten with the selected settings
-                from the source connection.
-              </Text>
-              <HStack>
-                <Button size="sm" onClick={onClickSelectAllConnections}>
-                  Select All
-                </Button>
-                <Button size="sm" onClick={onClickSelectNoneConnections}>
-                  Select None
-                </Button>
-              </HStack>
-              <Stack>
-                <ConnectionsCheckboxList
-                  checkedConnectionIds={checkedConnections}
-                  onCheckConnectionChange={setCheckedConnections}
-                  feed={feed as UserFeed}
-                />
+            </fieldset>
+            <fieldset>
+              <Stack spacing={2}>
+                <legend>
+                  <Heading size="sm" as="h2">
+                    Target Connections
+                  </Heading>
+                  <Text>
+                    The connections that will have their settings overwritten with the selected
+                    settings from the source connection.
+                  </Text>
+                </legend>
+                <HStack>
+                  <Button size="sm" onClick={onClickSelectAllConnections}>
+                    Select All
+                  </Button>
+                  <Button size="sm" onClick={onClickSelectNoneConnections}>
+                    Select None
+                  </Button>
+                </HStack>
+                <Stack>
+                  <ConnectionsCheckboxList
+                    checkedConnectionIds={checkedConnections}
+                    onCheckConnectionChange={setCheckedConnections}
+                    feed={feed as UserFeed}
+                  />
+                </Stack>
               </Stack>
-            </Stack>
+            </fieldset>
             {error && (
               <InlineErrorAlert
                 title={t("common.errors.somethingWentWrong")}