fix: section details is not read out by screen reader

core-libs/assets/src/translations/en/myAccount.json

@@ -24,7 +24,8 @@
     },
     "bothPasswordMustMatch": "Both password must match",
     "passwordUpdateSuccess": "Password updated with success",
-    "accessDeniedError": "Access is denied"
+    "accessDeniedError": "Access is denied",
+    "heading": "Update Password"
   },
   "updateProfileForm": {
     "title": "Title",
@@ -40,11 +41,13 @@
     },
     "lastNameIsRequired": "Last name is required.",
     "profileUpdateSuccess": "Personal details successfully updated",
-    "customerId": "Customer #"
+    "customerId": "Customer #",
+    "heading": "Update Personal Details"
   },
   "consentManagementForm": {
     "clearAll": "Clear all",
     "selectAll": "Select all",
+    "heading": "Privacy Consent Management",
     "message": {
       "success": {
         "given": "Consent successfully given.",

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

@@ -395,6 +395,17 @@ export interface FeatureTogglesInterface {
    */
   a11yDeliveryModeFocusPreservation?: boolean;
 
+  /**
+   * When enabled, wraps form controls in a `<fieldset>` with a visually-hidden `<legend>`
+   * that names the section, so screen readers announce the section heading when any
+   * field in the group receives focus.
+   * Affects: UpdateProfileComponent, MyAccountV2ProfileComponent,
+   *          UpdatePasswordComponent, MyAccountV2PasswordComponent,
+   *          UpdateEmailComponent, MyAccountV2EmailComponent,
+   *          ConsentManagementComponent
+   */
+  a11yFormFieldSectionLegend?: boolean;
+
   /**
    * When enabled, `AuthHttpHeaderService` executes DI-provided
    * `ExpiredRefreshTokenHandler` to take over `handleExpiredRefreshToken()` behavior in case of expired refresh token scenarios.
@@ -613,6 +624,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yCartQuickOrderFormEnableSubmitAndAddValidation: false,
   a11yConsentManagementFocusPreservation: false,
   a11yDeliveryModeFocusPreservation: false,
+  a11yFormFieldSectionLegend: false,
   a11yVocalizeDropdownItemCount: false,
   a11yRestoreFocusOnNgSelect: false,
   a11yKeepFocusOnConsentManagementButtons: false,

core-libs/storefront/cms-components/myaccount/consent-management/components/consent-management.component.html

@@ -52,20 +52,43 @@
     </div>
 
     <ng-container *ngIf="!data.allConsentsLoading">
-      <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;
-              trackBy: trackByTemplateId
-            "
-            [consentTemplate]="consentTemplate"
-            [requiredConsents]="requiredConsents"
-            [disabled]="!!data.loading"
-            (consentChanged)="onConsentChange($event)"
-          ></cx-consent-management-form>
+      <ng-container *cxFeature="'a11yFormFieldSectionLegend'">
+        <fieldset>
+          <legend class="cx-visually-hidden">
+            {{ 'consentManagementForm.heading' | cxTranslate }}
+          </legend>
+          <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;
+                  trackBy: trackByTemplateId
+                "
+                [consentTemplate]="consentTemplate"
+                [requiredConsents]="requiredConsents"
+                [disabled]="!!data.loading"
+                (consentChanged)="onConsentChange($event)"
+              ></cx-consent-management-form>
+            </div>
+          </div>
+        </fieldset>
+      </ng-container>
+      <ng-container *cxFeature="'!a11yFormFieldSectionLegend'">
+        <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;
+                trackBy: trackByTemplateId
+              "
+              [consentTemplate]="consentTemplate"
+              [requiredConsents]="requiredConsents"
+              [disabled]="!!data.loading"
+              (consentChanged)="onConsentChange($event)"
+            ></cx-consent-management-form>
+          </div>
         </div>
-      </div>
+      </ng-container>
     </ng-container>
   </ng-container>
 </ng-container>

core-libs/storefront/cms-components/myaccount/consent-management/components/consent-management.component.spec.ts

@@ -31,6 +31,7 @@ import { SpinnerComponent } from '../../../../shared/components/spinner/spinner.
 import { ConsentManagementFormComponent } from './consent-form/consent-management-form.component';
 import { ConsentManagementComponentService } from '../consent-management-component.service';
 import { ConsentManagementComponent } from './consent-management.component';
+import { MockFeatureDirective } from 'core-libs/storefront/shared/test/mock-feature-directive';
 
 @Component({
   selector: 'cx-spinner',
@@ -168,6 +169,7 @@ describe('ConsentManagementComponent', () => {
             MockTranslatePipe,
             MockCxSpinnerComponent,
             MockConsentManagementFormComponent,
+            MockFeatureDirective,
           ],
         },
       })
@@ -804,4 +806,17 @@ describe('ConsentManagementComponent', () => {
       });
     });
   });
+
+  describe('Accessibility', () => {
+    it('should render a fieldset with a visually-hidden legend when consents are loaded', () => {
+      spyOn(userService, 'getConsents').and.returnValue(
+        of([mockConsentTemplate])
+      );
+      component.ngOnInit();
+      fixture.detectChanges();
+      const legend = el.query(By.css('fieldset legend'));
+      expect(legend).toBeTruthy();
+      expect(legend.nativeElement.classList).toContain('cx-visually-hidden');
+    });
+  });
 });

feature-libs/user/_index.scss

@@ -46,6 +46,10 @@ body {
   form {
     display: contents;
 
+    fieldset {
+      display: contents;
+    }
+
     label {
       all: unset;
       flex: 100%;

feature-libs/user/profile/assets/translations/en/myAccountV2Password.json

@@ -18,6 +18,7 @@
     "bothPasswordMustMatch": "Both password must match",
     "passwordUpdateSuccess": "Password updated with success",
     "accessDeniedError": "Access is denied",
-    "newPasswordTitle": "My Password"
+    "newPasswordTitle": "My Password",
+    "heading": "Change Password"
   }
 }

feature-libs/user/profile/assets/translations/en/userProfile.json

@@ -15,7 +15,8 @@
       "placeholder": "Enter password"
     },
     "pleaseInputPassword": "Please input password",
-    "emailUpdateSuccess": "Success. Please sign in with {{ newUid }}"
+    "emailUpdateSuccess": "Success. Please sign in with {{ newUid }}",
+    "heading": "Update Email Address"
   },
   "register": {
     "confirmPassword": {