From b6a73f51b7e1ce740d0e90ad5a099e2e0db5ef28 Mon Sep 17 00:00:00 2001
From: gintil <michael994664@gmail.com>
Date: Mon, 30 Dec 2024 19:16:16 -0500
Subject: [PATCH] Improve accessibility on user feeds page

---
 .../client/src/components/NewHeader/index.tsx | 23 ++++-
 .../src/components/PageContentV2/index.tsx    | 14 +--
 .../components/AddUserFeedDialog/index.tsx    |  4 +-
 .../UserFeedsTable/UserFeedStatusTag.tsx      | 20 ++++-
 .../feed/components/UserFeedsTable/index.tsx  | 39 +++++----
 .../client/src/locales/en-us/translation.json |  4 +-
 .../client/src/pages/UserFeeds.tsx            | 87 +++++++++++--------
 7 files changed, 125 insertions(+), 66 deletions(-)

diff --git a/services/backend-api/client/src/components/NewHeader/index.tsx b/services/backend-api/client/src/components/NewHeader/index.tsx
index 2bd55a6cb..366780bd9 100644
--- a/services/backend-api/client/src/components/NewHeader/index.tsx
+++ b/services/backend-api/client/src/components/NewHeader/index.tsx
@@ -8,8 +8,10 @@ import {
   HStack,
   Menu,
   MenuButton,
+  MenuDivider,
   MenuItem,
   MenuList,
+  Text,
 } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 import { Link, useLocation, useNavigate } from "react-router-dom";
