fix(segment): expose tab position metadata

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<void>;
         "setFocus": () => Promise<void>;
         /**
           * The type of the button.

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 {
       >
         <button
           aria-selected={checked ? 'true' : 'false'}
+          aria-posinset={ariaPosInSet}
+          aria-setsize={ariaSetSize}
           role="tab"
           ref={(el) => (this.nativeEl = el)}
           type={type}

core/src/components/segment/segment.tsx

@@ -190,6 +190,7 @@ export class Segment implements ComponentInterface {
   async componentDidLoad() {
     this.segmentViewEl = this.getSegmentView();
 
+    this.updateButtonAriaPositions();
     this.setCheckedClasses();
 
     /**
@@ -268,6 +269,15 @@ export class Segment implements ComponentInterface {
     return Array.from(this.el.querySelectorAll('ion-segment-button'));
   }
 
+  private updateButtonAriaPositions() {
+    const buttons = this.getButtons();
+    const setSize = buttons.length;
+
+    buttons.forEach((button, index) => {
+      button.setButtonAriaPosition(index + 1, setSize);
+    });
+  }
+
   private get checked() {
     return this.getButtons().find((button) => button.value === this.value);
   }
@@ -634,6 +644,8 @@ export class Segment implements ComponentInterface {
   };
 
   private onSlottedItemsChange = () => {
+    this.updateButtonAriaPositions();
+
     /**
      * When the slotted segment buttons change we need to
      * ensure that the new segment buttons are checked if

core/src/components/segment/test/segment.spec.ts

@@ -3,6 +3,55 @@ import { newSpecPage } from '@stencil/core/testing';
 import { SegmentButton } from '../../segment-button/segment-button';
 import { Segment } from '../segment';
 
+describe('segment button accessibility', () => {
+  const html = `
+    <ion-segment>
+      <ion-segment-button value="day">Day</ion-segment-button>
+      <ion-segment-button value="week">Week</ion-segment-button>
+      <ion-segment-button value="month">Month</ion-segment-button>
+    </ion-segment>
+  `;
+
+  const expectButtonPositions = (segment: HTMLIonSegmentElement, setSize: number) => {
+    const buttons = segment.querySelectorAll('ion-segment-button');
+    expect(buttons.length).toBe(setSize);
+    buttons.forEach((button, index) => {
+      const nativeButton = button.shadowRoot!.querySelector('button')!;
+      expect(nativeButton.getAttribute('role')).toBe('tab');
+      expect(nativeButton.getAttribute('aria-posinset')).toBe(`${index + 1}`);
+      expect(nativeButton.getAttribute('aria-setsize')).toBe(`${setSize}`);
+    });
+  };
+
+  it('should expose the position and count of initially rendered buttons', async () => {
+    const page = await newSpecPage({ components: [Segment, SegmentButton], html });
+
+    expectButtonPositions(page.body.querySelector('ion-segment')!, 3);
+  });
+
+  it('should update positions and count when buttons are added and removed', async () => {
+    const page = await newSpecPage({ components: [Segment, SegmentButton], html });
+    const segment = page.body.querySelector('ion-segment')!;
+    const slot = segment.shadowRoot!.querySelector('slot')!;
+    const button = page.doc.createElement('ion-segment-button');
+    button.value = 'year';
+    button.textContent = 'Year';
+    segment.appendChild(button);
+    await page.waitForChanges();
+
+    slot.dispatchEvent(new Event('slotchange'));
+    await page.waitForChanges();
+    await page.waitForChanges();
+    expectButtonPositions(segment, 4);
+
+    segment.querySelector('ion-segment-button[value="week"]')!.remove();
+    slot.dispatchEvent(new Event('slotchange'));
+    await page.waitForChanges();
+    await page.waitForChanges();
+    expectButtonPositions(segment, 3);
+  });
+});
+
 it('should disable segment buttons added to disabled segment async', async () => {
   const page = await newSpecPage({
     components: [Segment, SegmentButton],