fix: add Continuum E2Es for B2B My Company (#20341)

Author: uroslates

feature-libs/organization/account-summary/components/details/document/account-summary-document.component.html

@@ -13,6 +13,11 @@ <h2 id="regionTitle">
         [documentTypeOptions]="documentTypeOptions"
         [initialFilters]="_queryParams"
         (filterListEvent)="filterChange($event)"
+        [cxNgSelectA11yAriaControls]="
+          (accountSummary.orgDocuments ?? []).length > 0
+            ? 'cx-account-summary-document-table'
+            : undefined
+        "
       >
       </cx-account-summary-document-filter>
 

feature-libs/organization/account-summary/components/details/document/filter/account-summary-document-filter.component.html

@@ -108,7 +108,7 @@
         bindValue="code"
         [cxNgSelectA11y]="{
           ariaLabel: 'orgAccountSummary.filter.status' | cxTranslate,
-          ariaControls: 'cx-account-summary-document-table',
+          ariaControls: cxNgSelectA11yAriaControls,
         }"
       >
       </ng-select>
@@ -139,7 +139,7 @@
         bindValue="code"
         [cxNgSelectA11y]="{
           ariaLabel: 'orgAccountSummary.filter.filterBy' | cxTranslate,
-          ariaControls: 'cx-account-summary-document-table',
+          ariaControls: cxNgSelectA11yAriaControls,
         }"
       >
       </ng-select>

feature-libs/organization/account-summary/components/details/document/filter/account-summary-document-filter.component.ts