@@ -53,7 +55,14 @@ export const NewHeader = ({ invertBackground }: Props) => {
           <Flex alignItems="center" overflow="hidden">
             {discordBotData && (
               <Link to={pages.userFeeds()}>
-                <Flex alignItems="center" paddingBottom="1" overflow="hidden">
+                <Flex
+                  alignItems="center"
+                  paddingBottom="1"
+                  overflow="hidden"
+                  as="a"
+                  href="/"
+                  aria-label="MonitoRSS Home"
+                >
                   <Avatar
                     src={discordBotData.result.avatar || undefined}
                     size="sm"
@@ -98,7 +107,7 @@ export const NewHeader = ({ invertBackground }: Props) => {
         </HStack>
         <Flex alignItems="center" paddingY="4">
           <Menu placement="bottom-end">
-            <MenuButton as={Button} size="sm" variant="link">
+            <MenuButton as={Button} size="sm" variant="link" aria-label="Account   settings">
               <Avatar
                 src={discordUserMe?.iconUrl}
                 size="sm"
@@ -108,8 +117,14 @@ export const NewHeader = ({ invertBackground }: Props) => {
               />
             </MenuButton>
             <MenuList>
+              <Box overflow="hidden" paddingX={2} title={discordUserMe?.username}>
+                <Text overflow="hidden" maxWidth={300} textOverflow="ellipsis" whiteSpace="nowrap">
+                  {discordUserMe?.username}
+                </Text>
+              </Box>
+              <MenuDivider />
               <MenuItem icon={<SettingsIcon />} onClick={() => navigate(pages.userSettings())}>
-                Settings
+                Account Settings
               </MenuItem>
               <MenuItem
                 alignItems="center"
@@ -118,7 +133,7 @@ export const NewHeader = ({ invertBackground }: Props) => {
                   window.open("https://support.monitorss.xyz", "_blank");
                 }}
               >
-                Support
+                Request Support
               </MenuItem>
               <ReportABugDialog
                 trigger={
diff --git a/services/backend-api/client/src/components/PageContentV2/index.tsx b/services/backend-api/client/src/components/PageContentV2/index.tsx
index 06eff09de..54cb8fbb7 100644
--- a/services/backend-api/client/src/components/PageContentV2/index.tsx
+++ b/services/backend-api/client/src/components/PageContentV2/index.tsx
@@ -1,4 +1,4 @@
-import { Flex } from "@chakra-ui/react";
+import { Flex, chakra } from "@chakra-ui/react";
 
 import { NewHeader } from "../NewHeader";
 
@@ -12,10 +12,14 @@ interface Props {
 export const PageContentV2 = ({ children, invertBackground }: Props) => {
   return (
     <Flex flexGrow={1} alignItems="center" flexDir="column" overflow="auto">
-      <NewHeader invertBackground={invertBackground} />
-      <Flex width="100%" justifyContent="center" alignItems="flex-start" flex={1}>
-        {children}
-      </Flex>
+      <chakra.header width="full">
+        <NewHeader invertBackground={invertBackground} />
+      </chakra.header>
+      <main>
+        <Flex width="100%" justifyContent="center" alignItems="flex-start" flex={1}>
+          {children}
+        </Flex>
+      </main>
     </Flex>
   );
 };
diff --git a/services/backend-api/client/src/features/feed/components/AddUserFeedDialog/index.tsx b/services/backend-api/client/src/features/feed/components/AddUserFeedDialog/index.tsx
index 513115cb0..792f83172 100644
--- a/services/backend-api/client/src/features/feed/components/AddUserFeedDialog/index.tsx
+++ b/services/backend-api/client/src/features/feed/components/AddUserFeedDialog/index.tsx
@@ -127,8 +127,8 @@ export const AddUserFeedDialog = ({ trigger }: Props) => {
         ) : (
           <Button
             colorScheme="blue"
-            onClick={onOpen}
-            isDisabled={!isUnderLimit}
+            onClick={() => (isUnderLimit ? onOpen() : undefined)}
+            aria-disabled={!isUnderLimit}
             isLoading={isLoading}
             variant="solid"
           >
diff --git a/services/backend-api/client/src/features/feed/components/UserFeedsTable/UserFeedStatusTag.tsx b/services/backend-api/client/src/features/feed/components/UserFeedsTable/UserFeedStatusTag.tsx
index 6140d28f2..427c2f1de 100644
--- a/services/backend-api/client/src/features/feed/components/UserFeedsTable/UserFeedStatusTag.tsx
+++ b/services/backend-api/client/src/features/feed/components/UserFeedsTable/UserFeedStatusTag.tsx
@@ -9,16 +9,28 @@ interface Props {
 
 export const UserFeedStatusTag: React.FC<Props> = ({ status }) => {
   if (status === UserFeedComputedStatus.RequiresAttention) {
-    return <FaCircleExclamation fontSize={18} color={getChakraColor("red.300")} />;
+    return (
+      <FaCircleExclamation
+        aria-label="Requires attention"
+        fontSize={18}
+        color={getChakraColor("red.300")}
+      />
+    );
   }
 
   if (status === UserFeedComputedStatus.Retrying) {
-    return <FaClock fontSize={18} color={getChakraColor("orange.200")} />;
+    return (
+      <FaClock
+        aria-label="Currently retrying after failed requests"
+        fontSize={18}
+        color={getChakraColor("orange.200")}
+      />
+    );
   }
 
   if (status === UserFeedComputedStatus.ManuallyDisabled) {
-    return <FaPauseCircle opacity="0.5" fontSize={18} />;
+    return <FaPauseCircle aria-label="Manually disabled" opacity="0.5" fontSize={18} />;
   }
 
-  return <FaCheckCircle color={getChakraColor("green.500")} fontSize={18} />;
+  return <FaCheckCircle aria-label="Ok" color={getChakraColor("green.500")} fontSize={18} />;
 };
diff --git a/services/backend-api/client/src/features/feed/components/UserFeedsTable/index.tsx b/services/backend-api/client/src/features/feed/components/UserFeedsTable/index.tsx
index 47afd6374..e8d9c5cd4 100644
--- a/services/backend-api/client/src/features/feed/components/UserFeedsTable/index.tsx
+++ b/services/backend-api/client/src/features/feed/components/UserFeedsTable/index.tsx
@@ -155,6 +155,7 @@ export const UserFeedsTable: React.FC<Props> = ({ onSelectedFeedId }) => {
             isIndeterminate={table.getIsSomeRowsSelected()}
             marginX={3.5}
             cursor="pointer"
+            aria-label="Check all currently loaded feeds for bulk actions"
           />
         ),
         cell: ({ row }) => (
@@ -187,13 +188,14 @@ export const UserFeedsTable: React.FC<Props> = ({ onSelectedFeedId }) => {
                   borderRadius: "full",
                 },
               }}
+              aria-label={`Check feed ${row.original.title} for bulk actions`}
             />
           </Box>
         ),
       }),
       columnHelper.accessor("computedStatus", {
-        cell: (info) => <UserFeedStatusTag status={info.getValue()} />,
         header: () => <span>{t("pages.feeds.tableStatus")}</span>,
+        cell: (info) => <UserFeedStatusTag status={info.getValue()} />,
       }),
       columnHelper.accessor("title", {
         id: "title",
@@ -420,14 +422,6 @@ export const UserFeedsTable: React.FC<Props> = ({ onSelectedFeedId }) => {
     setSearch(searchParamsSearch);
   }, [searchParamsSearch, setSearch]);
 
-  if (status === "loading") {
-    return (
-      <Center width="100%" height="100%">
-        <Loading size="lg" />
-      </Center>
-    );
-  }
-
   if (status === "error") {
     return (
       <Alert status="error">
@@ -437,16 +431,26 @@ export const UserFeedsTable: React.FC<Props> = ({ onSelectedFeedId }) => {
     );
   }
 
+  const isInitiallyLoading = status === "loading" && !data;
+
   return (
     <Stack spacing={4}>
+      <Box srOnly aria-live="polite">
+        {!isInitiallyLoading && (
+          <Text>
+            Loaded table with {flatData.length} of {data?.pages[0].total} feeds loaded
+          </Text>
+        )}
+      </Box>
       <form
+        hidden={isInitiallyLoading}
         id="user-feed-search"
         onSubmit={(e) => {
           e.preventDefault();
           onSearchSubmit();
         }}
       >
-        <HStack width="100%">
+        <HStack as="fieldset" width="100%">
           <InputGroup width="min-content" flex={1}>
             <InputLeftElement pointerEvents="none">
               <SearchIcon color="gray.400" />
@@ -483,18 +487,23 @@ export const UserFeedsTable: React.FC<Props> = ({ onSelectedFeedId }) => {
           </Button>
         </HStack>
       </form>
-      <Stack>
+      <Center mt={4} hidden={!isInitiallyLoading}>
+        <Stack alignItems="center">
+          <Loading />
+          <Text>Loading feeds...</Text>
+        </Stack>
+      </Center>
+      <Stack hidden={isInitiallyLoading}>
         <Flex justifyContent="space-between" flexWrap="wrap" width="100%" gap={4}>
           <HStack justifyContent="space-between" flexWrap="wrap" flex={1}>
             <Menu>
               <MenuButton
                 as={Button}
-                aria-label="Options"
                 rightIcon={<ChevronDownIcon />}
                 variant="outline"
                 isDisabled={selectedRows.length === 0}
               >
-                Bulk Actions
+                Bulk Feed Actions
               </MenuButton>
               <MenuList zIndex={2}>
                 <ConfirmModal
@@ -695,7 +704,7 @@ export const UserFeedsTable: React.FC<Props> = ({ onSelectedFeedId }) => {
 
                 return (
                   <Tr
-                    role="button"
+                    // role="button"
                     key={row.id}
                     _hover={{
                       bg: "gray.700",
@@ -732,7 +741,7 @@ export const UserFeedsTable: React.FC<Props> = ({ onSelectedFeedId }) => {
           </Table>
         </Box>
       </Stack>
-      <Stack>
+      <Stack hidden>
         <Center>
           <Text color="whiteAlpha.600" fontSize="sm">
             Viewed {flatData.length} of {data?.pages[0].total} feeds
diff --git a/services/backend-api/client/src/locales/en-us/translation.json b/services/backend-api/client/src/locales/en-us/translation.json
index e6253132a..f8cd61663 100644
--- a/services/backend-api/client/src/locales/en-us/translation.json
+++ b/services/backend-api/client/src/locales/en-us/translation.json
@@ -95,11 +95,11 @@
       "tableUrl": "URL",
       "tableStatus": "Status",
       "tableChannel": "Channel",
-      "tableSearch": "Search by title or url",
+      "tableSearch": "Search feeds by title or url",
       "tableResults": "Showing {{start}}-{{end}} of {{total}} results"
     },
     "userFeeds": {
-      "title": "Personal Feeds",
+      "title": "Feeds",
       "newBadge": "NEW",
       "backToLegacyFeedsButton": "Back to legacy feeds",
       "tabLogs": "Logs",
diff --git a/services/backend-api/client/src/pages/UserFeeds.tsx b/services/backend-api/client/src/pages/UserFeeds.tsx
index ea54fe226..9fef8ade9 100644
--- a/services/backend-api/client/src/pages/UserFeeds.tsx
+++ b/services/backend-api/client/src/pages/UserFeeds.tsx
@@ -18,7 +18,7 @@ import {
 import { Link, useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { AddIcon, ArrowLeftIcon } from "@chakra-ui/icons";
-import { useCallback, useContext, useEffect } from "react";
+import { useCallback, useContext, useEffect, useRef } from "react";
 import { FaRegNewspaper } from "react-icons/fa6";
 import { useDiscordUserMe, useUserMe } from "../features/discordUser";
 import {
@@ -40,6 +40,7 @@ export const UserFeeds: React.FC = () => {
   const navigate = useNavigate();
   const { data: discordUserMe } = useDiscordUserMe();
   const { data: userMeData } = useUserMe();
+  const addNewFeedButtonRef = useRef<HTMLButtonElement>(null);
   const { onOpen: onOpenPricingDialog } = useContext(PricingDialogContext);
   const { data: userFeedsRequireAttentionResults } = useUserFeeds({
     limit: 1,
@@ -80,8 +81,10 @@ export const UserFeeds: React.FC = () => {
     userMeData && !userMeData.result?.preferences?.alertOnDisabledFeeds;
 
   useEffect(() => {
-    document.title = "Feeds | MonitoRSS";
-  }, []);
+    if (userFeedsRequireAttentionResults?.total === 0 && addNewFeedButtonRef.current) {
+      addNewFeedButtonRef.current.focus();
+    }
+  }, [addNewFeedButtonRef.current, userFeedsResults?.total]);
 
   return (
     <BoxConstrained.Wrapper justifyContent="flex-start" height="100%" overflow="visible">
@@ -106,8 +109,12 @@ export const UserFeeds: React.FC = () => {
                   </AlertTitle>
                   <AlertDescription>
                     Article delivery may be fully or partially paused.{" "}
-                    <ChakraLink color="blue.300" onClick={onApplyRequiresAttentionFilters}>
-                      Apply filters to see which ones they are.
+                    <ChakraLink
+                      as="button"
+                      color="blue.300"
+                      onClick={onApplyRequiresAttentionFilters}
+                    >
+                      Click here to apply filters and see which ones they are.
                     </ChakraLink>
                     {hasFailedFeedAlertsDisabled && (
                       <>
@@ -127,14 +134,14 @@ export const UserFeeds: React.FC = () => {
             <Alert>
               <AlertIcon />
               <AlertTitle flex={1}>
-                You have {managementInvitesCount.total} pending feed management invite(s)
+                You have {managementInvitesCount.total} pending feed management invites
               </AlertTitle>
               <AlertDescription>
                 <Flex justifyContent="flex-end" flex={1}>
                   <FeedManagementInvitesDialog
                     trigger={
                       <Button variant="outline">
-                        <span>View</span>
+                        <span>View pending management invites</span>
                       </Button>
                     }
                   />
@@ -144,38 +151,46 @@ export const UserFeeds: React.FC = () => {
           )}
           <Flex justifyContent="space-between" alignItems="center" gap="4" flexWrap="wrap">
             <Flex alignItems="center" gap={4}>
-              <Heading size="lg">{t("pages.userFeeds.title")}</Heading>
+              <Heading as="h1" size="lg">
+                {t("pages.userFeeds.title")}
+              </Heading>
             </Flex>
-            <Flex alignItems="center">
+            <Flex alignItems="center" as="aside">
               {discordUserMe?.maxUserFeeds !== undefined && userFeedsResults?.total !== undefined && (
-                <HStack>
-                  <Text fontSize="xl" fontWeight={600}>
-                    {userFeedsResults.total}
-                  </Text>
-                  <Text fontSize="xl" fontWeight={600}>
-                    /
+                <Box>
+                  <Text fontSize="sm" srOnly>
+                    Feed Limit
                   </Text>
-                  {discordUserMe.maxUserFeedsComposition.legacy ? (
-                    <Tooltip
-                      label={
-                        <Box>
-                          <Text>+{discordUserMe.maxUserFeedsComposition.base}: Base Amount</Text>
-                          <Text>
-                            +{discordUserMe.maxUserFeedsComposition.legacy}: Legacy feed conversions
-                          </Text>
-                        </Box>
-                      }
-                    >
+                  <HStack>
+                    <Text fontSize="xl" fontWeight={600}>
+                      {userFeedsResults.total}
+                    </Text>
+                    <Text fontSize="xl" fontWeight={600}>
+                      /
+                    </Text>
+                    {discordUserMe.maxUserFeedsComposition.legacy ? (
+                      <Tooltip
+                        label={
+                          <Box>
+                            <Text>+{discordUserMe.maxUserFeedsComposition.base}: Base Amount</Text>
+                            <Text>
+                              +{discordUserMe.maxUserFeedsComposition.legacy}: Legacy feed
+                              conversions
+                            </Text>
+                          </Box>
+                        }
+                      >
+                        <Text fontSize="xl" fontWeight={600}>
+                          {discordUserMe.maxUserFeeds}
+                        </Text>
+                      </Tooltip>
+                    ) : (
                       <Text fontSize="xl" fontWeight={600}>
                         {discordUserMe.maxUserFeeds}
                       </Text>
-                    </Tooltip>
-                  ) : (
-                    <Text fontSize="xl" fontWeight={600}>
-                      {discordUserMe.maxUserFeeds}
-                    </Text>
-                  )}
-                </HStack>
+                    )}
+                  </HStack>
+                </Box>
               )}
               {!userMeData?.result.enableBilling && (
                 <IconButton
@@ -237,7 +252,11 @@ export const UserFeeds: React.FC = () => {
               </Stack>
               <AddUserFeedDialog
                 trigger={
-                  <Button colorScheme="blue" leftIcon={<AddIcon fontSize={12} />}>
+                  <Button
+                    colorScheme="blue"
+                    leftIcon={<AddIcon fontSize={12} />}
+                    ref={addNewFeedButtonRef}
+                  >
                     Add a new feed
                   </Button>
                 }