Improve accessibility on user feeds page

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={

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>
   );
 };

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"
           >

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} />;
 };

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

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",