fix: (CXSPA-1794) - List heading order (#18464)

Co-authored-by: Piotr Bartkowiak <[email protected]>
SAP · Mar 27, 2024 · 4a4176b · 4a4176b
1 parent 99903cb
commit 4a4176b
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 7 deletions.
diff --git a/feature-libs/organization/administration/components/shared/list/list.component.html b/feature-libs/organization/administration/components/shared/list/list.component.html
@@ -3,7 +3,26 @@
     <cx-view class="list" *ngIf="listData$ | async as data">
       <div class="header">
         <div class="title">
-          <h3>
+          <!-- TODO: (CXSPA-6624) - Remove feature flag next major release -->
+          <h2 *cxFeature="'a11yOrganizationListHeadingOrder'">
+            {{
+              viewType + '.header' | cxTranslate: { count: getListCount(data) }
+            }}
+            <button
+              [cxPopover]="listHint"
+              [cxPopoverOptions]="{
+                placement: 'auto',
+                class: 'hint-popover',
+                appendToBody: true,
+                displayCloseButton: true
+              }"
+              [attr.aria-label]="'organization.information' | cxTranslate"
+            >
+              <cx-icon [type]="iconTypes.INFO"> </cx-icon>
+            </button>
+          </h2>
+
+          <h3 *cxFeature="'!a11yOrganizationListHeadingOrder'">
             {{
               viewType + '.header' | cxTranslate: { count: getListCount(data) }
             }}

diff --git a/feature-libs/organization/administration/components/shared/list/list.component.spec.ts b/feature-libs/organization/administration/components/shared/list/list.component.spec.ts
@@ -23,6 +23,7 @@ import { IconTestingModule } from 'projects/storefrontlib/cms-components/misc/ic
 import { KeyboardFocusTestingModule } from 'projects/storefrontlib/layout/a11y/keyboard-focus/focus-testing.module';
 import { PaginationTestingModule } from 'projects/storefrontlib/shared/components/list-navigation/pagination/testing/pagination-testing.module';
 import { SplitViewTestingModule } from 'projects/storefrontlib/shared/components/split-view/testing/spit-view-testing.module';
+import { MockFeatureDirective } from 'projects/storefrontlib/shared/test/mock-feature-directive';
 import { EMPTY, of } from 'rxjs';
 import { ItemService } from '../item.service';
 import { ListComponent } from './list.component';
@@ -131,7 +132,11 @@ describe('ListComponent', () => {
         KeyboardFocusTestingModule,
         PopoverModule,
       ],
-      declarations: [MockListComponent, MockTableComponent],
+      declarations: [
+        MockListComponent,
+        MockTableComponent,
+        MockFeatureDirective,
+      ],
       providers: [
         {
           provide: ListService,

diff --git a/feature-libs/organization/administration/components/shared/list/list.component.ts b/feature-libs/organization/administration/components/shared/list/list.component.ts
@@ -10,7 +10,12 @@ import {
   HostBinding,
   Input,
 } from '@angular/core';
-import { EntitiesModel, PaginationModel, Translatable } from '@spartacus/core';
+import {
+  EntitiesModel,
+  PaginationModel,
+  Translatable,
+  useFeatureStyles,
+} from '@spartacus/core';
 import {
   ICON_TYPE,
   Table,
@@ -21,7 +26,7 @@ import { Observable } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import { ItemService } from '../item.service';
 import { OrganizationTableType } from '../organization.model';
-import { ListService, CreateButtonType } from './list.service';
+import { CreateButtonType, ListService } from './list.service';
 
 @Component({
   selector: 'cx-org-list',
@@ -36,7 +41,9 @@ export class ListComponent<T = any, P = PaginationModel> {
   constructor(
     protected service: ListService<T, P>,
     protected organizationItemService: ItemService<T>
-  ) {}
+  ) {
+    useFeatureStyles('a11yOrganizationListHeadingOrder');
+  }
 
   @HostBinding('class')
   viewType: OrganizationTableType = this.service.viewType;

diff --git a/feature-libs/organization/administration/components/shared/list/list.module.ts b/feature-libs/organization/administration/components/shared/list/list.module.ts
@@ -9,17 +9,17 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { NgSelectModule } from '@ng-select/ng-select';
-import { I18nModule, UrlModule } from '@spartacus/core';
+import { FeaturesConfigModule, I18nModule, UrlModule } from '@spartacus/core';
 import {
   IconModule,
   KeyboardFocusModule,
   PaginationModule,
+  PopoverModule,
   SplitViewModule,
   TableModule,
 } from '@spartacus/storefront';
 import { MessageModule } from '../message/message.module';
 import { ListComponent } from './list.component';
-import { PopoverModule } from '@spartacus/storefront';
 
 @NgModule({
   imports: [
@@ -36,6 +36,7 @@ import { PopoverModule } from '@spartacus/storefront';
     MessageModule,
     KeyboardFocusModule,
     PopoverModule,
+    FeaturesConfigModule,
   ],
   declarations: [ListComponent],
   exports: [ListComponent],

diff --git a/feature-libs/organization/administration/styles/_list.scss b/feature-libs/organization/administration/styles/_list.scss
@@ -73,6 +73,7 @@
   }
 }
 
+// TODO: (CXSPA-6624) - Remove feature flag + redundant code
 %organizationTitle {
   .title {
     h3 {
@@ -86,6 +87,23 @@
       }
     }
   }
+  @include forFeature('a11yOrganizationListHeadingOrder') {
+    .title {
+      h2,
+      h3 {
+        @include type('3', 'normal');
+        text-transform: uppercase;
+        button {
+          border: none;
+          background-color: inherit;
+          cx-icon {
+            pointer-events: none;
+            color: var(--cx-color, var(--cx-color-info));
+          }
+        }
+      }
+    }
+  }
 }
 
 %organizationList {

diff --git a/projects/storefrontapp/src/app/app.module.ts b/projects/storefrontapp/src/app/app.module.ts
@@ -103,6 +103,7 @@ if (!environment.production) {
         a11ySortingOptionsTruncation: true,
         a11yExpandedFocusIndicator: true,
         a11yCheckoutDeliveryFocus: true,
+        a11yOrganizationListHeadingOrder: true,
         a11yReplenishmentOrderFieldset: true,
       },
     }),