fix: (CXSPA-9006) address PR comments - introduce feature flags

SAP · Jan 28, 2025 · 674d334 · 674d334
1 parent a110890
commit 674d334
Show file tree

Hide file tree

Showing 4 changed files with 146 additions and 3 deletions.
diff --git a/...g-create/customer-ticketing-create-dialog/customer-ticketing-create-dialog.component.html b/...g-create/customer-ticketing-create-dialog/customer-ticketing-create-dialog.component.html
@@ -37,6 +37,19 @@
             <ng-template [ngTemplateOutlet]="requiredAsterisk"></ng-template>
           </span>
           <textarea
+            *cxFeature="
+              '!a11ySelectImprovementsCustomerTicketingRequiredFieldsClass'
+            "
+            [maxLength]="inputCharactersForSubject"
+            class="form-control"
+            formControlName="subject"
+            rows="1"
+            [attr.aria-describedby]="'subjectError'"
+          ></textarea>
+          <textarea
+            *cxFeature="
+              'a11ySelectImprovementsCustomerTicketingRequiredFieldsClass'
+            "
             [maxLength]="inputCharactersForSubject"
             required="true"
             class="form-control"
@@ -59,11 +72,35 @@
         </label>
 
         <label *ngIf="ticketCategories$ | async as ticketCategories">
-          <span class="cx-customer-ticket-label label-content required">
+          <span
+            class="cx-customer-ticket-label label-content"
+            [ngClass]="{ required: isAddRequiredFieldsClassEnabled }"
+          >
             {{ 'createCustomerTicket.category' | cxTranslate }}
             <ng-template [ngTemplateOutlet]="requiredAsterisk"></ng-template>
           </span>
+          <select
+            *cxFeature="
+              '!a11ySelectImprovementsCustomerTicketingCreateSelectbox'
+            "
+            class="form-control"
+            formControlName="ticketCategory"
+          >
+            <option value="" disabled selected>
+              {{ 'createCustomerTicket.selectCategory' | cxTranslate }}
+            </option>
+            <option
+              *ngFor="let category of ticketCategories"
+              [ngValue]="category"
+              [selected]="category.id === selectedCategory?.id"
+            >
+              {{ category.name }}
+            </option>
+          </select>
           <ng-select
+            *cxFeature="
+              'a11ySelectImprovementsCustomerTicketingCreateSelectbox'
+            "
             [inputAttrs]="{ required: 'true' }"
             class="ticket-category-select"
             id="ticket-category-select"
@@ -92,7 +129,34 @@
             <span class="cx-customer-ticket-label label-content">
               {{ 'createCustomerTicket.associateTo' | cxTranslate }}
             </span>
+            <select
+              *cxFeature="
+                '!a11ySelectImprovementsCustomerTicketingCreateSelectbox'
+              "
+              class="form-control"
+              formControlName="associatedTo"
+            >
+              <option value="" disabled selected>
+                {{
+                  'createCustomerTicket.optionallySelectAssociatedObject'
+                    | cxTranslate
+                }}
+              </option>
+              <option
+                *ngFor="let associatedObject of ticketAssociatedObjects"
+                [ngValue]="associatedObject"
+                [selected]="
+                  associatedObject.code === selectedAssociatedObject?.code
+                "
+              >
+                {{ associatedObject.type }}
+                {{ associatedObject.code }}
+              </option>
+            </select>
             <ng-select
+              *cxFeature="
+                'a11ySelectImprovementsCustomerTicketingCreateSelectbox'
+              "
               [clearable]="false"
               [items]="ticketAssociatedObjects"
               [placeholder]="
@@ -122,6 +186,19 @@
             <ng-template [ngTemplateOutlet]="requiredAsterisk"></ng-template>
           </span>
           <textarea
+            *cxFeature="
+              '!a11ySelectImprovementsCustomerTicketingRequiredFieldsClass'
+            "
+            [maxLength]="inputCharactersLimit"
+            class="form-control"
+            formControlName="message"
+            rows="5"
+            [attr.aria-describedby]="'messageError'"
+          ></textarea>
+          <textarea
+            *cxFeature="
+              'a11ySelectImprovementsCustomerTicketingRequiredFieldsClass'
+            "
             required="true"
             [maxLength]="inputCharactersLimit"
             class="form-control"

