From 49fe7477c4d3d8ff3892024e4dc701aa2023277e Mon Sep 17 00:00:00 2001
From: gintil <michael994664@gmail.com>
Date: Mon, 10 Feb 2025 19:39:39 -0500
Subject: [PATCH] Improve accessibility in feed logs tab

---
 .../UserFeedLogs/DeliveryHistory/index.tsx    | 51 ++++++++---
 .../UserFeedLogs/RequestHistory/index.tsx     | 86 +++++++++++++++----
 .../feed/components/UserFeedLogs/index.tsx    |  5 +-
 3 files changed, 110 insertions(+), 32 deletions(-)

diff --git a/services/backend-api/client/src/features/feed/components/UserFeedLogs/DeliveryHistory/index.tsx b/services/backend-api/client/src/features/feed/components/UserFeedLogs/DeliveryHistory/index.tsx
index 6c129deaa..cbb90e063 100644
--- a/services/backend-api/client/src/features/feed/components/UserFeedLogs/DeliveryHistory/index.tsx
+++ b/services/backend-api/client/src/features/feed/components/UserFeedLogs/DeliveryHistory/index.tsx
@@ -29,6 +29,7 @@ import {
   ModalFooter,
   chakra,
   Tooltip,
+  Divider,
 } from "@chakra-ui/react";
 import dayjs from "dayjs";
 import { Link } from "react-router-dom";
