Skip to content

Commit

Permalink
Improve accessibility in feed logs tab
Browse files Browse the repository at this point in the history
  • Loading branch information
@synzen
synzen committed Feb 11, 2025
1 parent 0b2cf59 commit 49fe747
Show file tree
Hide file tree
Showing 3 changed files with 110 additions and 32 deletions.
51 changes: 37 additions & 14 deletions ...es/backend-api/client/src/features/feed/components/UserFeedLogs/DeliveryHistory/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import {
ModalFooter,
chakra,
Tooltip,
Divider,
} from "@chakra-ui/react";
import dayjs from "dayjs";
import { Link } from "react-router-dom";
Expand Down Expand Up @@ -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>
Expand All @@ -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>
)}
Expand All @@ -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>
Expand Down Expand Up @@ -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>
)}
Expand Down Expand Up @@ -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>
Expand Down
86 changes: 69 additions & 17 deletions ...ces/backend-api/client/src/features/feed/components/UserFeedLogs/RequestHistory/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,16 @@ import {
Box,
Button,
Center,
Divider,
Flex,
HStack,
Heading,
Popover,
PopoverArrow,
PopoverBody,
PopoverCloseButton,
PopoverContent,
PopoverTrigger,
Skeleton,
Spinner,
Stack,
Expand All @@ -17,7 +24,6 @@ import {
Text,
Th,
Thead,
Tooltip,
Tr,
} from "@chakra-ui/react";
import { useTranslation } from "react-i18next";
Expand Down Expand Up @@ -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>
)}
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
5 changes: 4 additions & 1 deletion services/backend-api/client/src/features/feed/components/UserFeedLogs/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand Down

0 comments on commit 49fe747

Please sign in to comment.