feat: add focus to accordion and details (#5535)

public-ui · Nov 6, 2023 · 2d03691 · 2d03691
2 parents dd18f1d + b2e0c3a
commit 2d03691
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 21 deletions.
diff --git a/packages/components/src/components/accordion/component.tsx b/packages/components/src/components/accordion/component.tsx
@@ -1,13 +1,14 @@
 // https://codepen.io/mbxtr/pen/OJPOYg?html-preprocessor=haml
 
-import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';
+import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';
 
 import { HeadingLevel } from '../../types/heading-level';
 import { LabelPropType, validateLabel } from '../../types/props/label';
 import { OpenPropType, validateOpen } from '../../types/props/open';
 import { featureHint } from '../../utils/a11y.tipps';
 import { nonce } from '../../utils/dev.utils';
 import { setState } from '../../utils/prop.validators';
+import { propagateFocus } from '../../utils/reuse';
 import { watchHeadingLevel } from '../heading/validation';
 import { API, KoliBriAccordionCallbacks, States } from './types';
 
@@ -30,8 +31,13 @@ featureHint(`[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.`);
 	shadow: true,
 })
 export class KolAccordion implements API {
+	@Element() private readonly host?: HTMLKolDetailsElement;
 	private readonly nonce = nonce();
 
+	private readonly catchRef = (ref?: HTMLKolButtonWcElement) => {
+		propagateFocus(this.host, ref);
+	};
+
 	public render(): JSX.Element {
 		return (
 			<Host>
@@ -43,7 +49,8 @@ export class KolAccordion implements API {
 				>
 					<kol-heading-wc _label="" _level={this.state._level}>
 						<kol-button-wc
-							// slot="expert"
+							ref={this.catchRef}
+							slot="expert"
 							_ariaControls={this.nonce}
 							_ariaExpanded={this.state._open}
 							_icons={this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add'}

diff --git a/packages/components/src/components/button-link/component.tsx b/packages/components/src/components/button-link/component.tsx
@@ -24,11 +24,9 @@ import { AccessKeyPropType } from '../../types/props/access-key';
 })
 export class KolButtonLink implements Props {
 	@Element() private readonly host?: HTMLKolButtonLinkElement;
-	private ref?: HTMLKolButtonWcElement;
 
 	private readonly catchRef = (ref?: HTMLKolButtonWcElement) => {
-		this.ref = ref;
-		propagateFocus(this.host, this.ref);
+		propagateFocus(this.host, ref);
 	};
 
 	public render(): JSX.Element {

diff --git a/packages/components/src/components/button/shadow.tsx b/packages/components/src/components/button/shadow.tsx
@@ -24,11 +24,9 @@ import { AccessKeyPropType } from '../../types/props/access-key';
 })
 export class KolButton implements Props {
 	@Element() private readonly host?: HTMLKolButtonElement;
-	private ref?: HTMLKolButtonWcElement;
 
 	private readonly catchRef = (ref?: HTMLKolButtonWcElement) => {
-		this.ref = ref;
-		propagateFocus(this.host, this.ref);
+		propagateFocus(this.host, ref);
 	};
 
 	public render(): JSX.Element {

diff --git a/packages/components/src/components/details/component.tsx b/packages/components/src/components/details/component.tsx
@@ -6,6 +6,7 @@ import { tryToDispatchKoliBriEvent } from '../../utils/events';
 import { setState } from '../../utils/prop.validators';
 import DetailsAnimationController from './DetailsAnimationController';
 import { API, EventCallbacks, States } from './types';
+import { propagateFocus } from '../../utils/reuse';
 
 /**
  * @slot - Der Inhalt, der in der Detailbeschreibung angezeigt wird.
@@ -23,6 +24,11 @@ export class KolDetails implements API {
 	private summaryElement?: HTMLElement;
 	private contentElement?: HTMLElement;
 
+	private readonly catchRef = (ref?: HTMLElement) => {
+		this.summaryElement = ref;
+		propagateFocus(this.host, this.summaryElement);
+	};
+
 	public render(): JSX.Element {
 		return (
 			<Host>
@@ -32,7 +38,7 @@ export class KolDetails implements API {
 					}}
 					onToggle={this.handleToggle}
 				>
-					<summary ref={(element) => (this.summaryElement = element)}>
+					<summary ref={this.catchRef}>
 						<kol-icon _label="" _icons="codicon codicon-chevron-right" class={`icon ${this.state._open ? 'is-open' : ''}`} />
 						<span>{this.state._label}</span>
 					</summary>

diff --git a/packages/components/src/components/input-checkbox/component.tsx b/packages/components/src/components/input-checkbox/component.tsx
@@ -31,11 +31,9 @@ import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey
 })
 export class KolInputCheckbox implements API {
 	@Element() private readonly host?: HTMLKolInputCheckboxElement;
-	private ref?: HTMLInputElement;
 
 	private readonly catchRef = (ref?: HTMLInputElement) => {
-		this.ref = ref;
-		propagateFocus(this.host, this.ref);
+		propagateFocus(this.host, ref);
 	};
 
 	public render(): JSX.Element {

diff --git a/packages/components/src/components/input-radio/component.tsx b/packages/components/src/components/input-radio/component.tsx
@@ -32,11 +32,9 @@ import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey
 })
 export class KolInputRadio implements API {
 	@Element() private readonly host?: HTMLKolInputRadioElement;
-	private ref?: HTMLInputElement;
 
 	private readonly catchRef = (ref?: HTMLInputElement) => {
-		this.ref = ref;
-		propagateFocus(this.host, this.ref);
+		propagateFocus(this.host, ref);
 	};
 
 	public render(): JSX.Element {

diff --git a/packages/components/src/components/link-button/component.tsx b/packages/components/src/components/link-button/component.tsx
@@ -25,11 +25,9 @@ import { AccessKeyPropType } from '../../types/props/access-key';
 })
 export class KolLinkButton implements Props {
 	@Element() private readonly host?: HTMLKolLinkButtonElement;
-	private ref?: HTMLKolLinkWcElement;
 
 	private readonly catchRef = (ref?: HTMLKolLinkWcElement) => {
-		this.ref = ref;
-		propagateFocus(this.host, this.ref);
+		propagateFocus(this.host, ref);
 	};
 
 	public render(): JSX.Element {

diff --git a/packages/components/src/components/link/shadow.tsx b/packages/components/src/components/link/shadow.tsx
@@ -23,11 +23,9 @@ import { AccessKeyPropType } from '../../types/props/access-key';
 })
 export class KolLink implements LinkProps {
 	@Element() private readonly host?: HTMLKolLinkElement;
-	private ref?: HTMLKolLinkWcElement;
 
 	private readonly catchRef = (ref?: HTMLKolLinkWcElement) => {
-		this.ref = ref;
-		propagateFocus(this.host, this.ref);
+		propagateFocus(this.host, ref);
 	};
 
 	public render(): JSX.Element {