Announce loading states to screen readers in logs tab

Author: synzen

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

@@ -101,7 +101,7 @@ const createStatusLabel = ({ status }: { status: UserFeedDeliveryLogStatus }) =>
 export const DeliveryHistory = () => {
   const [detailsData, setDetailsData] = useState("");
   const { articleFormatOptions, userFeed } = useUserFeedContext();
-  const { data, status, error, skip, nextPage, prevPage, fetchStatus } =
+  const { data, status, error, skip, nextPage, prevPage, fetchStatus, limit } =
     useUserFeedDeliveryLogsWithPagination({
       feedId: userFeed.id,
       data: {},
@@ -159,6 +159,10 @@ export const DeliveryHistory = () => {
           <Divider />
         </Box>
       </Box>
+      <Box srOnly aria-live="polite">
+        {fetchStatus === "fetching" && `Loading rows ${skip} through ${skip + limit}`}
+        {data && `Finished loading rows ${skip} through ${skip + limit}`}
+      </Box>
       {status === "loading" && (
         <Center pb={8}>
           <Spinner />

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

@@ -36,7 +36,7 @@ import { InlineErrorAlert } from "../../../../../components";
 import { useUserFeedContext } from "../../../../../contexts/UserFeedContext";
 
 const QuestionOutlineComponent = forwardRef<any>((props, ref) => (
-  <QuestionOutlineIcon fontSize={12} tabIndex={0} ref={ref} {...props} />
+  <QuestionOutlineIcon fontSize={12} tabIndex={-1} ref={ref} aria-hidden {...props} />
 ));
 
 const createStatusLabel = (
@@ -83,7 +83,7 @@ export const RequestHistory = () => {
   const {
     userFeed: { id: feedId },
   } = useUserFeedContext();
-  const { data, status, error, skip, nextPage, prevPage, fetchStatus } =
+  const { data, status, error, skip, nextPage, prevPage, fetchStatus, limit } =
     useUserFeedRequestsWithPagination({
       feedId,
       data: {},
@@ -106,6 +106,10 @@ export const RequestHistory = () => {
           <Divider />
         </Box>
       </Box>
+      <Box srOnly aria-live="polite">
+        {fetchStatus === "fetching" && `Loading rows ${skip} through ${skip + limit}`}
+        {data && `Finished loading rows ${skip} through ${skip + limit}`}
+      </Box>
       {status === "loading" && (
         <Center pb={8}>
           <Spinner />