fix: persist focus on consent (#21309)

Author: rmch91

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

@@ -469,6 +469,14 @@ export interface FeatureTogglesInterface {
    * When enabled, displays required field asterisks for form fields.
    */
   showRequiredAsterisks?: boolean;
+
+  /**
+   * Preserves keyboard focus on consent checkboxes after toggling.
+   * Treats Space/Enter on checkbox/radio as navigation in VisibleFocusDirective
+   * and restores focus after the consent form is temporarily disabled.
+   * Affects: VisibleFocusDirective, ConsentManagementFormComponent, ConsentManagementComponent
+   */
+  a11yConsentManagementFocusPreservation?: boolean;
 }
 
 export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
@@ -521,6 +529,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yCartItemListHideEmptyOutlets: false,
   a11yReviewsKeyboardControls: false,
   a11yCartQuickOrderFormEnableSubmitAndAddValidation: false,
+  a11yConsentManagementFocusPreservation: false,
   a11yVocalizeDropdownItemCount: false,
   useEnhancedSecurePasswordValidators: false,
   enableRemoveVoucherEndpoint: false,

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

@@ -345,6 +345,7 @@ if (environment.cpq) {
         a11yCartItemListHideEmptyOutlets: true,
         a11yReviewsKeyboardControls: true,
         a11yCartQuickOrderFormEnableSubmitAndAddValidation: true,
+        a11yConsentManagementFocusPreservation: true,
         a11yVocalizeDropdownItemCount: true,
         useEnhancedSecurePasswordValidators: true,
         enableRemoveVoucherEndpoint: true,

projects/storefrontlib/cms-components/myaccount/consent-management/components/consent-form/consent-management-form.component.html

@@ -4,6 +4,7 @@
 >
   <label>
     <input
+      #checkboxInput
       type="checkbox"
       class="form-check-input"
       (change)="onConsentChange()"

projects/storefrontlib/cms-components/myaccount/consent-management/components/consent-form/consent-management-form.component.ts

@@ -6,18 +6,23 @@
 
 import { NgIf, NgTemplateOutlet } from '@angular/common';
 import {
+  AfterViewChecked,
   Component,
+  ElementRef,
   EventEmitter,
+  inject,
   Input,
   OnChanges,
   OnInit,
   Output,
   SimpleChanges,
+  ViewChild,
 } from '@angular/core';
 import {
   ANONYMOUS_CONSENT_STATUS,
   AnonymousConsent,
   ConsentTemplate,
+  FeatureConfigService,
   TranslatePipe,
 } from '@spartacus/core';
 
@@ -26,7 +31,9 @@ import {
   templateUrl: './consent-management-form.component.html',
   imports: [NgIf, NgTemplateOutlet, TranslatePipe],
 })
-export class ConsentManagementFormComponent implements OnInit, OnChanges {
+export class ConsentManagementFormComponent
+  implements OnInit, OnChanges, AfterViewChecked
+{
   consentGiven = false;
 
   @Input()
@@ -49,6 +56,12 @@ export class ConsentManagementFormComponent implements OnInit, OnChanges {
     template: ConsentTemplate;
   }>();
 
+  @ViewChild('checkboxInput') checkboxInput: ElementRef<HTMLInputElement>;
+
+  private hadFocus = false;
+  private document = inject(ElementRef).nativeElement.ownerDocument;
+  private featureConfigService = inject(FeatureConfigService);
+
   constructor() {
     // Intentional empty constructor
   }
@@ -61,6 +74,29 @@ export class ConsentManagementFormComponent implements OnInit, OnChanges {
     if (changes.consent || changes.consentTemplate) {
       this.updateConsentGiven();
     }
+    if (
+      changes.disabled?.currentValue === true &&
+      this.featureConfigService.isEnabled(
+        'a11yConsentManagementFocusPreservation'
+      )
+    ) {
+      this.hadFocus =
+        this.checkboxInput?.nativeElement === this.document.activeElement;
+    }
+  }
+
+  ngAfterViewChecked(): void {
+    if (
+      this.hadFocus &&
+      !this.disabled &&
+      this.checkboxInput?.nativeElement &&
+      this.featureConfigService.isEnabled(
+        'a11yConsentManagementFocusPreservation'
+      )
+    ) {
+      this.hadFocus = false;
+      this.checkboxInput.nativeElement.focus();
+    }
   }
 
   onConsentChange(): void {

projects/storefrontlib/cms-components/myaccount/consent-management/components/consent-management.component.html

@@ -35,7 +35,10 @@
       <div class="cx-consent-toggles">
         <div class="col-sm-12 col-md-8 col-lg-6">
           <cx-consent-management-form
-            *ngFor="let consentTemplate of templateList"
+            *ngFor="
+              let consentTemplate of templateList;
+              trackBy: trackByTemplateId
+            "
             [consentTemplate]="consentTemplate"
             [requiredConsents]="requiredConsents"
             [disabled]="!!data.loading"

projects/storefrontlib/cms-components/myaccount/consent-management/components/consent-management.component.ts

@@ -347,6 +347,10 @@ export class ConsentManagementComponent implements OnInit, OnDestroy {
     return checkTimesLoaded$;
   }
 
+  trackByTemplateId(_index: number, item: ConsentTemplate): string {
+    return item.id ?? '';
+  }
+
   private isRequiredConsent(template: ConsentTemplate): boolean {
     return Boolean(
       template.id &&

projects/storefrontlib/layout/a11y/keyboard-focus/visible/visible-focus.directive.ts

@@ -4,7 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Directive, HostBinding, HostListener } from '@angular/core';
+import { Directive, HostBinding, HostListener, inject } from '@angular/core';
+import { FeatureConfigService } from '@spartacus/core';
 import { BaseFocusDirective } from '../base/base-focus.directive';
 import { VisibleFocusConfig } from '../keyboard-focus.model';
 
@@ -26,6 +27,8 @@ export class VisibleFocusDirective extends BaseFocusDirective {
     disableMouseFocus: true,
   };
 
+  private featureConfigService = inject(FeatureConfigService);
+
   // @Input('cxVisibleFocus')
   protected config: VisibleFocusConfig;
 
@@ -65,7 +68,22 @@ export class VisibleFocusDirective extends BaseFocusDirective {
       return true;
     }
     // If the user fill in a form, we don't considering it part of storefront navigation.
+    // However, pressing Space/Enter on a checkbox or radio button is a toggle action
+    // (not typing), so we treat it as navigation to preserve the focus outline.
     if (['INPUT', 'TEXTAREA'].includes((event.target as HTMLElement).tagName)) {
+      if (
+        this.featureConfigService.isEnabled(
+          'a11yConsentManagementFocusPreservation'
+        )
+      ) {
+        const inputType = (event.target as HTMLInputElement).type;
+        if (
+          (event.code === 'Space' || event.code === 'Enter') &&
+          (inputType === 'checkbox' || inputType === 'radio')
+        ) {
+          return true;
+        }
+      }
       return false;
     }
     return true;

projects/storefrontlib/shared/components/anonymous-consents-dialog/anonymous-consent-dialog.component.html

@@ -41,7 +41,6 @@ <h3 id="dialogTitle">
           [type]="message.type"
           [isVisibleCloseButton]="true"
           (closeMessage)="closeMessage()"
-          [cxFocus]="{ autofocus: '.cx-message' }"
         ></cx-message>
       </div>
       <!-- Actions -->