diff --git a/packages/manager/.changeset/pr-10694-added-1722002374051.md b/packages/manager/.changeset/pr-10694-added-1722002374051.md
new file mode 100644
index 00000000000..9d666bb57a9
--- /dev/null
+++ b/packages/manager/.changeset/pr-10694-added-1722002374051.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Adding an ARIA label to these Account Maintenance tables ([#10694](https://github.com/linode/manager/pull/10694))
diff --git a/packages/manager/.changeset/pr-10694-tests-1721327150369.md b/packages/manager/.changeset/pr-10694-tests-1721327150369.md
new file mode 100644
index 00000000000..deff84262c9
--- /dev/null
+++ b/packages/manager/.changeset/pr-10694-tests-1721327150369.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Cypress integration tests for account "Maintenance" tab ([#10694](https://github.com/linode/manager/pull/10694))
diff --git a/packages/manager/cypress/e2e/core/account/account-maintenance.spec.ts b/packages/manager/cypress/e2e/core/account/account-maintenance.spec.ts
new file mode 100644
index 00000000000..56292a96bd5
--- /dev/null
+++ b/packages/manager/cypress/e2e/core/account/account-maintenance.spec.ts
@@ -0,0 +1,129 @@
+import { mockGetMaintenance } from 'support/intercepts/account';
+import { accountMaintenanceFactory } from 'src/factories';
+
+describe('Maintenance', () => {
+ /*
+ * - Confirm user can navigate to account maintenance page via user menu.
+ * - When there is no pending maintenance, "No pending maintenance." is shown in the table.
+ * - When there is no completed maintenance, "No completed maintenance." is shown in the table.
+ */
+ it('table empty when no maintenance', () => {
+ mockGetMaintenance([], []).as('getMaintenance');
+
+ cy.visitWithLogin('/linodes');
+ // user can navigate to account maintenance page via user menu.
+ cy.findByTestId('nav-group-profile').click();
+ cy.findByTestId('menu-item-Maintenance')
+ .should('be.visible')
+ .should('be.enabled')
+ .click();
+ cy.url().should('endWith', '/account/maintenance');
+
+ cy.wait('@getMaintenance');
+
+ // Confirm correct messages shown in the table when no maintenance.
+ cy.contains('No pending maintenance').should('be.visible');
+ cy.contains('No completed maintenance').should('be.visible');
+ });
+
+ /*
+ * - Uses mock API data to confirm maintenance details.
+ * - When there is pending maintenance, it is shown in the table with expected details.
+ * - When there is completed maintenance, it is shown in the table with expected details.
+ * - Confirm "Download CSV" button for pending maintenance visible and enabled.
+ * - Confirm "Download CSV" button for completed maintenance visible and enabled.
+ */
+ it('confirm maintenance details in the tables', () => {
+ const pendingMaintenanceNumber = 2;
+ const completedMaintenanceNumber = 5;
+ const accountpendingMaintenance = accountMaintenanceFactory.buildList(
+ pendingMaintenanceNumber
+ );
+ const accountcompletedMaintenance = accountMaintenanceFactory.buildList(
+ completedMaintenanceNumber,
+ { status: 'completed' }
+ );
+
+ mockGetMaintenance(
+ accountpendingMaintenance,
+ accountcompletedMaintenance
+ ).as('getMaintenance');
+
+ cy.visitWithLogin('/account/maintenance');
+
+ cy.wait('@getMaintenance');
+
+ cy.contains('No pending maintenance').should('not.exist');
+ cy.contains('No completed maintenance').should('not.exist');
+
+ // Confirm Pending table is not empty and contains exact number of pending maintenances
+ cy.findByLabelText('List of pending maintenance')
+ .should('be.visible')
+ .find('tbody')
+ .within(() => {
+ accountpendingMaintenance.forEach(() => {
+ cy.get('tr')
+ .should('have.length', accountpendingMaintenance.length)
+ .each((row, index) => {
+ const pendingMaintenance = accountpendingMaintenance[index];
+ cy.wrap(row).within(() => {
+ cy.contains(pendingMaintenance.entity.label).should(
+ 'be.visible'
+ );
+ // Confirm that the first 90 characters of each reason string are rendered on screen
+ const truncatedReason = pendingMaintenance.reason.substring(
+ 0,
+ 90
+ );
+ cy.findByText(truncatedReason, { exact: false }).should(
+ 'be.visible'
+ );
+ // Check the content of each | element
+ cy.get('td').each(($cell, idx, $cells) => {
+ cy.wrap($cell).should('not.be.empty');
+ });
+ });
+ });
+ });
+ });
+
+ // Confirm Completed table is not empty and contains exact number of completed maintenances
+ cy.findByLabelText('List of completed maintenance')
+ .should('be.visible')
+ .find('tbody')
+ .within(() => {
+ accountcompletedMaintenance.forEach(() => {
+ cy.get('tr')
+ .should('have.length', accountcompletedMaintenance.length)
+ .each((row, index) => {
+ const completedMaintenance = accountcompletedMaintenance[index];
+ cy.wrap(row).within(() => {
+ cy.contains(completedMaintenance.entity.label).should(
+ 'be.visible'
+ );
+ // Confirm that the first 90 characters of each reason string are rendered on screen
+ const truncatedReason = completedMaintenance.reason.substring(
+ 0,
+ 90
+ );
+ cy.findByText(truncatedReason, { exact: false }).should(
+ 'be.visible'
+ );
+ // Check the content of each | element
+ cy.get('td').each(($cell, idx, $cells) => {
+ cy.wrap($cell).should('not.be.empty');
+ });
+ });
+ });
+ });
+ });
+
+ // Confirm download buttons work
+ cy.get('button')
+ .filter(':contains("Download CSV")')
+ .should('be.visible')
+ .should('be.enabled')
+ .click({ multiple: true });
+ // TODO Need to add assertions to confirm CSV contains the expected contents on first trial (M3-8393)
+ });
+});
diff --git a/packages/manager/cypress/support/intercepts/account.ts b/packages/manager/cypress/support/intercepts/account.ts
index 4d51f05b620..d4bcb1afae4 100644
--- a/packages/manager/cypress/support/intercepts/account.ts
+++ b/packages/manager/cypress/support/intercepts/account.ts
@@ -11,6 +11,7 @@ import { makeResponse } from 'support/util/response';
import type {
Account,
AccountLogin,
+ AccountMaintenance,
AccountSettings,
Agreements,
CancelAccount,
@@ -646,3 +647,25 @@ export const mockGetAccountLogins = (
export const interceptGetNetworkUtilization = (): Cypress.Chainable => {
return cy.intercept('GET', apiMatcher('account/transfer'));
};
+
+/**
+ * Intercepts GET request to fetch the account maintenance and mocks the response.
+ *
+ * @param accountMaintenance - Account Maintenance objects with which to mock response.
+ *
+ * @returns Cypress chainable.
+ */
+export const mockGetMaintenance = (
+ accountPendingMaintenance: AccountMaintenance[],
+ accountCompletedMaintenance: AccountMaintenance[]
+): Cypress.Chainable => {
+ return cy.intercept('GET', apiMatcher(`account/maintenance*`), (req) => {
+ const filters = getFilters(req);
+
+ if (filters?.['status'] === 'completed') {
+ req.reply(paginateResponse(accountCompletedMaintenance));
+ } else {
+ req.reply(paginateResponse(accountPendingMaintenance));
+ }
+ });
+};
diff --git a/packages/manager/src/features/Account/Maintenance/MaintenanceTable.tsx b/packages/manager/src/features/Account/Maintenance/MaintenanceTable.tsx
index 4b15b35e410..91b33ffee0b 100644
--- a/packages/manager/src/features/Account/Maintenance/MaintenanceTable.tsx
+++ b/packages/manager/src/features/Account/Maintenance/MaintenanceTable.tsx
@@ -159,7 +159,7 @@ const MaintenanceTable = ({ type }: Props) => {
/>
- |