From a4625156bcc21310da94b77aa7f6f1778686aeff Mon Sep 17 00:00:00 2001 From: Martin Oppitz Date: Mon, 6 Nov 2023 05:59:43 +0100 Subject: [PATCH] feat: add focus to accordion and details --- .../components/src/components/accordion/component.tsx | 11 +++++++++-- .../src/components/button-link/component.tsx | 4 +--- packages/components/src/components/button/shadow.tsx | 4 +--- .../components/src/components/details/component.tsx | 8 +++++++- .../src/components/input-checkbox/component.tsx | 4 +--- .../src/components/input-radio/component.tsx | 4 +--- .../src/components/link-button/component.tsx | 4 +--- packages/components/src/components/link/shadow.tsx | 4 +--- 8 files changed, 22 insertions(+), 21 deletions(-) diff --git a/packages/components/src/components/accordion/component.tsx b/packages/components/src/components/accordion/component.tsx index 6f77c587c4..859a94b941 100644 --- a/packages/components/src/components/accordion/component.tsx +++ b/packages/components/src/components/accordion/component.tsx @@ -1,6 +1,6 @@ // 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'; @@ -8,6 +8,7 @@ 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'; @@ -32,8 +33,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 ( @@ -45,7 +51,8 @@ export class KolAccordion implements API { > { - 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 index 06c5d856fd..04ebd05421 100644 --- a/packages/components/src/components/button/shadow.tsx +++ b/packages/components/src/components/button/shadow.tsx @@ -25,11 +25,9 @@ import { Props } from './types'; }) 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 index 8a4b3649d9..bc9f444800 100644 --- 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 ( @@ -32,7 +38,7 @@ export class KolDetails implements API { }} onToggle={this.handleToggle} > - (this.summaryElement = element)}> + {this.state._open ? : } {this.state._label} diff --git a/packages/components/src/components/input-checkbox/component.tsx b/packages/components/src/components/input-checkbox/component.tsx index 76ba26b050..ce9f271693 100644 --- a/packages/components/src/components/input-checkbox/component.tsx +++ b/packages/components/src/components/input-checkbox/component.tsx @@ -30,11 +30,9 @@ import { API, InputCheckboxIconsProp, InputCheckboxVariant, States } from './typ }) 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 index 2d6b74c18b..58ec49feed 100644 --- a/packages/components/src/components/input-radio/component.tsx +++ b/packages/components/src/components/input-radio/component.tsx @@ -31,11 +31,9 @@ import { API, States } from './types'; }) 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 index 4925cc503a..06322f8766 100644 --- a/packages/components/src/components/link-button/component.tsx +++ b/packages/components/src/components/link-button/component.tsx @@ -24,11 +24,9 @@ import { Props } from './types'; }) 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 index d9112a1523..2458ab9e67 100644 --- a/packages/components/src/components/link/shadow.tsx +++ b/packages/components/src/components/link/shadow.tsx @@ -24,11 +24,9 @@ import { LinkProps } from '../link/types'; }) 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 {