Skip to content

Commit 49fe747

Browse files
synzensynzen
committed
Improve accessibility in feed logs tab
1 parent 0b2cf59 commit 49fe747

File tree

3 files changed

+110
-32
lines changed

3 files changed

+110
-32
lines changed

‎services/backend-api/client/src/features/feed/components/UserFeedLogs/DeliveryHistory/index.tsx‎

Lines changed: 37 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import {
2929
ModalFooter,
3030
chakra,
3131
Tooltip,
32+
Divider,
3233
} from "@chakra-ui/react";
3334
import dayjs from "dayjs";
3435
import { Link } from "react-router-dom";
@@ -131,7 +132,7 @@ export const DeliveryHistory = () => {
131132
const hasNoData = data?.result.logs.length === 0 && skip === 0;
132133

133134
return (
134-
<Stack spacing={4} mb={16}>
135+
<Stack spacing={4} mb={16} border="solid 1px" borderColor="gray.700" borderRadius="md">
135136
<Modal isOpen={!!detailsData} onClose={onCloseDetailsModal} size="6xl">
136137
<ModalOverlay />
137138
<ModalContent>
@@ -147,9 +148,19 @@ export const DeliveryHistory = () => {
147148
</ModalFooter>
148149
</ModalContent>
149150
</Modal>
150-
<Heading size="md">Article Delivery History</Heading>
151+
<Box>
152+
<Stack px={4} py={4}>
153+
<Heading as="h3" size="sm" m={0} id="delivery-history-table-title">
154+
Article Delivery History
155+
</Heading>
156+
<Text>Delivery attempts for articles across all connections.</Text>
157+
</Stack>
158+
<Box px={4}>
159+
<Divider />
160+
</Box>
161+
</Box>
151162
{status === "loading" && (
152-
<Center>
163+
<Center pb={8}>
153164
<Spinner />
154165
</Center>
155166
)}
@@ -164,14 +175,14 @@ export const DeliveryHistory = () => {
164175
)}
165176
{data?.result && !hasNoData && (
166177
<Stack>
167-
<Box border="solid 1px" borderColor="gray.600" borderRadius="md">
168-
<TableContainer>
169-
<Table size="sm">
178+
<Box>
179+
<TableContainer px={4}>
180+
<Table size="sm" variant="simple" aria-labelledby="delivery-history-table-title">
170181
<Thead>
171182
<Tr>
172183
<Th>Date</Th>
173184
<Th>Connection</Th>
174-
<Th>Article</Th>
185+
<Th>Article Title</Th>
175186
<Th>Status</Th>
176187
<Th>Details</Th>
177188
</Tr>
@@ -229,7 +240,7 @@ export const DeliveryHistory = () => {
229240
{!matchedArticle && (
230241
<Tooltip label="The referenced article either no longer exists on the feed or has no title">
231242
<Text color="whiteAlpha.700" fontStyle="italic">
232-
(unknown article)
243+
(unknown article title)
233244
</Text>
234245
</Tooltip>
235246
)}
@@ -275,23 +286,35 @@ export const DeliveryHistory = () => {
275286
</Table>
276287
</TableContainer>
277288
</Box>
278-
<Flex justifyContent="flex-end">
289+
<Flex p={4}>
279290
<HStack>
280291
<Button
281292
width="min-content"
282293
size="sm"
283-
onClick={prevPage}
284-
isDisabled={onFirstPage || fetchStatus === "fetching"}
294+
onClick={() => {
295+
if (onFirstPage || fetchStatus === "fetching") {
296+
return;
297+
}
298+
299+
prevPage();
300+
}}
301+
aria-disabled={onFirstPage || fetchStatus === "fetching"}
285302
>
286-
<span>Previous</span>
303+
<span>Previous Page</span>
287304
</Button>
288305
<Button
289306
width="min-content"
290307
size="sm"
291-
onClick={nextPage}
308+
onClick={() => {
309+
if (fetchStatus === "fetching" || data?.result.logs.length === 0) {
310+
return;
311+
}
312+
313+
nextPage();
314+
}}
292315
isDisabled={fetchStatus === "fetching" || data?.result.logs.length === 0}
293316
>
294-
<span>Next</span>
317+
<span>Next Page</span>
295318
</Button>
296319
</HStack>
297320
</Flex>

‎services/backend-api/client/src/features/feed/components/UserFeedLogs/RequestHistory/index.tsx‎

Lines changed: 69 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,16 @@ import {
44
Box,
55
Button,
66
Center,
7+
Divider,
78
Flex,
89
HStack,
910
Heading,
11+
Popover,
12+
PopoverArrow,
13+
PopoverBody,
14+
PopoverCloseButton,
15+
PopoverContent,
16+
PopoverTrigger,
1017
Skeleton,
1118
Spinner,
1219
Stack,
@@ -17,7 +24,6 @@ import {
1724
Text,
1825
Th,
1926
Thead,
20-
Tooltip,
2127
Tr,
2228
} from "@chakra-ui/react";
2329
import { useTranslation } from "react-i18next";
@@ -88,10 +94,20 @@ export const RequestHistory = () => {
8894
const hasNoData = data?.result.requests.length === 0 && skip === 0;
8995

9096
return (
91-
<Stack spacing={4} mb={8}>
92-
<Heading size="md">{t("features.userFeeds.components.requestsTable.title")}</Heading>
97+
<Stack spacing={4} mb={8} border="solid 1px" borderColor="gray.700" borderRadius="md">
98+
<Box>
99+
<Stack px={4} py={4}>
100+
<Heading size="sm" as="h3" m={0} id="request-history-table-title">
101+
{t("features.userFeeds.components.requestsTable.title")}
102+
</Heading>
103+
<Text>Outgoing HTTP requests to the feed URL along with their response details.</Text>
104+
</Stack>
105+
<Box px={4}>
106+
<Divider />
107+
</Box>
108+
</Box>
93109
{status === "loading" && (
94-
<Center>
110+
<Center pb={8}>
95111
<Spinner />
96112
</Center>
97113
)}
@@ -117,18 +133,42 @@ export const RequestHistory = () => {
117133
)}
118134
{data && !hasNoData && (
119135
<Stack>
120-
<Box border="solid 1px" borderColor="gray.600" borderRadius="md">
121-
<TableContainer>
122-
<Table size="sm">
136+
<Box>
137+
<TableContainer px={4}>
138+
<Table size="sm" variant="simple" aria-labelledby="request-history-table-title">
123139
<Thead>
124140
<Tr>
125141
<Th>{t("features.userFeeds.components.requestsTable.tableHeaderDate")}</Th>
126142
<Th>{t("features.userFeeds.components.requestsTable.tableHeaderStatus")}</Th>
127143
<Th>
128144
Cache Duration{" "}
129-
<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.">
130-
<QuestionOutlineComponent aria-label="Cache Duration" />
131-
</Tooltip>
145+
<Popover>
146+
<PopoverTrigger>
147+
<Button variant="ghost" size="xs" aria-label="What is cache duration?">
148+
<QuestionOutlineComponent />
149+
</Button>
150+
</PopoverTrigger>
151+
<PopoverContent>
152+
<PopoverArrow />
153+
<PopoverCloseButton />
154+
<PopoverBody>
155+
<Text
156+
fontFamily="var(--chakra-fonts-body)"
157+
whiteSpace="initial"
158+
textTransform="none"
159+
fontWeight="normal"
160+
color="var(--chakra-colors-chakra-body-text)"
161+
fontSize={14}
162+
lineHeight="var(--chakra-lineHeights-base)"
163+
>
164+
The duration, determined by the feed host, for which the contents of a
165+
particular request will be re-used before a new request is made. This
166+
is necessary to comply with polling requirements, and so it overrides
167+
this feed&apos;s refresh rate.
168+
</Text>
169+
</PopoverBody>
170+
</PopoverContent>
171+
</Popover>
132172
</Th>
133173
</Tr>
134174
</Thead>
@@ -160,23 +200,35 @@ export const RequestHistory = () => {
160200
</Table>
161201
</TableContainer>
162202
</Box>
163-
<Flex justifyContent="flex-end">
203+
<Flex p={4}>
164204
<HStack>
165205
<Button
166206
width="min-content"
167207
size="sm"
168-
onClick={prevPage}
169-
isDisabled={onFirstPage || fetchStatus === "fetching"}
208+
onClick={() => {
209+
if (onFirstPage || fetchStatus === "fetching") {
210+
return;
211+
}
212+
213+
prevPage();
214+
}}
215+
aria-disabled={onFirstPage || fetchStatus === "fetching"}
170216
>
171-
{t("features.feedConnections.components.filtersTabSection.prevPage")}
217+
Previous Page
172218
</Button>
173219
<Button
174220
width="min-content"
175221
size="sm"
176-
onClick={nextPage}
177-
isDisabled={fetchStatus === "fetching" || data?.result.requests.length === 0}
222+
onClick={() => {
223+
if (fetchStatus === "fetching" || data?.result.requests.length === 0) {
224+
return;
225+
}
226+
227+
nextPage();
228+
}}
229+
aria-disabled={fetchStatus === "fetching" || data?.result.requests.length === 0}
178230
>
179-
{t("features.feedConnections.components.filtersTabSection.nextPage")}
231+
Next Page
180232
</Button>
181233
</HStack>
182234
</Flex>

‎services/backend-api/client/src/features/feed/components/UserFeedLogs/index.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1-
import { Stack } from "@chakra-ui/react";
1+
import { Heading, Stack } from "@chakra-ui/react";
22
import { DeliveryHistory } from "./DeliveryHistory";
33
import { RequestHistory } from "./RequestHistory";
44

55
export const UserFeedLogs = () => {
66
return (
77
<Stack spacing={8}>
8+
<Heading size="md" as="h2">
9+
Logs
10+
</Heading>
811
<RequestHistory />
912
<DeliveryHistory />
1013
</Stack>

0 commit comments

Comments
 (0)