@@ -52,6 +52,9 @@ interface GroupValidator {
 export class AccountSummaryDocumentFilterComponent
   implements OnInit, OnDestroy
 {
+  @Input()
+  cxNgSelectA11yAriaControls?: string;
+
   @Input()
   documentTypeOptions: Array<AccountSummaryDocumentType>;
 

feature-libs/organization/administration/components/shared/card/card.component.html

@@ -60,7 +60,7 @@ <h4>
   </div>
 
   <div class="main">
-    <cx-org-message aria-aromic="true" aria-live="assertive"></cx-org-message>
+    <cx-org-message aria-live="assertive"></cx-org-message>
     <ng-content select="[info]"></ng-content>
     <ng-content select="[main]"></ng-content>
   </div>

feature-libs/organization/administration/components/unit/details/unit-details.component.html

@@ -64,6 +64,9 @@
       <label>{{ 'orgUnit.parentUnit' | cxTranslate }}</label>
       <a
         class="value"
+        [ariaLabel]="
+          model.parentOrgUnit?.name ?? ('orgUnit.parentUnit' | cxTranslate)
+        "
         [routerLink]="
           {
             cxRoute: 'orgUnitDetails',

feature-libs/organization/administration/components/user/change-password-form/user-change-password-form.component.html

@@ -1,5 +1,4 @@
 <form *ngIf="form$ | async as form" [formGroup]="form" (submit)="save(form)">
-  <cx-form-required-legend />
   <cx-org-card
     [previous]="false"
     i18nRoot="orgUser.password"
@@ -18,6 +17,8 @@
     </button>
 
     <section main class="details">
+      <cx-form-required-legend />
+
       <label class="full-width">
         <span class="label-content"
           >{{ 'orgUser.password.newPassword' | cxTranslate }}

feature-libs/organization/administration/components/user/details-cell/user-details-cell.component.html

@@ -67,6 +67,7 @@
 
   <button
     class="button btn btn-sm text"
+    ariaLabel="{model?.name ?? ('orgUser.name' | cxTranslate)}"
     [cxPopover]="details"
     [cxPopoverOptions]="{
       placement: 'auto',

projects/storefrontapp-e2e-cypress/cypress/e2e/a11y/b2b/b2b.my-company-account-summaries.a11y-e2e.cy.ts

@@ -0,0 +1,46 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { loginAsMyCompanyAdmin } from '../../../helpers/b2b/my-company/my-company.utils';
+
+const MY_COMPANY_URL = '/organization/account-summary';
+export const SKELETON_SELECTOR =
+  'main cx-view cx-table table cx-org-toggle-link-cell:not(:has(a))';
+
+/**
+ * This test checks accessibility concerns on the B2B My Company Account Summaries page using Access Continuum
+ */
+describe(
+  'B2B / My Company / Account Summaries / Page Accessibility',
+  { testIsolation: false },
+  () => {
+    before(() => {
+      cy.a11yContinuumSetup();
+      loginAsMyCompanyAdmin();
+      cy.visit(MY_COMPANY_URL);
+    });
+
+    it('page loading (skeleton)', () => {
+      cy.get(SKELETON_SELECTOR);
+      cy.get('main').a11yRunContinuumTest();
+    });
+
+    it('page loaded', () => {
+      cy.get('#Rustic');
+      cy.get('main').a11yRunContinuumTest();
+    });
+
+    it('account summaries details / initial panel', () => {
+      const EXPAND_BTN_SELECTOR = '.actions > button:nth-child(2)';
+      cy.get(EXPAND_BTN_SELECTOR).click();
+      cy.get('[id="Custom Retail"]').click();
+      cy.get(
+        '.cx-account-summary-document-row:nth-child(2) .cx-account-summary-document-label'
+      );
+      cy.get('main').a11yRunContinuumTest();
+    });
+  }
+);

projects/storefrontapp-e2e-cypress/cypress/e2e/a11y/b2b/b2b.my-company-budgets.a11y-e2e.cy.ts

@@ -0,0 +1,55 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { loginAsMyCompanyAdmin } from '../../../helpers/b2b/my-company/my-company.utils';
+
+const MY_COMPANY_URL = '/organization/budgets';
+const rowCellSelector =
+  'cx-org-list.orgBudget table tr:last-child cx-org-status-cell span';
+const detailsActionsListSelector = 'cx-org-list.orgBudget .main .link-list';
+
+/**
+ * This test checks accessibility concerns on the B2B My Company Budgets page using Access Continuum
+ */
+describe(
+  'B2B / My Company / Budgets / Page Accessibility',
+  { testIsolation: false },
+  () => {
+    before(() => {
+      cy.a11yContinuumSetup();
+      loginAsMyCompanyAdmin();
+      cy.visit(MY_COMPANY_URL);
+    });
+
+    it('list page loaded', () => {
+      cy.get(rowCellSelector);
+      cy.get('main').a11yRunContinuumTest();
+    });
+
+    it('budgets / initial panel', () => {
+      cy.get(rowCellSelector).click();
+      cy.get(
+        'cx-org-budget-details cx-org-card cx-view .main .details .property .value'
+      );
+      cy.get('cx-org-budget-details').a11yRunContinuumTest();
+    });
+
+    it('budgets / edit panel', () => {
+      const editdLink = 'cx-org-budget-details .header .actions a.edit';
+      cy.get(editdLink).click();
+      cy.get('cx-org-budget-details cx-org-budget-form form input');
+      cy.get('cx-org-budget-details').a11yRunContinuumTest();
+    });
+
+    it('budgets / const centers panel', () => {
+      cy.get(`${detailsActionsListSelector} a:nth-child(1)`).click();
+      cy.get(
+        'cx-org-budget-cost-center-list table cx-org-cost-center-details-cell button'
+      ).click();
+      cy.get('cx-org-budget-details').a11yRunContinuumTest();
+    });
+  }
+);

projects/storefrontapp-e2e-cypress/cypress/e2e/a11y/b2b/b2b.my-company-cost-centers.a11y-e2e.cy.ts

@@ -0,0 +1,69 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { loginAsMyCompanyAdmin } from '../../../helpers/b2b/my-company/my-company.utils';
+
+const MY_COMPANY_URL = '/organization/cost-centers';
+const rowCellSelector =
+  'main cx-view cx-table table tr:nth-child(2) .unit cx-org-unit-cell [title="Custom Retail"]';
+const detailsActionsListSelector =
+  'cx-org-cost-center-details .main .link-list';
+
+/**
+ * This test checks accessibility concerns on the B2B My Company Cost Centers page using Access Continuum
+ */
+describe(
+  'B2B / My Company / Cost Centers / Page Accessibility',
+  { testIsolation: false },
+  () => {
+    before(() => {
+      cy.a11yContinuumSetup();
+      loginAsMyCompanyAdmin();
+      cy.visit(MY_COMPANY_URL);
+    });
+
+    it('list page loaded', () => {
+      cy.get(rowCellSelector);
+      cy.get('main').a11yRunContinuumTest();
+    });
+
+    it('cost centers / initial panel', () => {
+      cy.get(rowCellSelector).click();
+      cy.get(
+        'cx-org-cost-center-details cx-org-card cx-view .main .details .property .value'
+      );
+      cy.get('cx-org-cost-center-details').a11yRunContinuumTest();
+    });
+
+    it('cost centers / edit panel', () => {
+      const editdLink = 'cx-org-cost-center-details .header .actions a.edit';
+      cy.get(editdLink).click();
+      cy.get('cx-org-cost-center-details cx-org-cost-center-form form input');
+      cy.get('cx-org-cost-center-details').a11yRunContinuumTest();
+    });
+
+    it('cost centers / budgets panel', () => {
+      cy.get(`${detailsActionsListSelector} a:nth-child(1)`).click();
+      cy.get(
+        'cx-org-cost-center-assigned-budget-list table cx-org-assign-cell button'
+      );
+      cy.get(
+        'cx-org-cost-center-assigned-budget-list table cx-org-budget-details-cell button'
+      ).click();
+      cy.get('cx-org-cost-center-details').a11yRunContinuumTest();
+    });
+
+    it('cost centers / budgets / manage budgets panel', () => {
+      const manageLink =
+        'cx-org-cost-center-assigned-budget-list .header .actions a.btn';
+      cy.get(manageLink).click();
+      const assignButtonCell =
+        'cx-org-cost-center-budget-list .main table tr:nth-child(2) cx-org-assign-cell button';
+      cy.get(assignButtonCell);
+      cy.get('cx-org-cost-center-budget-list').a11yRunContinuumTest();
+    });
+  }
+);