fix: (CXSPA-9006) customer service create dialog issues fix

feature-libs/customer-ticketing/components/list/customer-ticketing-create/customer-ticketing-create-dialog/customer-ticketing-create-dialog.component.html

@@ -38,6 +38,7 @@
           </span>
           <textarea
             [maxLength]="inputCharactersForSubject"
+            required="true"
             class="form-control"
             formControlName="subject"
             rows="1"
@@ -62,7 +63,13 @@
             {{ 'createCustomerTicket.category' | cxTranslate }}
             <ng-template [ngTemplateOutlet]="requiredAsterisk"></ng-template>
           </span>
-          <select class="form-control" formControlName="ticketCategory">
+          <select
+            *cxFeature="
+              '!a11ySelectImprovementsCustomerTicketingCreateSelectbox'
+            "
+            class="form-control"
+            formControlName="ticketCategory"
+          >
             <option value="" disabled selected>
               {{ 'createCustomerTicket.selectCategory' | cxTranslate }}
             </option>
@@ -74,8 +81,27 @@
               {{ category.name }}
             </option>
           </select>
+          <ng-select
+            *cxFeature="
+              'a11ySelectImprovementsCustomerTicketingCreateSelectbox'
+            "
+            [inputAttrs]="{ required: 'true' }"
+            class="ticket-category-select"
+            id="ticket-category-select"
+            [searchable]="false"
+            [clearable]="false"
+            [items]="ticketCategories"
+            [placeholder]="'createCustomerTicket.selectCategory' | cxTranslate"
+            bindLabel="name"
+            formControlName="ticketCategory"
+            [cxNgSelectA11y]="{}"
+            [attr.aria-describedby]="'ticketCategoryError'"
+          >
+          </ng-select>
 
           <cx-form-errors
+            id="ticketCategoryError"
+            aria-live="off"
             [control]="form.get('ticketCategory')"
           ></cx-form-errors>
         </label>
@@ -87,7 +113,13 @@
             <span class="cx-customer-ticket-label label-content">
               {{ 'createCustomerTicket.associateTo' | cxTranslate }}
             </span>
