diff --git a/core/src/components.d.ts b/core/src/components.d.ts index a6c8a7032d3..e9c14421181 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -2983,6 +2983,7 @@ export namespace Components { * The mode determines which platform styles to use. */ "mode"?: "ios" | "md"; + "setButtonAriaPosition": (posInSet: number, setSize: number) => Promise; "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 6601efd5b40..98da59cd12b 100644 --- a/core/src/components/segment-button/segment-button.tsx +++ b/core/src/components/segment-button/segment-button.tsx @@ -37,6 +37,10 @@ export class SegmentButton implements ComponentInterface, ButtonInterface { @State() checked = false; + @State() ariaPosInSet?: number; + + @State() ariaSetSize?: number; + /** * The `id` of the segment content. */ @@ -160,8 +164,15 @@ export class SegmentButton implements ComponentInterface, ButtonInterface { } } + /** @internal */ + @Method() + async setButtonAriaPosition(posInSet: number, setSize: number) { + this.ariaPosInSet = posInSet; + this.ariaSetSize = setSize; + } + render() { - const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this; + const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl, ariaPosInSet, ariaSetSize } = this; const mode = getIonMode(this); const hasSegmentColor = () => segmentEl?.color !== undefined; return ( @@ -186,6 +197,8 @@ export class SegmentButton implements ComponentInterface, ButtonInterface { >