@@ -131,7 +132,7 @@ export const DeliveryHistory = () => {
   const hasNoData = data?.result.logs.length === 0 && skip === 0;
 
   return (
-    <Stack spacing={4} mb={16}>
+    <Stack spacing={4} mb={16} border="solid 1px" borderColor="gray.700" borderRadius="md">
       <Modal isOpen={!!detailsData} onClose={onCloseDetailsModal} size="6xl">
         <ModalOverlay />
         <ModalContent>
@@ -147,9 +148,19 @@ export const DeliveryHistory = () => {
           </ModalFooter>
         </ModalContent>
       </Modal>
-      <Heading size="md">Article Delivery History</Heading>
+      <Box>
+        <Stack px={4} py={4}>
+          <Heading as="h3" size="sm" m={0} id="delivery-history-table-title">
+            Article Delivery History
+          </Heading>
+          <Text>Delivery attempts for articles across all connections.</Text>
+        </Stack>
+        <Box px={4}>
+          <Divider />
+        </Box>
+      </Box>
       {status === "loading" && (
-        <Center>
+        <Center pb={8}>
           <Spinner />
         </Center>
       )}
@@ -164,14 +175,14 @@ export const DeliveryHistory = () => {
       )}
       {data?.result && !hasNoData && (
         <Stack>
-          <Box border="solid 1px" borderColor="gray.600" borderRadius="md">
-            <TableContainer>
-              <Table size="sm">
+          <Box>
+            <TableContainer px={4}>
+              <Table size="sm" variant="simple" aria-labelledby="delivery-history-table-title">
                 <Thead>
                   <Tr>
                     <Th>Date</Th>
                     <Th>Connection</Th>
-                    <Th>Article</Th>
+                    <Th>Article Title</Th>
                     <Th>Status</Th>
                     <Th>Details</Th>
                   </Tr>
@@ -229,7 +240,7 @@ export const DeliveryHistory = () => {
                             {!matchedArticle && (
                               <Tooltip label="The referenced article either no longer exists on the feed or has no title">
                                 <Text color="whiteAlpha.700" fontStyle="italic">
-                                  (unknown article)
+                                  (unknown article title)
                                 </Text>
                               </Tooltip>
                             )}
@@ -275,23 +286,35 @@ export const DeliveryHistory = () => {
               </Table>
             </TableContainer>
           </Box>
-          <Flex justifyContent="flex-end">
+          <Flex p={4}>
             <HStack>
               <Button
                 width="min-content"
                 size="sm"
-                onClick={prevPage}
-                isDisabled={onFirstPage || fetchStatus === "fetching"}
+                onClick={() => {
+                  if (onFirstPage || fetchStatus === "fetching") {
+                    return;
+                  }
+
+                  prevPage();
+                }}
+                aria-disabled={onFirstPage || fetchStatus === "fetching"}
               >
-                <span>Previous</span>
+                <span>Previous Page</span>
               </Button>
               <Button
                 width="min-content"
                 size="sm"
-                onClick={nextPage}
+                onClick={() => {
+                  if (fetchStatus === "fetching" || data?.result.logs.length === 0) {
+                    return;
+                  }
+
+                  nextPage();
+                }}
                 isDisabled={fetchStatus === "fetching" || data?.result.logs.length === 0}
               >
-                <span>Next</span>
+                <span>Next Page</span>
               </Button>
             </HStack>
           </Flex>
diff --git a/services/backend-api/client/src/features/feed/components/UserFeedLogs/RequestHistory/index.tsx b/services/backend-api/client/src/features/feed/components/UserFeedLogs/RequestHistory/index.tsx
index d37e889a9..96dfa4f08 100644
--- a/services/backend-api/client/src/features/feed/components/UserFeedLogs/RequestHistory/index.tsx
+++ b/services/backend-api/client/src/features/feed/components/UserFeedLogs/RequestHistory/index.tsx
@@ -4,9 +4,16 @@ import {
   Box,
   Button,
   Center,
+  Divider,
   Flex,
   HStack,
   Heading,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverCloseButton,
+  PopoverContent,
+  PopoverTrigger,
   Skeleton,
   Spinner,
   Stack,
@@ -17,7 +24,6 @@ import {
   Text,
   Th,
   Thead,
-  Tooltip,
   Tr,
 } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
@@ -88,10 +94,20 @@ export const RequestHistory = () => {
   const hasNoData = data?.result.requests.length === 0 && skip === 0;
 
   return (
-    <Stack spacing={4} mb={8}>
-      <Heading size="md">{t("features.userFeeds.components.requestsTable.title")}</Heading>
+    <Stack spacing={4} mb={8} border="solid 1px" borderColor="gray.700" borderRadius="md">
+      <Box>
+        <Stack px={4} py={4}>
+          <Heading size="sm" as="h3" m={0} id="request-history-table-title">
+            {t("features.userFeeds.components.requestsTable.title")}
+          </Heading>
+          <Text>Outgoing HTTP requests to the feed URL along with their response details.</Text>
+        </Stack>
+        <Box px={4}>
+          <Divider />
+        </Box>
+      </Box>
       {status === "loading" && (
-        <Center>
+        <Center pb={8}>
           <Spinner />
         </Center>
       )}
@@ -117,18 +133,42 @@ export const RequestHistory = () => {
       )}
       {data && !hasNoData && (
         <Stack>
-          <Box border="solid 1px" borderColor="gray.600" borderRadius="md">
-            <TableContainer>
-              <Table size="sm">
+          <Box>
+            <TableContainer px={4}>
+              <Table size="sm" variant="simple" aria-labelledby="request-history-table-title">
                 <Thead>
                   <Tr>
                     <Th>{t("features.userFeeds.components.requestsTable.tableHeaderDate")}</Th>
                     <Th>{t("features.userFeeds.components.requestsTable.tableHeaderStatus")}</Th>
                     <Th>
                       Cache Duration{" "}
-                      <Tooltip label="The duration, determined by the feed host, for which the contents of a particular request will be re-used before a new request is made. This is necessary to comply with polling requirements, and so it overrides this feed's refresh rate.">
-                        <QuestionOutlineComponent aria-label="Cache Duration" />
-                      </Tooltip>
+                      <Popover>
+                        <PopoverTrigger>
+                          <Button variant="ghost" size="xs" aria-label="What is cache duration?">
+                            <QuestionOutlineComponent />
+                          </Button>
+                        </PopoverTrigger>
+                        <PopoverContent>
+                          <PopoverArrow />
+                          <PopoverCloseButton />
+                          <PopoverBody>
+                            <Text
+                              fontFamily="var(--chakra-fonts-body)"
+                              whiteSpace="initial"
+                              textTransform="none"
+                              fontWeight="normal"
+                              color="var(--chakra-colors-chakra-body-text)"
+                              fontSize={14}
+                              lineHeight="var(--chakra-lineHeights-base)"
+                            >
+                              The duration, determined by the feed host, for which the contents of a
+                              particular request will be re-used before a new request is made. This
+                              is necessary to comply with polling requirements, and so it overrides
+                              this feed&apos;s refresh rate.
+                            </Text>
+                          </PopoverBody>
+                        </PopoverContent>
+                      </Popover>
                     </Th>
                   </Tr>
                 </Thead>
@@ -160,23 +200,35 @@ export const RequestHistory = () => {
               </Table>
             </TableContainer>
           </Box>
-          <Flex justifyContent="flex-end">
+          <Flex p={4}>
             <HStack>
               <Button
                 width="min-content"
                 size="sm"
-                onClick={prevPage}
-                isDisabled={onFirstPage || fetchStatus === "fetching"}
+                onClick={() => {
+                  if (onFirstPage || fetchStatus === "fetching") {
+                    return;
+                  }
+
+                  prevPage();
+                }}
+                aria-disabled={onFirstPage || fetchStatus === "fetching"}
               >
-                {t("features.feedConnections.components.filtersTabSection.prevPage")}
+                Previous Page
               </Button>
               <Button
                 width="min-content"
                 size="sm"
-                onClick={nextPage}
-                isDisabled={fetchStatus === "fetching" || data?.result.requests.length === 0}
+                onClick={() => {
+                  if (fetchStatus === "fetching" || data?.result.requests.length === 0) {
+                    return;
+                  }
+
+                  nextPage();
+                }}
+                aria-disabled={fetchStatus === "fetching" || data?.result.requests.length === 0}
               >
-                {t("features.feedConnections.components.filtersTabSection.nextPage")}
+                Next Page
               </Button>
             </HStack>
           </Flex>
diff --git a/services/backend-api/client/src/features/feed/components/UserFeedLogs/index.tsx b/services/backend-api/client/src/features/feed/components/UserFeedLogs/index.tsx
index ae5781033..b27c37da9 100644
--- a/services/backend-api/client/src/features/feed/components/UserFeedLogs/index.tsx
+++ b/services/backend-api/client/src/features/feed/components/UserFeedLogs/index.tsx
@@ -1,10 +1,13 @@
-import { Stack } from "@chakra-ui/react";
+import { Heading, Stack } from "@chakra-ui/react";
 import { DeliveryHistory } from "./DeliveryHistory";
 import { RequestHistory } from "./RequestHistory";
 
 export const UserFeedLogs = () => {
   return (
     <Stack spacing={8}>
+      <Heading size="md" as="h2">
+        Logs
+      </Heading>
       <RequestHistory />
       <DeliveryHistory />
     </Stack>