Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: (CXSPA-9005) fix ng-select options issue - <y of x> is conveyed twice #19844

Merged
merged 10 commits into from
Jan 16, 2025
Merged

fix: (CXSPA-9005) fix ng-select options issue - <y of x> is conveyed twice #19844

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a96528b
fix: (CXSPA-9005) fix ng-select options issue - <y of x> is conveyed …
ulates-sap Jan 9, 2025
c260bba
Merge branch 'develop' into feature/CXSPA-9005
uroslates Jan 9, 2025
8115c89
Merge branch 'develop' into feature/CXSPA-9005
uroslates Jan 13, 2025
02ac197
Merge branch 'develop' into feature/CXSPA-9005
uroslates Jan 13, 2025
e51b983
fix: (CXSPA-9005) fix ng-select options issue - <y of x> is conveyed …
ulates-sap Jan 13, 2025
42c1c58
Merge branch 'develop' into feature/CXSPA-9005
uroslates Jan 13, 2025
597b83d
fix: (CXSPA-9005) fix linting issue
ulates-sap Jan 14, 2025
ff6c02c
Merge branch 'develop' into feature/CXSPA-9005
uroslates Jan 15, 2025
0f3aaf3
fix: address PR comments (comment update)
ulates-sap Jan 15, 2025
69b051b
Merge branch 'develop' into feature/CXSPA-9005
uroslates Jan 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions projects/core/src/features-config/feature-toggles/config/feature-toggles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -593,6 +593,8 @@ export interface FeatureTogglesInterface {
/**
* 'NgSelectA11yDirective' will now provide a count of items for each availble option.
* Including this count in aria-label will help screen readers to provide more context to the user.
* Update (since 2211.33): This feature toggle and the logic behind it should be removed
* in next major relase since ng-select now correctly handles aria-label values of select options.
*/
a11yNgSelectOptionsCount?: boolean;

Expand Down
7 changes: 6 additions & 1 deletion projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -380,7 +380,12 @@ if (environment.cpq) {
a11yLinkBtnsToTertiaryBtns: true,
a11yRepeatedPageTitleFix: true,
a11yDeliveryModeRadiogroup: true,
a11yNgSelectOptionsCount: true,
/**
* Defaults to false cause ng-select options ariaLabels are working as expected
* since Spartacus 2211.33
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lets also reference the issue CX-9005 here and in feature-toggles.ts so anybody curious can reference the discussion about this flag.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated comment with reference to the related issue.

* TODO: CXSPA-9005: Remove this flag and related code in next major release
*/
a11yNgSelectOptionsCount: false,
a11yNgSelectCloseDropdownOnEscape: true,
a11yRepeatedCancelOrderError: true,
a11yAddedToCartActiveDialog: true,
Expand Down
18 changes: 15 additions & 3 deletions projects/storefrontlib/shared/components/ng-select-a11y/ng-select-a11y.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,13 @@ import {
Renderer2,
SecurityContext,
} from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { DomSanitizer } from '@angular/platform-browser';
import { NgSelectComponent } from '@ng-select/ng-select';
import { FeatureConfigService, TranslationService } from '@spartacus/core';
import { filter, merge, take } from 'rxjs';
import { BREAKPOINT, BreakpointService } from '../../../layout';
import { NgSelectComponent } from '@ng-select/ng-select';
import { map } from 'rxjs/operators';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { BREAKPOINT, BreakpointService } from '../../../layout';

const ARIA_LABEL = 'aria-label';

Expand All @@ -40,13 +40,21 @@ export class NgSelectA11yDirective implements AfterViewInit {
*/
@Input() cxNgSelectA11y: { ariaLabel?: string; ariaControls?: string };

//TODO: CXSPA-9005: Remove this property in next major release
/**
* @deprecated since 2211.33
*/
protected translationService = inject(TranslationService);
StanislavSukhanov marked this conversation as resolved.
Show resolved Hide resolved
protected domSanitizer = inject(DomSanitizer);
protected selectComponent = inject(NgSelectComponent);
protected destroyRef = inject(DestroyRef);
private featureConfigService = inject(FeatureConfigService);

@HostListener('open')
//TODO: CXSPA-9005: Remove this method in next major release
/**
* @deprecated since 2211.33
*/
onOpen() {
if (!this.featureConfigService?.isEnabled('a11yNgSelectOptionsCount')) {
return;
Expand Down Expand Up @@ -138,6 +146,10 @@ export class NgSelectA11yDirective implements AfterViewInit {
}
}

//TODO: CXSPA-9005: Remove this method in next major release
/**
* @deprecated since 2211.33
*/
appendAriaLabelToOptions(
_changes: MutationRecord[],
observerInstance: MutationObserver
Expand Down
Loading