diff --git a/core/src/components.d.ts b/core/src/components.d.ts index d78d21b79f..f5f6867991 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -2484,6 +2484,7 @@ export namespace Components { * The mode determines which platform styles to use. */ "mode"?: "ios" | "md"; + "setFocus": () => Promise; /** * The type of the button. */ diff --git a/core/src/components/segment-button/segment-button.tsx b/core/src/components/segment-button/segment-button.tsx index a9a5abbd2b..710af58c3f 100644 --- a/core/src/components/segment-button/segment-button.tsx +++ b/core/src/components/segment-button/segment-button.tsx @@ -1,10 +1,11 @@ import type { ComponentInterface } from '@stencil/core'; -import { Component, Element, Host, Prop, State, forceUpdate, h } from '@stencil/core'; +import { Component, Element, Host, Prop, Method, State, forceUpdate, h } from '@stencil/core'; import { getIonMode } from '../../global/ionic-global'; import type { SegmentButtonLayout } from '../../interface'; import type { ButtonInterface } from '../../utils/element-interface'; -import { addEventListener, removeEventListener } from '../../utils/helpers'; +import type { Attributes } from '../../utils/helpers'; +import { addEventListener, removeEventListener, inheritAttributes } from '../../utils/helpers'; import { hostContext } from '../../utils/theme'; let ids = 0; @@ -26,6 +27,8 @@ let ids = 0; }) export class SegmentButton implements ComponentInterface, ButtonInterface { private segmentEl: HTMLIonSegmentElement | null = null; + private nativeEl: HTMLButtonElement | undefined; + private inheritedAttributes: Attributes = {}; @Element() el!: HTMLElement; @@ -69,6 +72,12 @@ export class SegmentButton implements ComponentInterface, ButtonInterface { } } + componentWillLoad() { + this.inheritedAttributes = { + ...inheritAttributes(this.el, ['aria-label']), + }; + } + private get hasLabel() { return !!this.el.querySelector('ion-label'); } @@ -87,20 +96,26 @@ export class SegmentButton implements ComponentInterface, ButtonInterface { } }; - private get tabIndex() { - return this.checked && !this.disabled ? 0 : -1; + /** + * @internal + * Focuses the native