diff --git a/...ing-create/customer-ticketing-create-dialog/customer-ticketing-create-dialog.component.ts b/...ing-create/customer-ticketing-create-dialog/customer-ticketing-create-dialog.component.ts
@@ -4,22 +4,37 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  inject,
+  Input,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import {
   AssociatedObject,
   Category,
+  CustomerTicketingConfig,
+  CustomerTicketingFacade,
   MAX_ENTRIES_FOR_ATTACHMENT,
   TicketDetails,
   TicketStarter,
 } from '@spartacus/customer-ticketing/root';
-import { FormUtils } from '@spartacus/storefront';
+import {
+  FilesFormValidators,
+  FormUtils,
+  LaunchDialogService,
+} from '@spartacus/storefront';
 import { Observable, of, Subscription } from 'rxjs';
 import { CustomerTicketingDialogComponent } from '../../../shared/customer-ticketing-dialog/customer-ticketing-dialog.component';
 import {
+  FeatureConfigService,
   GlobalMessageService,
   GlobalMessageType,
   HttpErrorModel,
+  RoutingService,
   TranslationService,
 } from '@spartacus/core';
 import { catchError, first, map, tap } from 'rxjs/operators';
@@ -62,6 +77,8 @@ export class CustomerTicketingCreateDialogComponent
 
   attachment: File;
 
+  isAddRequiredFieldsClassEnabled: boolean;
+
   protected globalMessage = inject(GlobalMessageService);
 
   protected translationService = inject(TranslationService);
@@ -75,6 +92,37 @@ export class CustomerTicketingCreateDialogComponent
     };
   }
 
+  constructor(
+    protected launchDialogService: LaunchDialogService,
+    protected el: ElementRef,
+    protected customerTicketingConfig: CustomerTicketingConfig,
+    protected filesFormValidators: FilesFormValidators,
+    protected customerTicketingFacade: CustomerTicketingFacade,
+    protected routingService: RoutingService,
+    protected featureService: FeatureConfigService
+  ) {
+    super(
+      launchDialogService,
+      el,
+      customerTicketingConfig,
+      filesFormValidators,
+      customerTicketingFacade,
+      routingService
+    );
+    this.isAddRequiredFieldsClassEnabled = this.featureService.isEnabled(
+      'a11ySelectImprovementsCustomerTicketingRequiredFieldsClass'
+    );
+
+    if (
+      this.featureService.isEnabled(
+        'a11ySelectImprovementsCustomerTicketingCreateSelectbox'
+      )
+    ) {
+      this.focusConfig.trap = false;
+      this.focusConfig.trapTabOnly = true;
+    }
+  }
+
   ngOnInit(): void {
     this.buildForm();
   }

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
@@ -614,6 +614,20 @@ 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;
+
+  /**
+   * Adds missing required class for subject, selectCategory and message fields in the following component:
+   * `CustomerTicketingCreateDialogComponent`
+   */
+  a11ySelectImprovementsCustomerTicketingRequiredFieldsClass?: boolean;
+
   /**
    * Removes duplicated error message from 'CancelOrderComponent'.
    */
@@ -1084,6 +1098,8 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yDeliveryModeRadiogroup: false,
   a11yNgSelectOptionsCount: false,
   a11yNgSelectCloseDropdownOnEscape: false,
+  a11ySelectImprovementsCustomerTicketingCreateSelectbox: false,
+  a11ySelectImprovementsCustomerTicketingRequiredFieldsClass: false,
   a11yRepeatedCancelOrderError: false,
   a11yAddedToCartActiveDialog: false,
   a11yNgSelectMobileReadout: false,

diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
@@ -389,6 +389,8 @@ if (environment.cpq) {
          */
         a11yNgSelectOptionsCount: false,
         a11yNgSelectCloseDropdownOnEscape: true,
+        a11ySelectImprovementsCustomerTicketingCreateSelectbox: true,
+        a11ySelectImprovementsCustomerTicketingRequiredFieldsClass: true,
         a11yRepeatedCancelOrderError: true,
         a11yAddedToCartActiveDialog: true,
         a11yNgSelectMobileReadout: true,