fix: (CXSPA-1088) - Removed all loaded status role attributes (#19107)

feature-libs/cart/base/components/clear-cart/clear-cart-dialog/clear-cart-dialog.component.html

@@ -8,6 +8,7 @@
   <div class="cx-clear-cart-container">
     <ng-container *ngIf="!isClearing; else loading">
       <div
+        *cxFeature="'!a11yRemoveStatusLoadedRole'"
         role="status"
         [attr.aria-label]="'common.loaded' | cxTranslate"
       ></div>

feature-libs/cart/saved-cart/components/details/saved-cart-details-items/saved-cart-details-items.component.html

@@ -1,6 +1,10 @@
 <ng-container *ngIf="savedCart$ | async as cart">
   <ng-container *ngIf="cart?.entries?.length > 0; else emptyCartItems">
-    <div role="status" [attr.aria-label]="'common.loaded' | cxTranslate"></div>
+    <div
+      *cxFeature="'!a11yRemoveStatusLoadedRole'"
+      role="status"
+      [attr.aria-label]="'common.loaded' | cxTranslate"
+    ></div>
     <div class="cart-details-wrapper">
       <ng-template
         [cxOutlet]="CartOutlets.CART_ITEM_LIST"

feature-libs/cart/saved-cart/components/details/saved-cart-details-items/saved-cart-details-items.component.spec.ts

@@ -12,6 +12,7 @@ import {
   Translatable,
 } from '@spartacus/core';
 import { OutletModule } from '@spartacus/storefront';
+import { MockFeatureDirective } from 'projects/storefrontlib/shared/test/mock-feature-directive';
 import { BehaviorSubject, EMPTY, Observable, of } from 'rxjs';
 import { SavedCartDetailsService } from '../saved-cart-details.service';
 import { SavedCartDetailsItemsComponent } from './saved-cart-details-items.component';
@@ -82,7 +83,7 @@ describe('SavedCartDetailsItemsComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [StoreModule.forRoot({}), I18nTestingModule, OutletModule],
-      declarations: [SavedCartDetailsItemsComponent],
+      declarations: [SavedCartDetailsItemsComponent, MockFeatureDirective],
       providers: [
         {
           provide: SavedCartFacade,

feature-libs/cart/saved-cart/components/details/saved-cart-details.module.ts

@@ -12,6 +12,7 @@ import {
   AuthGuard,
   CmsConfig,
   ConfigModule,
+  FeaturesConfigModule,
   I18nModule,
   UrlModule,
 } from '@spartacus/core';
@@ -54,6 +55,7 @@ import { SavedCartDetailsOverviewComponent } from './saved-cart-details-overview
         },
       },
     }),
