fix: fix searchbox carousel navigation behaviour#21141
Conversation
Merge Checks Failed |
spartacus
|
||||||||||||||||||||||||||||
| Project |
spartacus
|
| Branch Review |
CXCDS-17219
|
| Run status |
|
| Run duration | 03m 24s |
| Commit |
|
| Committer | Konrad Dzikowski |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
3
|
Pending
|
0
|
Skipped
|
0
|
Passing
|
101
|
| View all changes introduced in this branch ↗︎ | |
Co-authored-by: Cursor <cursoragent@cursor.com>
| [template]="carouselItem" | ||
| itemWidth="160px" | ||
| (keybordEvent)="carouselEventPropagator($event)" | ||
| (mousedown)="preventDefault($event)" |
There was a problem hiding this comment.
Actually this can be breaking change for customers, example:
Customer registered event listener, something like: this.el.nativeElement.addEventListener('focus', this.onFocus, true); and implement some custom logic on focus.
When you are adding (mousedown)="preventDefault($event)" it will not be triggered.
There was a problem hiding this comment.
@rmch91 That's true, but the question that comes to mind is why would he do it in such a complicated way? If he extends the class, that forces him to have its own HTML structure (which will not be automatically updated from here). The fact that we cannot fix the behavior in his code - it's beyond our control if there is any customization, the question is only whether we are able to break something in his code/ui behavior this way?
There was a problem hiding this comment.
User can do it without any customization of the component. just register an event listener on cx-carousel in app.component and apply his own logic.
After this change it will not work. So seems that it is breaking
There was a problem hiding this comment.
I've made the fix opt-in via a preventNavigationFocus input flag (defaults to false), so it's only enabled in search-box and doesn't affect existing carousels or customer event listeners.
…afari searchbox blur issue
| a11yFacetFilterByLabel: false, | ||
| removeDuplicatedOrderHistoryHeader: false, | ||
| a11yCardNotificationMessage: false, | ||
| a11yCarouselPreventNavigationFocus: true, |
There was a problem hiding this comment.
As far as I know, for the introduction of toggles to make sense, they should be introduced with a false value. Some time after their introduction, they remain in place: first, they are changed to true, then, before the release of the next major version, the flags and legacy code are cleared.
| a11yCarouselPreventNavigationFocus: true, | |
| a11yCarouselPreventNavigationFocus: false, |
| <button | ||
| *cxFeature="'!a11yCarouselPreventNavigationFocus'" | ||
| class="previous" | ||
| (click)="onPreviousClick($event, size)" |
There was a problem hiding this comment.
Old block should remain unchanged
| (click)="onPreviousClick($event, size)" | |
| (click)=" | |
| $event.stopPropagation(); | |
| activeSlide === 0 ? null : (activeSlide = activeSlide - size) | |
| " |
| <button | ||
| *cxFeature="'!a11yCarouselPreventNavigationFocus'" | ||
| class="next" | ||
| (click)="onNextClick($event, size)" |
There was a problem hiding this comment.
Here as well
| (click)="onNextClick($event, size)" | |
| (click)=" | |
| $event.stopPropagation(); | |
| activeSlide > items.length - size - 1 | |
| ? null | |
| : (activeSlide = activeSlide + size) | |
| " |
| * unwanted blur events (e.g., in Safari when carousel is used inside modals or search boxes). | ||
| * Defaults to false to maintain backward compatibility. | ||
| */ | ||
| @Input() preventNavigationFocus = false; |
There was a problem hiding this comment.
Instead of input, you can move inject and logic from parent component here
Merge Checks Failed |
Merge Checks Failed |
…-17219 # Conflicts: # projects/storefrontlib/shared/components/carousel/carousel.component.spec.ts
| * that contain or interact with the carousel, since preventing mousedown default can affect focus behavior. | ||
| * Affects: `CarouselComponent` (when preventNavigationFocus input is true, e.g. in SearchBoxComponent) | ||
| */ | ||
| a11yCarouselPreventNavigationFocus?: boolean; |
There was a problem hiding this comment.
is it really a11y related flag?
There was a problem hiding this comment.
Focus management and predictable keyboard navigation are core a11y concerns, so gating this Safari-specific focus fix behind an a11y* flag is reasonable.
4 participants
Fix Safari searchbox carousel clicks closing results panel by preventing mousedown blur and moving next-slide logic into a reusable handler.