-            <select class="form-control" formControlName="associatedTo">
+            <select
+              *cxFeature="
+                '!a11ySelectImprovementsCustomerTicketingCreateSelectbox'
+              "
+              class="form-control"
+              formControlName="associatedTo"
+            >
               <option value="" disabled selected>
                 {{
                   'createCustomerTicket.optionallySelectAssociatedObject'
@@ -105,6 +137,30 @@
                 {{ associatedObject.code }}
               </option>
             </select>
+            <ng-select
+              *cxFeature="
+                'a11ySelectImprovementsCustomerTicketingCreateSelectbox'
+              "
+              [clearable]="false"
+              [items]="ticketAssociatedObjects"
+              [placeholder]="
+                'createCustomerTicket.optionallySelectAssociatedObject'
+                  | cxTranslate
+              "
+              [searchable]="false"
+              formControlName="associatedTo"
+              id="associated-to-select"
+              [cxNgSelectA11y]="{}"
+            >
+              <ng-template
+                ng-option-tmp
+                let-item="item"
+                let-search="searchTerm"
+                let-index="index"
+              >
+                <span>{{ item.type + ' ' + item.code }}</span>
+              </ng-template>
+            </ng-select>
           </label>
         </ng-container>
 
@@ -114,6 +170,7 @@
             <ng-template [ngTemplateOutlet]="requiredAsterisk"></ng-template>
           </span>
           <textarea
+            required="true"
             [maxLength]="inputCharactersLimit"
             class="form-control"
             formControlName="message"

feature-libs/customer-ticketing/components/list/customer-ticketing-create/customer-ticketing-create-dialog/customer-ticketing-create-dialog.component.spec.ts

@@ -23,10 +23,12 @@ import {
   FormErrorsModule,
   ICON_TYPE,
   LaunchDialogService,
+  NgSelectA11yModule,
 } from '@spartacus/storefront';
 import { EMPTY, Observable, of, throwError } from 'rxjs';
 import { CustomerTicketingCreateDialogComponent } from './customer-ticketing-create-dialog.component';
 import createSpy = jasmine.createSpy;
+import { NgSelectModule } from '@ng-select/ng-select';
 
 const mockCategories = [
   {
@@ -121,6 +123,8 @@ describe('CustomerTicketingCreateDialogComponent', () => {
         ReactiveFormsModule,
         FormErrorsModule,
         FileUploadModule,
+        NgSelectModule,
+        NgSelectA11yModule,
       ],
       declarations: [
         CustomerTicketingCreateDialogComponent,

feature-libs/customer-ticketing/components/list/customer-ticketing-create/customer-ticketing-create-dialog/customer-ticketing-create-dialog.component.ts

@@ -6,6 +6,13 @@
 
 import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
+import {
+  FeatureConfigService,
+  GlobalMessageService,
+  GlobalMessageType,
+  HttpErrorModel,
+  TranslationService,
+} from '@spartacus/core';
 import {
   AssociatedObject,
   Category,
@@ -15,14 +22,8 @@ import {
 } from '@spartacus/customer-ticketing/root';
 import { FormUtils } from '@spartacus/storefront';
 import { Observable, of, Subscription } from 'rxjs';
+import { catchError, first, map, tap } from 'rxjs/operators';
 import { CustomerTicketingDialogComponent } from '../../../shared/customer-ticketing-dialog/customer-ticketing-dialog.component';
-import {
-  GlobalMessageService,
-  GlobalMessageType,
-  HttpErrorModel,
-  TranslationService,
-} from '@spartacus/core';
-import { catchError, first, tap } from 'rxjs/operators';
 
 @Component({
   selector: 'cx-customer-ticketing-create-dialog',
@@ -41,6 +42,12 @@ export class CustomerTicketingCreateDialogComponent
     );
   ticketAssociatedObjects$: Observable<AssociatedObject[]> =
     this.customerTicketingFacade.getTicketAssociatedObjects().pipe(
+      map((ao) =>
+        ao.map((cao) => ({
+          ...cao,
+          label: `${cao.type} ${cao.code}`,
+        }))
+      ),
       catchError((error: any) => {
         this.handleError(error);
         return of([]);
@@ -60,6 +67,8 @@ export class CustomerTicketingCreateDialogComponent
 
   protected translationService = inject(TranslationService);
 
+  protected featureService = inject(FeatureConfigService, { optional: true });
+
   protected getCreateTicketPayload(form: FormGroup): TicketStarter {
     return {
       message: form?.get('message')?.value,
@@ -71,6 +80,15 @@ export class CustomerTicketingCreateDialogComponent
 
   ngOnInit(): void {
     this.buildForm();
+
+    if (
+      this.featureService?.isEnabled(
+        'a11ySelectImprovementsCustomerTicketingCreateSelectbox'
+      )
+    ) {
+      this.focusConfig.trap = false;
+      this.focusConfig.trapTabOnly = true;
+    }
   }
 
   protected buildForm(): void {

feature-libs/customer-ticketing/components/list/customer-ticketing-create/customer-ticketing-create.module.ts

@@ -13,9 +13,11 @@ import {
   FormErrorsModule,
   IconModule,
   KeyboardFocusModule,
+  NgSelectA11yModule,
 } from '@spartacus/storefront';
 import { CustomerTicketingCreateDialogComponent } from './customer-ticketing-create-dialog/customer-ticketing-create-dialog.component';
 import { CustomerTicketingCreateComponent } from './customer-ticketing-create.component';
+import { NgSelectModule } from '@ng-select/ng-select';
 
 @NgModule({
   imports: [
@@ -27,6 +29,8 @@ import { CustomerTicketingCreateComponent } from './customer-ticketing-create.co
     FormErrorsModule,
     FileUploadModule,
     FeaturesConfigModule,
+    NgSelectModule,
+    NgSelectA11yModule,
   ],
   declarations: [
     CustomerTicketingCreateComponent,

feature-libs/customer-ticketing/package.json

@@ -30,6 +30,7 @@
     "@angular/core": "^19.0.3",
     "@angular/forms": "^19.0.3",
     "@angular/router": "^19.0.3",
+    "@ng-select/ng-select": "^14.1.0",
     "@spartacus/cart": "2211.35.0-1",
     "@spartacus/core": "2211.35.0-1",
     "@spartacus/schematics": "2211.35.0-1",

projects/core/src/features-config/feature-toggles/config/feature-toggles.ts

@@ -614,6 +614,14 @@ export interface FeatureTogglesInterface {
    */
   a11yNgSelectCloseDropdownOnEscape?: boolean;
 
+  /**
+   * 'NgSelectA11yDirective' will close a dropdown with options on Escape key press
+   * when a screen reader is used.
+   * Replaces select with ng-select component in the following component:
+   * `CustomerTicketingCreateDialogComponent`
+   */
+  a11ySelectImprovementsCustomerTicketingCreateSelectbox?: boolean;
+
   /**
    * Removes duplicated error message from 'CancelOrderComponent'.
    */
@@ -1084,6 +1092,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yDeliveryModeRadiogroup: false,
   a11yNgSelectOptionsCount: false,
   a11yNgSelectCloseDropdownOnEscape: false,
+  a11ySelectImprovementsCustomerTicketingCreateSelectbox: false,
   a11yRepeatedCancelOrderError: false,
   a11yAddedToCartActiveDialog: false,
   a11yNgSelectMobileReadout: false,

projects/schematics/src/dependencies.json

@@ -117,6 +117,7 @@
     "@angular/core": "^19.0.3",
     "@angular/forms": "^19.0.3",
     "@angular/router": "^19.0.3",
+    "@ng-select/ng-select": "^14.1.0",
     "@spartacus/cart": "2211.35.0-1",
     "@spartacus/core": "2211.35.0-1",
     "@spartacus/schematics": "2211.35.0-1",

projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts

@@ -389,6 +389,7 @@ if (environment.cpq) {
          */
         a11yNgSelectOptionsCount: false,
         a11yNgSelectCloseDropdownOnEscape: true,
+        a11ySelectImprovementsCustomerTicketingCreateSelectbox: true,
         a11yRepeatedCancelOrderError: true,
         a11yAddedToCartActiveDialog: true,
         a11yNgSelectMobileReadout: true,