+    FeaturesConfigModule,
   ],
   declarations: [
     SavedCartDetailsOverviewComponent,

feature-libs/cart/saved-cart/components/list/saved-cart-list.component.html

@@ -1,6 +1,10 @@
 <ng-container *ngIf="savedCarts$ | async as savedCarts">
   <ng-container *ngIf="!(isLoading$ | async); else loading">
-    <div role="status" [attr.aria-label]="'common.loaded' | cxTranslate"></div>
+    <div
+      *cxFeature="'!a11yRemoveStatusLoadedRole'"
+      role="status"
+      [attr.aria-label]="'common.loaded' | cxTranslate"
+    ></div>
     <div class="cx-saved-cart-list-header">
       <h2>
         {{

feature-libs/cart/saved-cart/components/list/saved-cart-list.component.spec.ts

@@ -23,6 +23,7 @@ import {
   LaunchDialogService,
   SiteContextComponentService,
 } from '@spartacus/storefront';
+import { MockFeatureDirective } from 'projects/storefrontlib/shared/test/mock-feature-directive';
 import { EMPTY, Observable, Subscription, interval, map, of, take } from 'rxjs';
 import { SavedCartListComponent } from './saved-cart-list.component';
 
@@ -109,7 +110,7 @@ describe('SavedCartListComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [I18nTestingModule, RouterTestingModule],
-      declarations: [SavedCartListComponent, MockUrlPipe],
+      declarations: [SavedCartListComponent, MockUrlPipe, MockFeatureDirective],
       providers: [
         { provide: RoutingService, useClass: MockRoutingService },
         { provide: SavedCartFacade, useClass: MockSavedCartFacade },

feature-libs/cart/saved-cart/components/list/saved-cart-list.module.ts

@@ -10,6 +10,7 @@ import { RouterModule } from '@angular/router';
 import {
   AuthGuard,
   CmsConfig,
+  FeaturesConfigModule,
   I18nModule,
   provideDefaultConfig,
   UrlModule,
@@ -25,6 +26,7 @@ import { SavedCartListComponent } from './saved-cart-list.component';
     ListNavigationModule,
     I18nModule,
     SpinnerModule,
+    FeaturesConfigModule,
   ],
   providers: [
     provideDefaultConfig(<CmsConfig>{

feature-libs/checkout/b2b/components/checkout-delivery-address/checkout-delivery-address.component.html

@@ -4,7 +4,11 @@ <h2 class="cx-checkout-title d-none d-lg-block d-xl-block">
 
 <ng-container *ngIf="cards$ | async as cards">
   <ng-container *ngIf="!(isUpdating$ | async); else loading">
-    <div role="status" [attr.aria-label]="'common.loaded' | cxTranslate"></div>
+    <div
+      *cxFeature="'!a11yRemoveStatusLoadedRole'"
+      role="status"
+      [attr.aria-label]="'common.loaded' | cxTranslate"
+    ></div>
     <ng-container
       *ngIf="
         isAccountPayment || (cards?.length && !addressFormOpened);

feature-libs/checkout/b2b/components/checkout-delivery-address/checkout-delivery-address.component.spec.ts

@@ -20,6 +20,7 @@ import {
   UserCostCenterService,
 } from '@spartacus/core';
 import { Card } from '@spartacus/storefront';
+import { MockFeatureDirective } from 'projects/storefrontlib/shared/test/mock-feature-directive';
 import { BehaviorSubject, EMPTY, of } from 'rxjs';
 import { B2BCheckoutDeliveryAddressComponent } from './checkout-delivery-address.component';
 import createSpy = jasmine.createSpy;
@@ -166,6 +167,7 @@ describe('B2BCheckoutDeliveryAddressComponent', () => {
         MockAddressFormComponent,
         MockCardComponent,
         MockSpinnerComponent,
+        MockFeatureDirective,
       ],
       providers: [
         { provide: UserAddressService, useClass: MockUserAddressService },

feature-libs/checkout/b2b/components/checkout-delivery-address/checkout-delivery-address.module.ts

@@ -12,10 +12,15 @@ import {
   CartNotEmptyGuard,
   CheckoutAuthGuard,
 } from '@spartacus/checkout/base/components';
-import { CmsConfig, I18nModule, provideDefaultConfig } from '@spartacus/core';
+import {
+  CmsConfig,
+  FeaturesConfigModule,
+  I18nModule,
+  provideDefaultConfig,
+} from '@spartacus/core';
 import { CardModule, SpinnerModule } from '@spartacus/storefront';
-import { B2BCheckoutDeliveryAddressComponent } from './checkout-delivery-address.component';
 import { AddressFormModule } from '@spartacus/user/profile/components';
+import { B2BCheckoutDeliveryAddressComponent } from './checkout-delivery-address.component';
 
 @NgModule({
   imports: [
@@ -25,6 +30,7 @@ import { AddressFormModule } from '@spartacus/user/profile/components';
     CardModule,
     SpinnerModule,
     I18nModule,
+    FeaturesConfigModule,
   ],
   providers: [
     provideDefaultConfig(<CmsConfig>{

feature-libs/checkout/b2b/components/checkout-payment-type/checkout-payment-type.component.html

@@ -11,7 +11,11 @@ <h2 class="cx-checkout-title d-none d-lg-block d-xl-block">
       else loading
     "
   >
-    <div role="status" [attr.aria-label]="'common.loaded' | cxTranslate"></div>
+    <div
+      *cxFeature="'!a11yRemoveStatusLoadedRole'"
+      role="status"
+      [attr.aria-label]="'common.loaded' | cxTranslate"
+    ></div>
     <div class="row">
       <div class="col-md-12 col-lg-6">
         <label>

feature-libs/checkout/b2b/components/checkout-payment-type/checkout-payment-type.component.spec.ts

@@ -11,6 +11,7 @@ import {
   I18nTestingModule,
   QueryState,
 } from '@spartacus/core';
+import { MockFeatureDirective } from 'projects/storefrontlib/shared/test/mock-feature-directive';
 import { BehaviorSubject, of } from 'rxjs';
 import { take } from 'rxjs/operators';
 import { CheckoutPaymentTypeComponent } from './checkout-payment-type.component';
@@ -87,7 +88,11 @@ describe('CheckoutOnePaymentTypeComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [I18nTestingModule],
-      declarations: [CheckoutPaymentTypeComponent, MockSpinnerComponent],
+      declarations: [
+        CheckoutPaymentTypeComponent,
+        MockSpinnerComponent,
+        MockFeatureDirective,
+      ],
       providers: [
         {
           provide: CheckoutPaymentTypeFacade,

feature-libs/checkout/b2b/components/checkout-payment-type/checkout-payment-type.module.ts

@@ -11,7 +11,12 @@ import {
   CartNotEmptyGuard,
   CheckoutAuthGuard,
 } from '@spartacus/checkout/base/components';
-import { CmsConfig, ConfigModule, I18nModule } from '@spartacus/core';
+import {
+  CmsConfig,
+  ConfigModule,
+  FeaturesConfigModule,
+  I18nModule,
+} from '@spartacus/core';
 import { SpinnerModule } from '@spartacus/storefront';
 import { CheckoutPaymentTypeComponent } from './checkout-payment-type.component';
 
@@ -28,6 +33,7 @@ import { CheckoutPaymentTypeComponent } from './checkout-payment-type.component'
         },
       },
     }),
+    FeaturesConfigModule,
   ],
   declarations: [CheckoutPaymentTypeComponent],
   exports: [CheckoutPaymentTypeComponent],

feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.html

@@ -4,7 +4,11 @@ <h2 class="cx-checkout-title d-none d-lg-block d-xl-block">
 
 <ng-container *ngIf="cards$ | async as cards">
   <ng-container *ngIf="!(isUpdating$ | async); else loading">
-    <div role="status" [attr.aria-label]="'common.loaded' | cxTranslate"></div>
+    <div
+      *cxFeature="'!a11yRemoveStatusLoadedRole'"
+      role="status"
+      [attr.aria-label]="'common.loaded' | cxTranslate"
+    ></div>
     <ng-container
       *ngIf="
         cards?.length && !addressFormOpened;

feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.module.ts

@@ -8,7 +8,12 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { CartValidationGuard } from '@spartacus/cart/base/core';
-import { CmsConfig, I18nModule, provideDefaultConfig } from '@spartacus/core';
+import {
+  CmsConfig,
+  FeaturesConfigModule,
+  I18nModule,
+  provideDefaultConfig,
+} from '@spartacus/core';
 import { CardModule, SpinnerModule } from '@spartacus/storefront';
 import { AddressFormModule } from '@spartacus/user/profile/components';
 import { CartNotEmptyGuard } from '../guards/cart-not-empty.guard';
@@ -23,6 +28,7 @@ import { CheckoutDeliveryAddressComponent } from './checkout-delivery-address.co
     CardModule,
     SpinnerModule,
     I18nModule,
+    FeaturesConfigModule,
   ],
   providers: [
     provideDefaultConfig(<CmsConfig>{

feature-libs/checkout/base/components/checkout-delivery-mode/checkout-delivery-mode.component.html

@@ -18,7 +18,11 @@
       else loading
     "
   >
-    <div role="status" [attr.aria-label]="'common.loaded' | cxTranslate"></div>
+    <div
+      *cxFeature="'!a11yRemoveStatusLoadedRole'"
+      role="status"
+      [attr.aria-label]="'common.loaded' | cxTranslate"
+    ></div>
     <div [formGroup]="mode" class="cx-delivery-mode-wrapper">
       <div class="form-check" *ngFor="let mode of supportedDeliveryModes">
         <input
@@ -78,7 +82,11 @@ <h2 class="cx-checkout-title d-none d-lg-block d-xl-block">
       else loading
     "
   >
-    <div role="status" [attr.aria-label]="'common.loaded' | cxTranslate"></div>
+    <div
+      *cxFeature="'!a11yRemoveStatusLoadedRole'"
+      role="status"
+      [attr.aria-label]="'common.loaded' | cxTranslate"
+    ></div>
     <div [formGroup]="mode" class="cx-delivery-mode-wrapper">
       <div role="radiogroup">
         <div class="form-check" *ngFor="let mode of supportedDeliveryModes">

feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-form/checkout-payment-form.component.html

@@ -1,6 +1,10 @@
 <!-- FORM -->
 <ng-container *ngIf="!loading; else spinner">
-  <div role="status" [attr.aria-label]="'common.loaded' | cxTranslate"></div>
+  <div
+    *cxFeature="'!a11yRemoveStatusLoadedRole'"
+    role="status"
+    [attr.aria-label]="'common.loaded' | cxTranslate"
+  ></div>
   <!-- TODO: (CXSPA-5953) Remove feature flags next major -->
   <p *cxFeature="'a11yRequiredAsterisks'" class="form-legend">
     {{ 'formLegend.required' | cxTranslate }}

feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.html

@@ -3,7 +3,11 @@ <h2 class="cx-checkout-title d-none d-lg-block d-xl-block">
 </h2>
 <ng-container *ngIf="cards$ | async as cards">
   <ng-container *ngIf="!(isUpdating$ | async); else loading">
-    <div role="status" [attr.aria-label]="'common.loaded' | cxTranslate"></div>
+    <div
+      *cxFeature="'!a11yRemoveStatusLoadedRole'"
+      role="status"
+      [attr.aria-label]="'common.loaded' | cxTranslate"
+    ></div>
     <ng-container
       *ngIf="
         cards?.length && !newPaymentFormManuallyOpened;

feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.spec.ts

@@ -18,6 +18,7 @@ import {
   UserPaymentService,
 } from '@spartacus/core';
 import { CardComponent, ICON_TYPE } from '@spartacus/storefront';
+import { MockFeatureDirective } from 'projects/storefrontlib/shared/test/mock-feature-directive';
 import { BehaviorSubject, EMPTY, Observable, Subject, of } from 'rxjs';
 import { CheckoutStepService } from '../services/checkout-step.service';
 import { CheckoutPaymentMethodComponent } from './checkout-payment-method.component';
@@ -188,6 +189,7 @@ describe('CheckoutPaymentMethodComponent', () => {
         CardComponent,
         MockSpinnerComponent,
         MockCxIconComponent,
+        MockFeatureDirective,
       ],
       providers: [
         { provide: UserPaymentService, useClass: MockUserPaymentService },

feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.module.ts

@@ -7,7 +7,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { CmsConfig, I18nModule, provideDefaultConfig } from '@spartacus/core';
+import {
+  CmsConfig,
+  FeaturesConfigModule,
+  I18nModule,
+  provideDefaultConfig,
+} from '@spartacus/core';
 import { CardModule, SpinnerModule } from '@spartacus/storefront';
 import { CartNotEmptyGuard } from '../guards/cart-not-empty.guard';
 import { CheckoutAuthGuard } from '../guards/checkout-auth.guard';
@@ -22,6 +27,7 @@ import { CheckoutPaymentMethodComponent } from './checkout-payment-method.compon
     CardModule,
     SpinnerModule,
     I18nModule,
+    FeaturesConfigModule,
   ],
   providers: [
     provideDefaultConfig(<CmsConfig>{

feature-libs/organization/order-approval/components/details/order-approval-detail-form/order-approval-detail-form.component.html

@@ -6,7 +6,11 @@
   </div>
 
   <ng-template #approvalFormTemplate>
-    <div role="status" [attr.aria-label]="'common.loaded' | cxTranslate"></div>
+    <div
+      *cxFeature="'!a11yRemoveStatusLoadedRole'"
+      role="status"
+      [attr.aria-label]="'common.loaded' | cxTranslate"
+    ></div>
     <ng-container *ngIf="orderApproval?.approvalDecisionRequired">
       <div *ngIf="approvalFormVisible" class="cx-approval-form-header row">
         <div class="cx-approval-form-label col-sm-12">

feature-libs/organization/user-registration/components/form/user-registration-form.component.html

@@ -1,5 +1,9 @@
 <section *ngIf="!(isLoading$ | async); else loading">
-  <div role="status" [attr.aria-label]="'common.loaded' | cxTranslate"></div>
+  <div
+    *cxFeature="'!a11yRemoveStatusLoadedRole'"
+    role="status"
+    [attr.aria-label]="'common.loaded' | cxTranslate"
+  ></div>
 
   <form [formGroup]="registerForm" (ngSubmit)="submit()">
     <label>

feature-libs/pickup-in-store/components/container/store-list/store-list.component.html

@@ -4,7 +4,11 @@
     else loading
   "
 >
-  <div role="status" [attr.aria-label]="'common.loaded' | cxTranslate"></div>
+  <div
+    *cxFeature="'!a11yRemoveStatusLoadedRole'"
+    role="status"
+    [attr.aria-label]="'common.loaded' | cxTranslate"
+  ></div>
 
   <div
     class="container"

feature-libs/pickup-in-store/components/container/store-list/store-list.component.spec.ts

@@ -11,6 +11,7 @@ import {
   PickupLocationsSearchFacade,
 } from '@spartacus/pickup-in-store/root';
 import { SpinnerModule } from '@spartacus/storefront';
+import { MockFeatureDirective } from 'projects/storefrontlib/shared/test/mock-feature-directive';
 import { MockIntendedPickupLocationService } from '../../../core/facade/intended-pickup-location.service.spec';
 import { MockPickupLocationsSearchService } from '../../../core/facade/pickup-locations-search.service.spec';
 import { StoreListComponent } from './store-list.component';
@@ -22,7 +23,7 @@ describe('StoreListComponent', () => {
   let intendedPickupLocationService: IntendedPickupLocationFacade;
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [StoreListComponent],
+      declarations: [StoreListComponent, MockFeatureDirective],
       imports: [
         HttpClientTestingModule,
         I18nTestingModule,