Skip to content

Commit 06f8a08

Browse files
rmch91rmch91
committed
Merge remote-tracking branch 'origin/develop' into release-2211.35.0-1
2 parents d0cd5ec + 79ee677 commit 06f8a08

File tree

8 files changed

+117
-102
lines changed

8 files changed

+117
-102
lines changed

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

+7
Original file line numberDiff line numberDiff line change
@@ -811,6 +811,12 @@ export interface FeatureTogglesInterface {
811811
*/
812812
a11yAddPaddingToCarouselPanel?: boolean;
813813

814+
/**
815+
* Removes invalid aria-level usage on button elements and ensures buttons have a proper accessible name via aria-label or aria-labelledby.
816+
* Affects: NavigationUIComponent
817+
*/
818+
a11yNavigationButtonsAriaFixes?: boolean;
819+
814820
/**
815821
* Restores the focus to the card once a option has been selected and the checkout has updated.
816822
* Affects: CheckoutPaymentMethodComponent, CheckoutDeliveryAddressComponent
@@ -1114,6 +1120,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
11141120
a11yQuickOrderSearchBoxRefocusOnClose: false,
11151121
a11yKeyboardFocusInSearchBox: false,
11161122
a11yAddPaddingToCarouselPanel: false,
1123+
a11yNavigationButtonsAriaFixes: false,
11171124
a11yFocusOnCardAfterSelecting: false,
11181125
a11ySearchableDropdownFirstElementFocus: false,
11191126
a11yHideConsentButtonWhenBannerVisible: false,

‎projects/storefrontapp-e2e-cypress/cypress/e2e/vendor/estimated-delivery-date/estimated-delivery-date.e2e-flaky.cy.ts

+21-17
Original file line numberDiff line numberDiff line change
@@ -4,46 +4,50 @@
44
* SPDX-License-Identifier: Apache-2.0
55
*/
66

7+
import { loginUser, signOut } from '../../../helpers/checkout-flow';
78
import {
8-
addCheapProductToCartAndBeginCheckoutForSignedInCustomer,
9-
goToCheapProductDetailsPage,
10-
loginUser,
11-
signOut,
12-
} from '../../../helpers/checkout-flow';
13-
import {
14-
addProductToCart,
15-
cheapProduct,
169
checkoutDeliveryMode,
1710
checkoutPaymentDetails,
1811
checkoutShippingAddress,
12+
my_user,
1913
orderConfirmation,
2014
reviewAndPlaceOrder,
21-
my_user,
2215
} from '../../../helpers/estimated-delivery-date';
2316

2417
describe('estimated delivery date', () => {
2518
it('should see estimated delivery date in cart and order pages', () => {
2619
cy.visit('/apparel-uk-spa/en/GBP/login');
2720
loginUser(my_user);
2821
cy.wait(3000);
29-
cy.visit('/apparel-uk-spa/en/GBP/product/M_CR_1015');
22+
cy.visit('/apparel-uk-spa/en/GBP/product/M_CR_1016');
23+
cy.wait(4000);
24+
cy.get('cx-add-to-cart')
25+
.findByText(/Add To Cart/i)
26+
.click();
3027
cy.wait(4000);
31-
addCheapProductToCartAndBeginCheckoutForSignedInCustomer(cheapProduct);
28+
cy.findByText(/proceed to checkout/i).click();
29+
cy.wait(8000);
3230
checkoutShippingAddress();
3331
checkoutDeliveryMode();
34-
//going back to PDP and adding a product again to show Estimated delivery date in cart
35-
goToCheapProductDetailsPage(cheapProduct);
36-
addProductToCart(cheapProduct);
32+
//going back to cart to show Estimated delivery date in cart
33+
cy.visit('/apparel-uk-spa/en/GBP/cart');
34+
cy.wait(4000);
35+
cy.get('cx-estimated-delivery-date').should('exist');
36+
cy.findByText(/proceed to checkout/i).click();
37+
cy.wait(8000);
3738
checkoutShippingAddress();
3839
checkoutDeliveryMode();
3940
checkoutPaymentDetails();
4041
reviewAndPlaceOrder();
4142
orderConfirmation();
4243
});
4344
it('should see estimated delivery date in order history', () => {
44-
cy.visit('apparel-uk-spa/en/GBP/my-account/order/');
45-
cy.get('.cx-list').should('have.length', 1);
46-
cy.get('cx-order-history-code').click();
45+
//For this test to run successfully ensure a order is already present.
46+
cy.visit('/apparel-uk-spa/en/GBP/login');
47+
loginUser(my_user);
48+
cy.visit('apparel-uk-spa/en/GBP/my-account/orders/');
49+
cy.wait(6000);
50+
cy.get('.cx-order-history-code').click({ multiple: true });
4751
cy.contains('Estimated delivery date');
4852
signOut();
4953
});

‎projects/storefrontapp-e2e-cypress/cypress/helpers/estimated-delivery-date.ts

+13-43
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,11 @@
44
* SPDX-License-Identifier: Apache-2.0
55
*/
66

7-
import { waitForPage, addCheapProductToCart } from './checkout-flow';
87
import { SampleProduct } from '../sample-data/checkout-flow';
98

109
export const cheapProduct: SampleProduct = {
11-
name: 'Coney Flare',
12-
code: 'M_CR_1015',
10+
name: 'Frozen Peas',
11+
code: 'M_CR_1016',
1312
};
1413

1514
export const my_user = {
@@ -19,60 +18,45 @@ export const my_user = {
1918
};
2019

2120
export function checkoutShippingAddress() {
22-
const deliveryModePage = waitForPage(
23-
'/checkout/delivery-mode',
24-
'getDeliveryModePage'
25-
);
2621
cy.get('cx-delivery-address').within(() => {
27-
cy.findByText('Selected');
2822
cy.findByText('Continue').click();
2923
});
30-
cy.wait(`@${deliveryModePage}`).its('response.statusCode').should('eq', 200);
3124
}
3225

3326
export function checkoutDeliveryMode() {
34-
const PaymentDetailsPage = waitForPage(
35-
'/checkout/payment-details',
36-
'getPaymentDetailsPage'
37-
);
3827
cy.get('[formcontrolname="deliveryModeId"]').eq(0).click();
3928
cy.get('cx-delivery-mode').within(() => {
4029
cy.wait(3000);
4130
cy.findByText('Continue').click();
4231
});
43-
cy.wait(`@${PaymentDetailsPage}`)
44-
.its('response.statusCode')
45-
.should('eq', 200);
4632
}
4733

4834
export function checkoutPaymentDetails() {
49-
const ReviewOrderPage = waitForPage(
50-
'/checkout/review-order',
51-
'getReviewOrderPage'
52-
);
5335
cy.get('cx-payment-method').within(() => {
5436
cy.get('cx-card')
5537
.eq(0)
5638
.within(() => {
57-
cy.findByText('Use this payment').click();
58-
cy.wait(3000);
39+
cy.findByText('OMSA Customer');
40+
cy.findByText('5105105105105100');
41+
cy.findByText('Expires: 08/2030');
42+
cy.findByText('Use this payment', { timeout: 10000 })
43+
.should(Cypress._.noop) // No-op to avoid failures if not found
44+
.then(($button) => {
45+
if ($button.length > 0) {
46+
cy.wrap($button).click();
47+
}
48+
});
5949
});
6050
cy.findByText('Continue').click();
6151
});
62-
cy.wait(`@${ReviewOrderPage}`).its('response.statusCode').should('eq', 200);
6352
}
6453

6554
export function reviewAndPlaceOrder() {
66-
const ConfirmOrderPage = waitForPage(
67-
'/order-confirmation',
68-
'getOrderConfirmationPage'
69-
);
70-
cy.contains('Estimated delivery date');
55+
cy.contains('Estimated delivery date').should('exist');
7156
cy.get('cx-place-order').within(() => {
7257
cy.get('[formcontrolname="termsAndConditions"]').check();
7358
cy.findByText('Place Order').click();
7459
});
75-
cy.wait(`@${ConfirmOrderPage}`).its('response.statusCode').should('eq', 200);
7660
}
7761

7862
export function orderConfirmation() {
@@ -82,17 +66,3 @@ export function orderConfirmation() {
8266
cy.get('cx-order-confirmation-thank-you-message');
8367
cy.contains('Estimated delivery date');
8468
}
85-
86-
export function addProductToCart(sampleProduct: SampleProduct = cheapProduct) {
87-
addCheapProductToCart(sampleProduct);
88-
89-
const deliveryAddressPage = waitForPage(
90-
'/checkout/delivery-address',
91-
'getDeliveryAddressPage'
92-
);
93-
cy.contains('Estimated delivery date');
94-
cy.findByText(/proceed to checkout/i).click();
95-
cy.wait(`@${deliveryAddressPage}`)
96-
.its('response.statusCode')
97-
.should('eq', 200);
98-
}

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

+1
Original file line numberDiff line numberDiff line change
@@ -424,6 +424,7 @@ if (environment.cpq) {
424424
a11yQuickOrderSearchBoxRefocusOnClose: true,
425425
a11yKeyboardFocusInSearchBox: true,
426426
a11yAddPaddingToCarouselPanel: true,
427+
a11yNavigationButtonsAriaFixes: true,
427428
a11yFocusOnCardAfterSelecting: true,
428429
a11ySearchableDropdownFirstElementFocus: true,
429430
a11yHideConsentButtonWhenBannerVisible: true,

‎projects/storefrontlib/cms-components/navigation/navigation/navigation-ui.component.html

+44-24
Original file line numberDiff line numberDiff line change
@@ -105,29 +105,49 @@
105105
</button>
106106
</ng-container>
107107
<ng-container *cxFeature="'a11yNavigationUiKeyboardControls'">
108-
<button
109-
aria-level="4"
110-
[attr.role]="(isDesktop$ | async) && depth ? 'heading' : 'button'"
111-
[attr.aria-haspopup]="true"
112-
[attr.aria-expanded]="false"
113-
[attr.aria-controls]="node.title"
114-
[attr.aria-label]="node.title"
115-
[attr.title]="
116-
'navigation.menuButonTitle' | cxTranslate: { title: node.title }
117-
"
118-
(click)="toggleOpen($any($event))"
119-
(mouseenter)="onMouseEnter($event)"
120-
(keydown.space)="onSpace($any($event))"
121-
(keydown.enter)="onSpace($any($event))"
122-
(keydown.esc)="back()"
123-
(keydown.arrowDown)="focusOnNode($any($event))"
124-
(focus)="depth || reinitializeMenu()"
125-
>
126-
<ng-container *ngIf="!node.url">
127-
{{ node.title }}
128-
</ng-container>
129-
<cx-icon [type]="iconType.CARET_DOWN"></cx-icon>
130-
</button>
108+
<ng-container *cxFeature="'!a11yNavigationButtonsAriaFixes'">
109+
<button
110+
aria-level="4"
111+
[attr.role]="(isDesktop$ | async) && depth ? 'heading' : 'button'"
112+
[attr.aria-haspopup]="true"
113+
[attr.aria-expanded]="false"
114+
[attr.aria-controls]="node.title"
115+
[attr.aria-describedby]="'greeting'"
116+
(click)="toggleOpen($any($event))"
117+
(mouseenter)="onMouseEnter($event)"
118+
(keydown.space)="onSpace($any($event))"
119+
(keydown.enter)="onSpace($any($event))"
120+
(keydown.esc)="back()"
121+
(keydown.arrowDown)="focusOnNode($any($event))"
122+
(focus)="depth || reinitializeMenu()"
123+
>
124+
<ng-container *ngIf="!node.url">
125+
{{ node.title }}
126+
</ng-container>
127+
<cx-icon [type]="iconType.CARET_DOWN"></cx-icon>
128+
</button>
129+
</ng-container>
130+
<ng-container *cxFeature="'a11yNavigationButtonsAriaFixes'">
131+
<button
132+
[attr.role]="(isDesktop$ | async) && depth ? 'heading' : 'button'"
133+
[attr.aria-haspopup]="true"
134+
[attr.aria-expanded]="false"
135+
[attr.aria-label]="getAriaLabelAndControl(node)"
136+
[attr.aria-controls]="getAriaLabelAndControl(node)"
137+
(click)="toggleOpen($any($event))"
138+
(mouseenter)="onMouseEnter($event)"
139+
(keydown.space)="onSpace($any($event))"
140+
(keydown.enter)="onSpace($any($event))"
141+
(keydown.esc)="back()"
142+
(keydown.arrowDown)="focusOnNode($any($event))"
143+
(focus)="depth || reinitializeMenu()"
144+
>
145+
<ng-container *ngIf="!node.url">
146+
{{ node.title }}
147+
</ng-container>
148+
<cx-icon [type]="iconType.CARET_DOWN"></cx-icon>
149+
</button>
150+
</ng-container>
131151
</ng-container>
132152
</ng-container>
133153
<ng-template #title>
@@ -144,7 +164,7 @@
144164

145165
<!-- we add a wrapper to allow for better layout handling in CSS -->
146166
<div
147-
[id]="node.title"
167+
[id]="getSanitizedTitle(node.title)"
148168
class="wrapper"
149169
*ngIf="node.children && node.children.length > 0"
150170
>

‎projects/storefrontlib/cms-components/navigation/navigation/navigation-ui.component.spec.ts

+14-15
Original file line numberDiff line numberDiff line change
@@ -317,10 +317,10 @@ describe('Navigation UI Component', () => {
317317
.query(By.css('nav > ul > li:nth-child(2) > button'))
318318
.nativeElement.click();
319319
element
320-
.query(By.css('button[aria-controls="Child 1"]'))
320+
.query(By.css('button[aria-controls="child-1"]'))
321321
.nativeElement.click();
322322
element
323-
.query(By.css('button[aria-controls="Sub child 1"]'))
323+
.query(By.css('button[aria-controls="sub-child-1"]'))
324324
.nativeElement.click();
325325

326326
expect(element.queryAll(By.css('li.is-open:not(.back)')).length).toBe(1);
@@ -365,10 +365,10 @@ describe('Navigation UI Component', () => {
365365
it('should apply role="heading" to nested dropdown trigger button while on desktop', () => {
366366
fixture.detectChanges();
367367
const nestedTriggerButton = fixture.debugElement.query(
368-
By.css('button[aria-controls="Child 1"]')
368+
By.css('button[aria-controls="child-1"]')
369369
).nativeElement;
370370
const rootTriggerButton = fixture.debugElement.query(
371-
By.css('button[aria-controls="Root 1"]')
371+
By.css('button[aria-controls="root-1"]')
372372
).nativeElement;
373373

374374
expect(nestedTriggerButton.getAttribute('role')).toEqual('heading');
@@ -385,7 +385,7 @@ describe('Navigation UI Component', () => {
385385
const spy = spyOn(navigationComponent, 'toggleOpen');
386386
const spaceEvent = new KeyboardEvent('keydown', { code: 'Space' });
387387
const dropDownButton = element.query(
388-
By.css('button[aria-controls="Sub child 1"]')
388+
By.css('button[aria-controls="sub-child-1"]')
389389
).nativeElement;
390390
Object.defineProperty(spaceEvent, 'target', { value: dropDownButton });
391391

@@ -399,7 +399,7 @@ describe('Navigation UI Component', () => {
399399
const spy = spyOn(firstChild.nativeElement, 'focus');
400400
const spaceEvent = new KeyboardEvent('keydown', { code: 'Space' });
401401
const dropDownButton = element.query(
402-
By.css('button[aria-controls="Sub child 1"]')
402+
By.css('button[aria-controls="sub-child-1"]')
403403
).nativeElement;
404404
Object.defineProperty(spaceEvent, 'target', { value: dropDownButton });
405405

@@ -420,7 +420,7 @@ describe('Navigation UI Component', () => {
420420
});
421421
const spaceEvent = new KeyboardEvent('keydown', { code: 'Space' });
422422
const dropDownButton = element.query(
423-
By.css('button[aria-controls="Sub child 1"]')
423+
By.css('button[aria-controls="sub-child-1"]')
424424
).nativeElement;
425425
Object.defineProperty(spaceEvent, 'target', { value: dropDownButton });
426426
Object.defineProperty(arrowDownEvent, 'target', {
@@ -471,22 +471,21 @@ describe('Navigation UI Component', () => {
471471
const childNode = rootNode?.children?.[0];
472472
const rootTitle = rootNode?.title;
473473
const childTitle = childNode?.title;
474+
const sanitizedRootTitle =
475+
navigationComponent.getSanitizedTitle(rootTitle);
476+
const sanitizedChildTitle =
477+
navigationComponent.getSanitizedTitle(childTitle);
478+
474479
fixture.detectChanges();
475480
const nestedTriggerButton = fixture.debugElement.query(
476-
By.css(`button[aria-label="${childTitle}"]`)
481+
By.css(`button[aria-label="${sanitizedRootTitle}"]`)
477482
).nativeElement;
478483
const rootTriggerButton = fixture.debugElement.query(
479-
By.css(`button[aria-label="${rootTitle}"]`)
484+
By.css(`button[aria-label="${sanitizedChildTitle}"]`)
480485
).nativeElement;
481486

482487
expect(nestedTriggerButton).toBeDefined();
483488
expect(rootTriggerButton).toBeDefined();
484-
expect(rootTriggerButton.getAttribute('title')).toEqual(
485-
`navigation.menuButonTitle title:${rootTitle}`
486-
);
487-
expect(nestedTriggerButton.getAttribute('title')).toEqual(
488-
`navigation.menuButonTitle title:${childTitle}`
489-
);
490489
});
491490
});
492491
});

‎projects/storefrontlib/cms-components/navigation/navigation/navigation-ui.component.ts

+14
Original file line numberDiff line numberDiff line change
@@ -397,4 +397,18 @@ export class NavigationUIComponent implements OnInit, OnDestroy {
397397
}
398398
return depth > 0 && !node?.children ? -1 : 0;
399399
}
400+
401+
/**
402+
* // Replace spaces with hyphens and convert to lowercase
403+
*/
404+
getSanitizedTitle(title: string | undefined): string | null {
405+
return title ? title.replace(/\s+/g, '-').toLowerCase() : null;
406+
}
407+
408+
/**
409+
* Returns the value for the `aria-control` and the `aria-label` attribute of a button.
410+
*/
411+
getAriaLabelAndControl(node: NavigationNode): string | null {
412+
return this.getSanitizedTitle(node.title) || null;
413+
}
400414
}

0 commit comments

Comments
 (0)