refactor: Drop focus ring controller from carousel

Author: rkaraivanov

src/components/carousel/carousel.ts

@@ -12,7 +12,6 @@ import { styleMap } from 'lit/directives/style-map.js';
 import { themes } from '../../theming/theming-decorator.js';
 import IgcButtonComponent from '../button/button.js';
 import { carouselContext } from '../common/context.js';
-import { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';
 import {
   type SwipeEvent,
   addGesturesController,
@@ -105,12 +104,12 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
 
   private static readonly increment = createCounter();
   private readonly _carouselId = `igc-carousel-${IgcCarouselComponent.increment()}`;
-  private readonly _focusRingManager = addKeyboardFocusRing(this);
 
   private readonly _internals: ElementInternals;
   private _lastInterval!: ReturnType<typeof setInterval> | null;
   private _hasKeyboardInteractionOnIndicators = false;
   private _hasMouseStop = false;
+  private _hasInnerFocus = false;
 
   private _context = new ContextProvider(this, {
     context: carouselContext,
@@ -328,6 +327,13 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
 
     this.addEventListener('pointerenter', this.handlePointerEnter);
     this.addEventListener('pointerleave', this.handlePointerLeave);
+    this.addEventListener('pointerdown', () => {
+      this._hasInnerFocus = false;
+    });
+
+    this.addEventListener('keyup', () => {
+      this._hasInnerFocus = true;
+    });
 
     addGesturesController(this, {
       ref: this._carouselSlidesContainerRef,
@@ -382,22 +388,22 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
 
   private handlePointerEnter(): void {
     this._hasMouseStop = true;
-    if (this._focusRingManager.focused) {
+    if (this._hasInnerFocus) {
       return;
     }
     this.handlePauseOnInteraction();
   }
 
   private handlePointerLeave(): void {
     this._hasMouseStop = false;
-    if (this._focusRingManager.focused) {
+    if (this._hasInnerFocus) {
       return;
     }
     this.handlePauseOnInteraction();
   }
 
   private handleFocusIn(): void {
-    if (this._focusRingManager.focused || this._hasMouseStop) {
+    if (this._hasInnerFocus || this._hasMouseStop) {
       return;
     }
     this.handlePauseOnInteraction();
@@ -410,8 +416,12 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
       return;
     }
 
-    if (this._focusRingManager.focused && !this._hasMouseStop) {
-      this.handlePauseOnInteraction();
+    if (this._hasInnerFocus) {
+      this._hasInnerFocus = false;
+
+      if (!this._hasMouseStop) {
+        this.handlePauseOnInteraction();
+      }
     }
   }
 

src/components/common/controllers/focus-ring.ts

@@ -6,6 +6,16 @@ import type { ReactiveController, ReactiveControllerHost } from 'lit';
  *
  * By default the class attaches a keyup event handler on the component host and will update its keyboard focus
  * state based on it.
+ *
+ * **Important Note:** This controller is designed for use with **atomic web components** that represent single,
+ * interactive elements (e.g., buttons, form fields, interactive icons). It helps these components correctly
+ * display a focus indicator *only* when keyboard navigation is occurring, improving accessibility without
+ * visual clutter during mouse or touch interactions.
+ *
+ * **Do not use this controller as a general-purpose shortcut for managing focus state in complex components or layouts.**
+ * Misusing it in this way can lead to incorrect focus ring behavior, accessibility issues, and make your
+ * application harder to maintain. For managing focus within larger, composite components, consider alternative
+ * strategies like ARIA attributes, managing `tabindex`, or a bespoke implementation if needed.
  */
 class KeyboardFocusRingController implements ReactiveController {
   private static readonly _events = [
@@ -24,7 +34,7 @@ class KeyboardFocusRingController implements ReactiveController {
     return this._isKeyboardFocused;
   }
 
-  constructor(readonly host: ReactiveControllerHost & HTMLElement) {
+  constructor(host: ReactiveControllerHost & HTMLElement) {
     this._host = host;
     host.addController(this);
   }
@@ -54,6 +64,9 @@ export type { KeyboardFocusRingController };
 
 /**
  * Adds a {@link KeyboardFocusRingController} responsible for managing keyboard focus state.
+ *
+ * This utility function is intended for use with **atomic web components** that require
+ * dynamic focus ring visibility based on keyboard interaction.
  */
 export function addKeyboardFocusRing(
   host: ReactiveControllerHost & HTMLElement