SAP · Pio-Bar · Mar 29, 2024 · Feb 20, 2024 · Feb 26, 2024 · Feb 26, 2024
@@ -31,6 +31,7 @@
     all: unset;
   }
 
+  // TODO: (CXSPA-6362) - Remove feature flag + redundant styles
   cx-banner {
     flex: 100%;
 
@@ -89,4 +90,52 @@
       }
     }
   }
+
+  @include forFeature('a11yOrganizationsBanner') {
+    cx-banner {
+      margin-top: 20px;
+      display: grid;
+      grid-template-columns: 60px 1fr;
+      grid-template-rows: min-content 1fr;
+      gap: 3% 30px;
+      grid-template-areas: 'media heading' 'media content';
+      padding: 25px 25px 25px 30px;
+      border: solid 1px var(--cx-color-light);
+
+      a {
+        display: unset;
+        border: unset;
+        padding: unset;
+        &:hover {
+          border-color: unset;
+          background: unset;
+        }
+      }
+
+      &:hover {
+        text-decoration: none;
+        border-color: var(--cx-color-background);
+        background: var(--cx-color-background);
+      }
+
+      cx-media {
+        grid-area: media;
+
+        img {
+          filter: var(--cx-img-filter);
+          width: 50px;
+          height: 50px;
+        }
+      }
+
+      .content {
+        grid-area: content;
+      }
+
+      .headline {
+        grid-area: heading;
+        font-weight: bold;
+      }
+    }
+  }
 }
diff --git a/projects/storefrontapp-e2e-cypress/cypress/helpers/b2b/my-company/features/list.ts b/projects/storefrontapp-e2e-cypress/cypress/helpers/b2b/my-company/features/list.ts
@@ -18,7 +18,9 @@ export function listTest(config: MyCompanyConfig): void {
       cy.visit(`/organization`);
       testList(config, {
         trigger: () =>
-          cy.get(`cx-page-slot.BodyContent a`).contains(config.name).click(),
+          cy
+            .get(`cx-page-slot.BodyContent a[aria-label*="${config.name}"]`)
+            .click(),
       });
     });
 

diff --git a/projects/storefrontapp-e2e-cypress/cypress/helpers/b2b/my-company/features/nested-list.ts b/projects/storefrontapp-e2e-cypress/cypress/helpers/b2b/my-company/features/nested-list.ts
@@ -19,7 +19,9 @@ export function nestedListTest(config: MyCompanyConfig): void {
       cy.visit(`/organization`);
       testList(config, {
         trigger: () =>
-          cy.get(`cx-page-slot.BodyContent a`).contains(config.name).click(),
+          cy
+            .get(`cx-page-slot.BodyContent a[aria-label*="${config.name}"]`)
+            .click(),
         nested: { expandAll: true },
       });
     });
@@ -28,7 +30,9 @@ export function nestedListTest(config: MyCompanyConfig): void {
       cy.visit(`/organization`);
       testList(config, {
         trigger: () =>
-          cy.get(`cx-page-slot.BodyContent a`).contains(config.name).click(),
+          cy
+            .get(`cx-page-slot.BodyContent a[aria-label*="${config.name}"]`)
+            .click(),
         nested: { collapseAll: true },
       });
     });

