fix: update focus methods to consistently use setFocus utility across components

deleonio · deleonio · commit 18b7a60e94d3 · 2026-03-26T17:34:12.000+01:00
diff --git a/packages/components/src/components/badge/shadow.tsx b/packages/components/src/components/badge/shadow.tsx
@@ -8,7 +8,7 @@ import { nonce } from '../../utils/dev.utils';
 import type { JSX } from '@stencil/core';
 import { KolButtonWcTag } from '../../core/component-names';
 import clsx from '../../utils/clsx';
-import { delegateFocus } from '../../utils/element-focus';
+import { delegateFocus, setFocus } from '../../utils/element-focus';
 featureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);
 
 /**
@@ -58,7 +58,7 @@ export class KolBadge implements BadgeAPI, FocusableElement {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		return delegateFocus(this.host!, () => setFocus(this.smartButtonRef!);
+		return delegateFocus(this.host!, () => setFocus(this.smartButtonRef!));
 	}
 
 	public render(): JSX.Element {
diff --git a/packages/components/src/components/button-link/shadow.tsx b/packages/components/src/components/button-link/shadow.tsx
@@ -19,7 +19,7 @@ import type {
 	TooltipAlignPropType,
 	VariantClassNamePropType,
 } from '../../schema';
-import { delegateFocus } from '../../utils/element-focus';
+import { delegateFocus, setFocus } from '../../utils/element-focus';
 
 /**
  * The **ButtonLink** component is semantically a button but has the appearance of a link. All relevant properties of the Button component are adopted and extended with the design-defining properties of a link.
@@ -63,7 +63,7 @@ export class KolButtonLink implements ButtonLinkProps, FocusableElement {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		return delegateFocus(this.host!, () => setFocus(this.buttonWcRef!);
+		return delegateFocus(this.host!, () => setFocus(this.buttonWcRef!));
 	}
 
 	public render(): JSX.Element {
diff --git a/packages/components/src/components/button/component.tsx b/packages/components/src/components/button/component.tsx
@@ -12,6 +12,7 @@ import type {
 	ButtonTypePropType,
 	CustomClassPropType,
 	DisabledPropType,
+	FocusableElement,
 	HideLabelPropType,
 	IconsPropType,
 	IdPropType,
@@ -67,7 +68,7 @@ import { AssociatedInputController } from '../input-adapter-leanup/associated.co
 	tag: 'kol-button-wc',
 	shadow: false,
 })
-export class KolButtonWc implements ButtonAPI {
+export class KolButtonWc implements ButtonAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolButtonWcElement;
 	private buttonRef?: HTMLButtonElement;
 	private tooltipRef?: HTMLKolTooltipWcElement;
diff --git a/packages/components/src/components/button/shadow.tsx b/packages/components/src/components/button/shadow.tsx
@@ -19,7 +19,7 @@ import type {
 	SyncValueBySelectorPropType,
 	TooltipAlignPropType,
 } from '../../schema';
-import { delegateFocus } from '../../utils/element-focus';
+import { delegateFocus, setFocus } from '../../utils/element-focus';
 
 /**
  * The **Button** component is used to present users with action options and arrange them in a clear hierarchy. It helps users find the most important actions on a page or within a viewport and allows them to execute those actions. The button label clearly indicates which action will be triggered. Buttons allow users to confirm a change, complete steps in a task, or make decisions.
@@ -55,7 +55,7 @@ export class KolButton implements ButtonProps, FocusableElement {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		return delegateFocus(this.host!, () => setFocus(this.buttonWcRef!);
+		return delegateFocus(this.host!, () => setFocus(this.buttonWcRef!));
 	}
 
 	public render(): JSX.Element {
diff --git a/packages/components/src/components/details/shadow.tsx b/packages/components/src/components/details/shadow.tsx
@@ -3,7 +3,7 @@ import KolCollapsibleFc, { type CollapsibleProps } from '../../functional-compon
 import type { DetailsAPI, DetailsCallbacksPropType, DetailsStates, DisabledPropType, FocusableElement, HeadingLevel, LabelPropType } from '../../schema';
 import { validateDetailsCallbacks, validateDisabled, validateLabel, validateOpen } from '../../schema';
 import { nonce } from '../../utils/dev.utils';
-import { delegateFocus } from '../../utils/element-focus';
+import { delegateFocus, setFocus } from '../../utils/element-focus';
 import { dispatchDomEvent, KolEvent } from '../../utils/events';
 import { watchHeadingLevel } from '../heading/validation';
 
@@ -40,7 +40,7 @@ export class KolDetails implements DetailsAPI, FocusableElement {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		return delegateFocus(this.host!, () => setFocus(this.buttonWcRef!);
+		return delegateFocus(this.host!, () => setFocus(this.buttonWcRef!));
 	}
 
 	private toggleTimeout?: ReturnType<typeof setTimeout>;
diff --git a/packages/components/src/components/input-adapter-leanup/associated.controller.ts b/packages/components/src/components/input-adapter-leanup/associated.controller.ts
@@ -93,7 +93,7 @@ export class AssociatedInputController implements Watches {
 		while (host?.shadowRoot === null && host !== document.body) {
 			host = host?.parentNode as HTMLElement;
 			if ((host as unknown as ShadowRoot).host) {
-				host = (host as unknown as ShadowRoot).host;
+				host = (host as unknown as ShadowRoot).host as HTMLElement;
 			}
 		}
 		return host;
diff --git a/packages/components/src/components/link-button/shadow.tsx b/packages/components/src/components/link-button/shadow.tsx
@@ -19,7 +19,7 @@ import type {
 	ShortKeyPropType,
 	TooltipAlignPropType,
 } from '../../schema';
-import { delegateFocus } from '../../utils/element-focus';
+import { delegateFocus, setFocus } from '../../utils/element-focus';
 
 /**
  * The **LinkButton** component is semantically a link but has the appearance of a button. All relevant properties of the Link component are adopted and extended with the design-defining properties of a button.
@@ -46,7 +46,7 @@ export class KolLinkButton implements LinkButtonProps, FocusableElement {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		return delegateFocus(this.host!, () => setFocus(this.linkWcRef!);
+		return delegateFocus(this.host!, () => setFocus(this.linkWcRef!));
 	}
 
 	public render(): JSX.Element {
diff --git a/packages/components/src/components/link/component.tsx b/packages/components/src/components/link/component.tsx
@@ -12,6 +12,7 @@ import type {
 	CustomClassPropType,
 	DisabledPropType,
 	DownloadPropType,
+	FocusableElement,
 	HideLabelPropType,
 	HrefPropType,
 	InlinePropType,
@@ -52,8 +53,8 @@ import {
 	validateVariantClassName,
 } from '../../schema';
 import { validateTabIndex } from '../../schema/props/tab-index';
-import { dispatchDomEvent, KolEvent } from '../../utils/events';
 import { setFocus } from '../../utils/element-focus';
+import { dispatchDomEvent, KolEvent } from '../../utils/events';
 import type { UnsubscribeFunction } from './ariaCurrentService';
 import { onLocationChange } from './ariaCurrentService';
 
@@ -69,7 +70,7 @@ import clsx from '../../utils/clsx';
 	tag: 'kol-link-wc',
 	shadow: false,
 })
-export class KolLinkWc implements InternalLinkAPI {
+export class KolLinkWc implements InternalLinkAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolLinkElement;
 
 	private anchorRef?: HTMLAnchorElement;
diff --git a/packages/components/src/components/link/shadow.tsx b/packages/components/src/components/link/shadow.tsx
@@ -20,7 +20,7 @@ import type {
 	TooltipAlignPropType,
 	VariantClassNamePropType,
 } from '../../schema';
-import { delegateFocus } from '../../utils/element-focus';
+import { delegateFocus, setFocus } from '../../utils/element-focus';
 
 @Component({
 	tag: 'kol-link',
@@ -42,7 +42,7 @@ export class KolLink implements LinkProps, FocusableElement {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		return delegateFocus(this.host!, () => setFocus(this.linkWcRef!);
+		return delegateFocus(this.host!, () => setFocus(this.linkWcRef!));
 	}
 
 	public render(): JSX.Element {
diff --git a/packages/components/src/components/popover-button/component.tsx b/packages/components/src/components/popover-button/component.tsx
@@ -10,6 +10,7 @@ import type {
 	ButtonTypePropType,
 	ButtonVariantPropType,
 	CustomClassPropType,
+	FocusableElement,
 	IconsPropType,
 	IdPropType,
 	InlinePropType,
@@ -38,7 +39,7 @@ import { setFocus } from '../../utils/element-focus';
 	shadow: false,
 })
 // class implementing PopoverButtonProps and not API because we don't want to repeat the entire state and validation for button props
-export class KolPopoverButtonWc implements PopoverButtonProps {
+export class KolPopoverButtonWc implements PopoverButtonProps, FocusableElement {
 	private refButton?: HTMLKolButtonWcElement;
 	private readonly popoverCtrl = new PopoverController();
 	private popoverElement?: HTMLDivElement;
diff --git a/packages/components/src/components/popover-button/shadow.tsx b/packages/components/src/components/popover-button/shadow.tsx
@@ -18,7 +18,7 @@ import type {
 	TooltipAlignPropType,
 } from '../../schema';
 import type { PopoverButtonProps } from '../../schema/components/popover-button';
-import { delegateFocus } from '../../utils/element-focus';
+import { delegateFocus, setFocus } from '../../utils/element-focus';
 
 /**
  * A button that toggles the visibility of a popover overlay containing arbitrary content.
@@ -65,7 +65,7 @@ export class KolPopoverButton implements PopoverButtonProps, FocusableElement {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		return delegateFocus(this.host!, () => setFocus(this.ref!);
+		return delegateFocus(this.host!, () => setFocus(this.ref!));
 	}
 
 	public render(): JSX.Element {
diff --git a/packages/components/src/components/select/component.tsx b/packages/components/src/components/select/component.tsx
@@ -4,6 +4,7 @@ import clsx from '../../utils/clsx';
 
 import type {
 	DisabledPropType,
+	FocusableElement,
 	HideLabelPropType,
 	HideMsgPropType,
 	HintPropType,
@@ -41,7 +42,7 @@ import { SelectController } from './controller';
 	tag: 'kol-select-wc',
 	shadow: false,
 })
-export class KolSelectWc implements SelectAPI {
+export class KolSelectWc implements SelectAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolSelectWcElement;
 	private selectRef?: HTMLSelectElement;
 
diff --git a/packages/components/src/components/select/shadow.tsx b/packages/components/src/components/select/shadow.tsx
@@ -19,7 +19,7 @@ import type {
 } from '../../schema';
 
 import { KolSelectWcTag } from '../../core/component-names';
-import { delegateFocus } from '../../utils/element-focus';
+import { delegateFocus, setFocus } from '../../utils/element-focus';
 
 /**
  * @slot - The label of the input field.
@@ -52,7 +52,7 @@ export class KolSelect implements SelectProps, FocusableElement {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		return delegateFocus(this.host!, () => setFocus(this.selectWcRef!);
+		return delegateFocus(this.host!, () => setFocus(this.selectWcRef!));
 	}
 
 	public render(): JSX.Element {
diff --git a/packages/components/src/components/skip-nav/shadow.tsx b/packages/components/src/components/skip-nav/shadow.tsx
@@ -1,8 +1,8 @@
 import { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';
-import type { LabelPropType, LinkProps, SkipNavAPI, SkipNavStates, Stringified } from '../../schema';
+import type { FocusableElement, LabelPropType, LinkProps, SkipNavAPI, SkipNavStates, Stringified } from '../../schema';
 import { validateLabel } from '../../schema';
 
-import { delegateFocus } from '../../utils/element-focus';
+import { delegateFocus, setFocus } from '../../utils/element-focus';
 import { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';
 import { watchNavLinks } from '../nav/validation';
 
@@ -19,7 +19,7 @@ import { KolLinkWcTag } from '../../core/component-names';
 	},
 	shadow: true,
 })
-export class KolSkipNav implements SkipNavAPI {
+export class KolSkipNav implements SkipNavAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolSkipNavElement;
 	private firstLinkRef?: HTMLKolLinkWcElement;
 
@@ -44,7 +44,7 @@ export class KolSkipNav implements SkipNavAPI {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		return delegateFocus(this.host!, () => setFocus(this.firstLinkRef!);
+		return delegateFocus(this.host!, () => setFocus(this.firstLinkRef!));
 	}
 
 	/**
diff --git a/packages/components/src/components/split-button/shadow.tsx b/packages/components/src/components/split-button/shadow.tsx
@@ -8,6 +8,7 @@ import type {
 	ButtonTypePropType,
 	ButtonVariantPropType,
 	CustomClassPropType,
+	FocusableElement,
 	IconsPropType,
 	LabelWithExpertSlotPropType,
 	ShortKeyPropType,
@@ -21,7 +22,7 @@ import type {
 import { KolButtonWcTag, KolPopoverButtonWcTag } from '../../core/component-names';
 import { translate } from '../../i18n';
 import clsx from '../../utils/clsx';
-import { delegateFocus } from '../../utils/element-focus';
+import { delegateFocus, setFocus } from '../../utils/element-focus';
 
 /**
  * The **SplitButton** component can be used to display a two-part button. The primary button is typically used for
@@ -36,7 +37,7 @@ import { delegateFocus } from '../../utils/element-focus';
 	},
 	shadow: true,
 })
-export class KolSplitButton implements SplitButtonProps /*, SplitButtonAPI*/ {
+export class KolSplitButton implements SplitButtonProps, FocusableElement /*, SplitButtonAPI*/ {
 	@Element() private readonly host?: HTMLKolSplitButtonElement;
 	private primaryButtonWcRef?: HTMLKolButtonWcElement;
 	private popoverButtonRef?: HTMLKolPopoverButtonWcElement;
@@ -63,7 +64,7 @@ export class KolSplitButton implements SplitButtonProps /*, SplitButtonAPI*/ {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		return delegateFocus(this.host!, () => setFocus(this.primaryButtonWcRef!);
+		return delegateFocus(this.host!, () => setFocus(this.primaryButtonWcRef!));
 	}
 
 	private readonly clickButtonHandler = {
diff --git a/packages/components/src/components/tabs/shadow.tsx b/packages/components/src/components/tabs/shadow.tsx
@@ -32,7 +32,7 @@ import { KeyboardKey } from '../../schema/enums';
 import type { HasCreateButtonPropType } from '../../schema/props/has-create-button';
 import { validateHasCreateButton } from '../../schema/props/has-create-button';
 import clsx from '../../utils/clsx';
-import { delegateFocus } from '../../utils/element-focus';
+import { delegateFocus, setFocus } from '../../utils/element-focus';
 import { dispatchDomEvent, KolEvent } from '../../utils/events';
 // https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html
 
@@ -163,7 +163,7 @@ export class KolTabs implements TabsAPI, FocusableElement {
 	 */
 	@Method()
 	public async focus(): Promise<void> {
-		return delegateFocus(this.host!, () => setFocus(this.currentTabButtonRef!);
+		return delegateFocus(this.host!, () => setFocus(this.currentTabButtonRef!));
 	}
 
 	private readonly setCurrentTabButtonRef = (ref?: HTMLKolButtonWcElement) => {
diff --git a/packages/components/src/components/toolbar/shadow.tsx b/packages/components/src/components/toolbar/shadow.tsx
@@ -7,7 +7,7 @@ import { validateLabel, validateToolbarItems } from '../../schema';
 import { KeyboardKey } from '../../schema/enums';
 import type { OrientationPropType } from '../../schema/props/orientation';
 import { validateOrientation } from '../../schema/props/orientation';
-import { delegateFocus } from '../../utils/element-focus';
+import { delegateFocus, setFocus } from '../../utils/element-focus';
 
 @Component({
 	tag: 'kol-toolbar',
@@ -35,7 +35,7 @@ export class KolToolbar implements ToolbarAPI, FocusableElement {
 	public async focus(): Promise<void> {
 		const firstEnabledItem = this.indexToElement.get(this.currentIndex);
 		if (firstEnabledItem) {
-			return delegateFocus(this.host!, () => setFocus(firstEnabledItem!);
+			return delegateFocus(this.host!, () => setFocus(firstEnabledItem));
 		}
 	}
 
diff --git a/packages/components/src/components/tree/component.tsx b/packages/components/src/components/tree/component.tsx
@@ -2,7 +2,7 @@ import type { JSX } from '@stencil/core';
 import { Component, Element, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';
 
 import { KolTreeItemTag, KolTreeTag } from '../../core/component-names';
-import type { LabelPropType, TreeAPI, TreeStates } from '../../schema';
+import type { FocusableElement, LabelPropType, TreeAPI, TreeStates } from '../../schema';
 import { validateLabel } from '../../schema';
 
 /**
@@ -12,7 +12,7 @@ import { validateLabel } from '../../schema';
 	tag: 'kol-tree-wc',
 	shadow: false,
 })
-export class KolTreeWc implements TreeAPI {
+export class KolTreeWc implements TreeAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolTreeWcElement;
 
 	@State() public state: TreeStates = {
diff --git a/packages/components/src/components/tree/shadow.tsx b/packages/components/src/components/tree/shadow.tsx
@@ -3,7 +3,7 @@ import { Component, Element, h, Method, Prop } from '@stencil/core';
 
 import { KolTreeWcTag } from '../../core/component-names';
 import type { FocusableElement, LabelPropType, TreeProps } from '../../schema';
-import { delegateFocus } from '../../utils/element-focus';
+import { delegateFocus, setFocus } from '../../utils/element-focus';
 
 @Component({
 	tag: 'kol-tree',
@@ -30,7 +30,7 @@ export class KolTree implements TreeProps, FocusableElement {
 	 */
 	@Method()
 	public async focus() {
-		return delegateFocus(this.host!, () => setFocus(this.treeWcRef!);
+		return delegateFocus(this.host!, () => setFocus(this.treeWcRef!));
 	}
 
 	public render(): JSX.Element {

Original file line number	Diff line number	Diff line change
`@@ -93,7 +93,7 @@ export class AssociatedInputController implements Watches {`
`93`	`93`	`while (host?.shadowRoot === null && host !== document.body) {`
`94`	`94`	`host = host?.parentNode as HTMLElement;`
`95`	`95`	`if ((host as unknown as ShadowRoot).host) {`
`96`		`- host = (host as unknown as ShadowRoot).host;`
	`96`	`+ host = (host as unknown as ShadowRoot).host as HTMLElement;`
`97`	`97`	`}`
`98`	`98`	`}`
`99`	`99`	`return host;`