refactor(carousel): simplify pointer/focus event handlers

Author: RivaIvanova

src/components/carousel/carousel.spec.ts

@@ -16,7 +16,6 @@ import {
   enterKey,
   homeKey,
   spaceBar,
-  tabKey,
 } from '../common/controllers/key-bindings.js';
 import { defineComponents } from '../common/definitions/defineComponents.js';
 import {
@@ -713,18 +712,18 @@ describe('Carousel', () => {
         expect(carousel.isPaused).to.be.true;
         expect(divContainer.ariaLive).to.equal('polite');
 
-        // focus with keyboard
-        simulateKeyboard(prevButton, tabKey);
+        // focus a focusable element
+        carousel.dispatchEvent(new FocusEvent('focusin'));
         carousel.dispatchEvent(new PointerEvent('pointerleave'));
         await elementUpdated(carousel);
 
-        // keyboard focus/interaction is present
+        // element focus/interaction is present
         // -> should not start rotation on pointerleave
         expect(carousel.isPlaying).to.be.false;
         expect(carousel.isPaused).to.be.true;
         expect(divContainer.ariaLive).to.equal('polite');
 
-        // loose keyboard focus
+        // loose focus
         carousel.dispatchEvent(new PointerEvent('pointerdown'));
         await elementUpdated(carousel);
 
@@ -765,8 +764,8 @@ describe('Carousel', () => {
         expect(carousel.isPaused).to.be.true;
         expect(carousel.current).to.equal(0);
 
-        // focus on next button/focusable element
-        nextButton.dispatchEvent(new FocusEvent('focusin', { bubbles: true }));
+        // focus a focusable element
+        carousel.dispatchEvent(new FocusEvent('focusin'));
         await elementUpdated(carousel);
 
         // hover out of the carousel
@@ -781,7 +780,7 @@ describe('Carousel', () => {
         expect(carousel.isPaused).to.be.true;
         expect(carousel.current).to.equal(0);
 
-        nextButton.dispatchEvent(new FocusEvent('focusout', { bubbles: true }));
+        carousel.dispatchEvent(new FocusEvent('focusout'));
         await elementUpdated(carousel);
 
         await clock.tickAsync(200);

src/components/carousel/carousel.ts

@@ -105,11 +105,11 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
   private static readonly increment = createCounter();
   private readonly _carouselId = `igc-carousel-${IgcCarouselComponent.increment()}`;
 
+  private _paused = false;
   private _lastInterval!: ReturnType<typeof setInterval> | null;
   private _hasKeyboardInteractionOnIndicators = false;
-  private _hasMouseStop = false;
-  private _hasKeyboardFocus = false;
-  private _hasMouseFocus = false;
+  private _hasPointerInteraction = false;
+  private _hasInnerFocus = false;
 
   private _context = new ContextProvider(this, {
     context: carouselContext,
@@ -152,9 +152,6 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
   @state()
   private _playing = false;
 
-  @state()
-  private _paused = false;
-
   private _observerCallback({
     changes: { added, attributes },
   }: MutationControllerParams<IgcCarouselSlideComponent>) {
@@ -330,14 +327,13 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
 
     addThemingController(this, all);
 
-    addSafeEventListener(this, 'pointerenter', this.handlePointerEnter);
-    addSafeEventListener(this, 'pointerleave', this.handlePointerLeave);
+    addSafeEventListener(this, 'pointerenter', this.handlePointerInteraction);
+    addSafeEventListener(this, 'pointerleave', this.handlePointerInteraction);
     addSafeEventListener(this, 'pointerdown', () => {
-      this._hasKeyboardFocus = false;
-    });
-    addSafeEventListener(this, 'keyup', () => {
-      this._hasKeyboardFocus = true;
+      this._hasInnerFocus = false;
     });
+    addSafeEventListener(this, 'focusin', this.handleFocusInteraction);
+    addSafeEventListener(this, 'focusout', this.handleFocusInteraction);
 
     addGesturesController(this, {
       ref: this._carouselSlidesContainerRef,
@@ -390,43 +386,27 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
     this.requestUpdate();
   }
 
-  private handlePointerEnter(): void {
-    this._hasMouseStop = true;
-    if (this._hasKeyboardFocus || this._hasMouseFocus) {
-      return;
-    }
-    this.handlePauseOnInteraction();
-  }
-
-  private handlePointerLeave(): void {
-    this._hasMouseStop = false;
-    if (this._hasKeyboardFocus || this._hasMouseFocus) {
-      return;
-    }
-    this.handlePauseOnInteraction();
-  }
+  private handlePointerInteraction(event: PointerEvent): void {
+    this._hasPointerInteraction = event.type === 'pointerenter';
 
-  private handleFocusIn(): void {
-    if (this._hasKeyboardFocus || this._hasMouseStop || this._hasMouseFocus) {
-      this._hasMouseFocus = !this._hasKeyboardFocus && this._hasMouseStop;
-      return;
+    if (!this._hasInnerFocus) {
+      this.handlePauseOnInteraction();
     }
-    this.handlePauseOnInteraction();
   }
 
-  private handleFocusOut(event: FocusEvent): void {
+  private handleFocusInteraction(event: FocusEvent): void {
+    // focusin - element that lost focus
+    // focusout - element that gained focus
     const node = event.relatedTarget as Node;
 
-    if (this.contains(node) || this.renderRoot.contains(node)) {
+    if (this.contains(node)) {
       return;
     }
 
-    if (this._hasKeyboardFocus || this._hasMouseFocus) {
-      this._hasKeyboardFocus = this._hasMouseFocus = false;
+    this._hasInnerFocus = event.type === 'focusin';
 
-      if (!this._hasMouseStop) {
-        this.handlePauseOnInteraction();
-      }
+    if (!this._hasPointerInteraction) {
+      this.handlePauseOnInteraction();
     }
   }
 
@@ -791,7 +771,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
 
   protected override render() {
     return html`
-      <section @focusin=${this.handleFocusIn} @focusout=${this.handleFocusOut}>
+      <section>
         ${this.hideNavigation ? nothing : this.navigationTemplate()}
         ${this.hideIndicators || this.showIndicatorsLabel
           ? nothing
@@ -802,7 +782,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
         <div
           ${ref(this._carouselSlidesContainerRef)}
           id=${this._carouselId}
-          aria-live=${this.interval && this.isPlaying ? 'off' : 'polite'}
+          aria-live=${this.interval && this._playing ? 'off' : 'polite'}
         >
           <slot @slotchange=${this.handleSlotChange}></slot>
         </div>