fix: (CXSPA-9055) - Region associated headers (#19883)

SAP · Jan 21, 2025 · dd575f6 · dd575f6
1 parent 1c29fdc
commit dd575f6
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 11 deletions.
diff --git a/...ation/account-summary/components/details/document/account-summary-document.component.html b/...ation/account-summary/components/details/document/account-summary-document.component.html
@@ -1,8 +1,8 @@
 <ng-container *ngIf="accountSummary$ | async as accountSummary">
-  <div>
+  <div role="region" aria-labelledby="regionTitle">
     <!-- HEADER -->
     <div class="cx-account-summary-document-header">
-      <h2>
+      <h2 id="regionTitle">
         {{ 'orgAccountSummary.document.header' | cxTranslate }}
       </h2>
     </div>

diff --git a/feature-libs/organization/administration/components/shared/card/card.component.html b/feature-libs/organization/administration/components/shared/card/card.component.html
@@ -2,12 +2,21 @@
   [viewTitle]="i18nRoot + '.title' | cxTranslate: { item: item$ | async }"
   class="card"
   role="tabpanel"
+  [attr.aria-labelledby]="i18nRoot + '_title'"
 >
   <div class="header">
     <div class="title-bar">
       <div class="title">
         <h3>
-          {{ i18nRoot + '.title' | cxTranslate: { item: item$ | async } }}
+          <span
+            *cxFeature="'a11yRegionAssociatedHeaders'"
+            id="{{ i18nRoot + '_title' }}"
+          >
+            {{ i18nRoot + '.title' | cxTranslate: { item: item$ | async } }}
+          </span>
+          <ng-container *cxFeature="'!a11yRegionAssociatedHeaders'">
+            {{ i18nRoot + '.title' | cxTranslate: { item: item$ | async } }}
+          </ng-container>
           <button
             *ngIf="showHint"
             [cxPopover]="detailHint"

diff --git a/feature-libs/organization/administration/components/shared/card/card.component.spec.ts b/feature-libs/organization/administration/components/shared/card/card.component.spec.ts
@@ -6,6 +6,7 @@ import { GlobalMessageService, I18nTestingModule } from '@spartacus/core';
 import { PopoverModule, SplitViewService } from '@spartacus/storefront';
 import { IconTestingModule } from 'projects/storefrontlib/cms-components/misc/icon/testing/icon-testing.module';
 import { ViewComponent } from 'projects/storefrontlib/shared/components/split-view/view/view.component';
+import { MockFeatureDirective } from 'projects/storefrontlib/shared/test/mock-feature-directive';
 import { of } from 'rxjs';
 import { ItemService } from '../item.service';
 import { MessageTestingModule } from '../message/message.testing.module';
@@ -39,7 +40,7 @@ describe('CardComponent', () => {
         MessageTestingModule,
         PopoverModule,
       ],
-      declarations: [CardComponent, ViewComponent],
+      declarations: [CardComponent, ViewComponent, MockFeatureDirective],
       providers: [
         {
           provide: ItemService,

diff --git a/feature-libs/organization/administration/components/shared/card/card.module.ts b/feature-libs/organization/administration/components/shared/card/card.module.ts
@@ -7,11 +7,14 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { I18nModule, UrlModule } from '@spartacus/core';
-import { IconModule, SplitViewModule } from '@spartacus/storefront';
+import { FeaturesConfigModule, I18nModule, UrlModule } from '@spartacus/core';
+import {
+  IconModule,
+  PopoverModule,
+  SplitViewModule,
+} from '@spartacus/storefront';
 import { MessageModule } from '../message/message.module';
 import { CardComponent } from './card.component';
-import { PopoverModule } from '@spartacus/storefront';
 /**
  * Provides a reusable card UI component for the organization split views.
  *
@@ -28,6 +31,7 @@ import { PopoverModule } from '@spartacus/storefront';
     UrlModule,
     MessageModule,
     PopoverModule,
+    FeaturesConfigModule,
   ],
   declarations: [CardComponent],
   exports: [CardComponent],

diff --git a/feature-libs/organization/administration/components/shared/list/list.component.html b/feature-libs/organization/administration/components/shared/list/list.component.html
@@ -1,13 +1,30 @@
 <cx-split-view [hideMode]="false">
   <ng-container *ngIf="structure$ | async as structure">
-    <cx-view class="list" *ngIf="listData$ | async as data">
+    <cx-view
+      class="list"
+      *ngIf="listData$ | async as data"
+      role="region"
+      [attr.aria-labelledby]="viewType + '_title'"
+    >
       <div class="header">
         <div aria-live="polite" class="title">
           <!-- TODO: (CXSPA-6624) - Remove feature flag next major release -->
           <h2 *cxFeature="'a11yOrganizationListHeadingOrder'">
-            {{
-              viewType + '.header' | cxTranslate: { count: getListCount(data) }
-            }}
+            <span
+              *cxFeature="'a11yRegionAssociatedHeaders'"
+              id="{{ viewType + '_title' }}"
+            >
+              {{
+                viewType + '.header'
+                  | cxTranslate: { count: getListCount(data) }
+              }}
+            </span>
+            <ng-container *cxFeature="'!a11yRegionAssociatedHeaders'">
+              {{
+                viewType + '.header'
+                  | cxTranslate: { count: getListCount(data) }
+              }}
+            </ng-container>
             <button
               [cxPopover]="listHint"
               [cxPopoverOptions]="{

diff --git a/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts b/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts
@@ -918,6 +918,12 @@ export interface FeatureTogglesInterface {
    */
   a11yHamburgerMenuTrapFocus?: boolean;
 
+  /**
+   * Associates content regions with their headers improving readout while navigating between sections.
+   * Affects: CardComponent, AccountSummaryDocumentComponent, ListComponent
+   */
+  a11yRegionAssociatedHeaders?: boolean;
+
   /**
    * When enabled, allows to provide extended formats and media queries for <picture> element if used in MediaComponent.
    *
@@ -1113,6 +1119,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yHideConsentButtonWhenBannerVisible: false,
   a11yRepeatingButtonsUniqueLabels: false,
   a11yHighContrastBorders: false,
+  a11yRegionAssociatedHeaders: false,
   occCartNameAndDescriptionInHttpRequestBody: false,
   cmsBottomHeaderSlotUsingFlexStyles: false,
   useSiteThemeService: false,

diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
@@ -429,6 +429,7 @@ if (environment.cpq) {
         a11yHideConsentButtonWhenBannerVisible: true,
         a11yRepeatingButtonsUniqueLabels: true,
         a11yHighContrastBorders: true,
+        a11yRegionAssociatedHeaders: true,
         cmsBottomHeaderSlotUsingFlexStyles: true,
         useSiteThemeService: true,
         enableConsecutiveCharactersPasswordRequirement: true,