Button component with "aria-labelledby" attribute not working correctly

Stencil
1

Hello,
I have a question about the “ion-button” component. When I use the button with the “aria-labelledby” attribute and link it to an HTML element with a specific “id” acting as the button’s label, the screen reader does not read the content of the HTML element.

I think it’s because of the shadow DOM, that the inner button used inside the “ion-button” just cannot see the HTML element next to the “ion-button”.

So my question is, if it has some solution how to make this work?

This is the code snippet which I tried:

 <ion-content class="ion-padding">
      <p id="btn-label">Button Label</p>
      <ion-button aria-labelledby="btn-label">Default</ion-button>
      <button aria-labelledby="btn-label">Native Button</button>
 </ion-content>

or directly link to the showcase: https://stackblitz.com/edit/kq5xbb?file=index.html

As you can see, I implemented the native button HTML element to demonstrate, that the native button announces the label correctly.