fix: [M3-7155] - Link Accessibility & Markup on Billing Detail page

packages/manager/.changeset/pr-9697-fixed-1695133545193.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Back link and CSV download button accessibility on Billing Detail page ([#9697](https://github.com/linode/manager/pull/9697))

packages/manager/cypress/e2e/core/billing/billing-invoices.spec.ts

@@ -135,15 +135,8 @@ describe('Account invoices', () => {
         cy.findByText(`Invoice #${mockInvoice.id}`).should('be.visible');
         cy.findByText(formatUsd(sumSubtotal + sumTax)).should('be.visible');
 
-        ui.button
-          .findByTitle('Download CSV')
-          .should('be.visible')
-          .should('be.enabled');
-
-        ui.button
-          .findByTitle('Download PDF')
-          .should('be.visible')
-          .should('be.enabled');
+        cy.findByText('Download CSV').should('be.visible');
+        cy.findByText('Download PDF').should('be.visible');
       });
 
     // Confirm that invoice summary displays subtotal, tax subtotal, tax summary entries, and grand total.

packages/manager/src/components/DownloadCSV/DownloadCSV.tsx

@@ -14,7 +14,7 @@ interface DownloadCSVProps {
   data: unknown[];
   filename: string;
   headers: { key: string; label: string }[];
-  onClick: () => void;
+  onClick?: () => void;
   sx?: SxProps;
   text?: string;
 }
@@ -40,20 +40,24 @@ export const DownloadCSV = ({
   text = 'Download CSV',
 }: DownloadCSVProps) => {
   return (
-    <>
-      <CSVLink
-        aria-hidden="true"
-        className={className}
-        data={cleanCSVData(data)}
-        filename={filename}
-        headers={headers}
-        ref={csvRef}
+    <CSVLink
+      className={className}
+      data={cleanCSVData(data)}
+      filename={filename}
+      headers={headers}
+      ref={csvRef}
+    >
+      <Button
+        buttonType={buttonType}
+        component="span"
+        disableRipple
+        onClick={onClick}
+        sx={sx}
         tabIndex={-1}
-      />
-      <Button buttonType={buttonType} onClick={onClick} sx={sx}>
+      >
         {text}
       </Button>
-    </>
+    </CSVLink>
   );
 };
 

packages/manager/src/components/Link.tsx

@@ -67,18 +67,18 @@ export const Link = (props: LinkProps) => {
     className,
     external,
     forceCopyColor,
+    hideIcon,
     onClick,
     to,
-    hideIcon,
   } = props;
   const { classes, cx } = useStyles();
   const sanitizedUrl = () => sanitizeUrl(to);
   const shouldOpenInNewTab = opensInNewTab(sanitizedUrl());
   const childrenAsAriaLabel = flattenChildrenIntoAriaLabel(children);
   const externalNotice = '- link opens in a new tab';
   const ariaLabel = accessibleAriaLabel
-    ? `${accessibleAriaLabel} ${externalNotice}`
-    : `${childrenAsAriaLabel} ${externalNotice}`;
+    ? `${accessibleAriaLabel} ${shouldOpenInNewTab ? externalNotice : ''}`
+    : `${childrenAsAriaLabel} ${shouldOpenInNewTab ? externalNotice : ''}`;
 
   if (childrenContainsNoText(children) && !accessibleAriaLabel) {
     // eslint-disable-next-line no-console
@@ -122,6 +122,7 @@ export const Link = (props: LinkProps) => {
     </a>
   ) : (
     <RouterLink
+      aria-label={ariaLabel}
       data-testid="internal-link"
       {...routerLinkProps}
       className={cx(

packages/manager/src/features/Account/AccountLanding.tsx

@@ -16,7 +16,11 @@ import { useGrants } from 'src/queries/profile';
 
 import AccountLogins from './AccountLogins';
 
-const Billing = React.lazy(() => import('src/features/Billing'));
+const Billing = React.lazy(() =>
+  import('src/features/Billing/BillingDetail').then((module) => ({
+    default: module.BillingDetail,
+  }))
+);
 const EntityTransfersLanding = React.lazy(() =>
   import(
     'src/features/EntityTransfers/EntityTransfersLanding/EntityTransfersLanding'

packages/manager/src/features/Account/Maintenance/MaintenanceTable.tsx

@@ -132,7 +132,6 @@ const MaintenanceTable = ({ type }: Props) => {
 
   const downloadCSV = async () => {
     await getCSVData();
-    csvRef.current.link.click();
   };
 
   return (

packages/manager/src/features/Account/index.tsx

@@ -7,8 +7,10 @@ import { SuspenseLoader } from 'src/components/SuspenseLoader';
 const AccountLanding = React.lazy(
   () => import('src/features/Account/AccountLanding')
 );
-const InvoiceDetail = React.lazy(
-  () => import('src/features/Billing/InvoiceDetail')
+const InvoiceDetail = React.lazy(() =>
+  import('src/features/Billing/InvoiceDetail/InvoiceDetail').then((module) => ({
+    default: module.InvoiceDetail,
+  }))
 );
 const EntityTransfersCreate = React.lazy(() =>
   import(

packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx

@@ -129,14 +129,22 @@ export const InvoiceDetail = () => {
     >
       <Grid container rowGap={2}>
         <Grid xs={12}>
-          <Grid container spacing={2} sx={sxGrid} data-qa-invoice-header>
+          <Grid container data-qa-invoice-header spacing={2} sx={sxGrid}>
             <Grid sm={4} sx={sxGrid} xs={12}>
-              <Link to={`/account/billing`} data-qa-back-to-billing>
+              <Link
+                accessibleAriaLabel="Back to Billing"
+                data-qa-back-to-billing
+                to={`/account/billing`}
+              >
                 <IconButton
                   sx={{
                     padding: 0,
                   }}
+                  component="span"
+                  disableFocusRipple
+                  role="none"
                   size="large"
+                  tabIndex={-1}
                 >
                   <KeyboardArrowLeft
                     sx={{
@@ -168,7 +176,6 @@ export const InvoiceDetail = () => {
                     data={items}
                     filename={`invoice-${invoice.date}.csv`}
                     headers={csvHeaders}
-                    onClick={() => csvRef.current.link.click()}
                     sx={{ ...sxDownloadButton, marginRight: '8px' }}
                   />
                   <Button
@@ -246,5 +253,3 @@ export const InvoiceDetail = () => {
     </Paper>
   );
 };
-
-export default InvoiceDetail;