diff --git a/projects/storefrontapp-e2e-cypress/cypress/helpers/checkout-flow.ts b/projects/storefrontapp-e2e-cypress/cypress/helpers/checkout-flow.ts
@@ -342,7 +342,7 @@ export function clickCheapProductDetailsFromHomePage(
   sampleProduct: SampleProduct = cheapProduct
 ) {
   const productPage = waitForProductPage(sampleProduct.code, 'getProductPage');
-  cy.get('.Section4 cx-banner').first().find('img').click({ force: true });
+  cy.get('.Section4 cx-banner').first().find('a').click({ force: true });
   cy.wait(`@${productPage}`).its('response.statusCode').should('eq', 200);
   cy.get('cx-product-intro').within(() => {
     cy.get('.code').should('contain', sampleProduct.code);

@@ -104,6 +104,7 @@ if (!environment.production) {
         a11ySortingOptionsTruncation: true,
         a11yExpandedFocusIndicator: true,
         a11yCheckoutDeliveryFocus: true,
+        a11yOrganizationsBanner: true,
         a11yOrganizationListHeadingOrder: true,
         a11yReplenishmentOrderFieldset: true,
         a11yListOversizedFocus: true,

@@ -1,13 +1,29 @@
 <ng-container *ngIf="data$ | async as data">
-  <cx-generic-link
-    *ngIf="routerLink"
-    [url]="routerLink"
-    [target]="getTarget(data)"
-  >
-    <p class="headline" *ngIf="data.headline" [innerHTML]="data.headline"></p>
-    <cx-media [container]="getImage(data)"></cx-media>
-    <p class="content" *ngIf="data.content" [innerHTML]="data.content"></p>
-  </cx-generic-link>
+  <!-- TODO: (CXSPA-6362) - Remove feature flag next major release -->
+  <ng-container *cxFeature="'a11yOrganizationsBanner'">
+    <ng-container *ngIf="routerLink">
+      <cx-generic-link
+        [url]="routerLink"
+        [target]="getTarget(data)"
+        [ariaLabel]="data.headline"
+      >
+      </cx-generic-link>
+      <p class="headline" *ngIf="data.headline" [innerHTML]="data.headline"></p>
+      <cx-media [container]="getImage(data)"></cx-media>
+      <p class="content" *ngIf="data.content" [innerHTML]="data.content"></p>
+    </ng-container>
+  </ng-container>
+  <ng-container *cxFeature="'!a11yOrganizationsBanner'">
+    <cx-generic-link
+      *ngIf="routerLink"
+      [url]="routerLink"
+      [target]="getTarget(data)"
+    >
+      <p class="headline" *ngIf="data.headline" [innerHTML]="data.headline"></p>
+      <cx-media [container]="getImage(data)"></cx-media>
+      <p class="content" *ngIf="data.content" [innerHTML]="data.content"></p>
+    </cx-generic-link>
+  </ng-container>
   <ng-container *ngIf="!routerLink">
     <div class="no-link">
       <p class="headline" *ngIf="data.headline" [innerHTML]="data.headline"></p>

@@ -6,6 +6,7 @@ import {
   CmsBannerComponent,
   CmsService,
   FeaturesConfig,
+  FeaturesConfigModule,
   Page,
   PageContext,
   SemanticPathService,
@@ -82,7 +83,7 @@ describe('BannerComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [RouterTestingModule],
+      imports: [RouterTestingModule, FeaturesConfigModule],
       declarations: [BannerComponent, MockMediaComponent, GenericLinkComponent],
       providers: [
         {

@@ -7,13 +7,23 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { CmsConfig, provideDefaultConfig } from '@spartacus/core';
+import {
+  CmsConfig,
+  FeaturesConfigModule,
+  provideDefaultConfig,
+} from '@spartacus/core';
 import { GenericLinkModule } from '../../../shared/components/generic-link/generic-link.module';
 import { MediaModule } from '../../../shared/components/media/media.module';
 import { BannerComponent } from './banner.component';
 
 @NgModule({
-  imports: [CommonModule, RouterModule, GenericLinkModule, MediaModule],
+  imports: [
+    CommonModule,
+    RouterModule,
+    GenericLinkModule,
+    MediaModule,
+    FeaturesConfigModule,
+  ],
   providers: [
     provideDefaultConfig(<CmsConfig>{
       cmsComponents: {

@@ -5,6 +5,7 @@
  */
 
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { useFeatureStyles } from '@spartacus/core';
 import { BehaviorSubject, Observable, of } from 'rxjs';
 import { distinctUntilChanged, switchMap } from 'rxjs/operators';
 import { PageLayoutService } from './page-layout.service';
@@ -39,5 +40,7 @@ export class PageLayoutComponent {
       distinctUntilChanged()
     );
 
-  constructor(protected pageLayoutService: PageLayoutService) {}
+  constructor(protected pageLayoutService: PageLayoutService) {
+    useFeatureStyles('a11yOrganizationsBanner');
+  }
 }
@@ -9,6 +9,7 @@
     [attr.class]="class"
     [attr.style]="style"
     [attr.title]="title"
+    [attr.aria-label]="ariaLabel ? ariaLabel : null"
     [tabindex]="tabindex"
   >
     <ng-container *ngTemplateOutlet="content"></ng-container>
@@ -25,6 +26,7 @@
     [attr.class]="class"
     [attr.style]="style"
     [attr.title]="title"
+    [attr.aria-label]="ariaLabel ? ariaLabel : null"
     [tabindex]="tabindex"
   >
     <ng-container *ngTemplateOutlet="content"></ng-container>

@@ -53,6 +53,7 @@ export class GenericLinkComponent implements OnChanges {
   @Input() class: string;
   @Input() style: string | undefined;
   @Input() title: string;
+  @Input() ariaLabel?: string;
   @Input() tabindex: 0 | -1 = 0;
 
   isExternalUrl(): boolean {

@@ -1,4 +1,5 @@
 %cx-banner {
+  // TODO: (CXSPA-6362) - Remove feature flag + redundant styles
   a {
     display: block;
     &:focus {
@@ -11,6 +12,18 @@
     display: block;
   }
 
+  @include forFeature('a11yOrganizationsBanner') {
+    position: relative;
+    a {
+      z-index: 1;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      position: absolute;
+    }
+  }
+
   .no-link {
     display: block;
   }