Currently, I am in the process of developing a web component and here is my code snippet:
<ul class="list-with-arrow${this.inverse ? '--inverse' : ''}">
${this.listData.map((item, index) => {
return item.link ? html`
${index === 0 ? html`<hr class="list-with-arrow__bottom-line${this.inverse ? '--inverse' : ''}" />` : ''}
<div class="list-with-arrow__container">
<a class="list-with-arrow__label-container${this.inverse ? '--inverse' : ''}" href=${item.link} @click=${this.handleItemClick}>
<li data-index="${index}">
${item.title ? html`<h5 class="list-with-arrow__title${this.inverse ? '--inverse' : ''}">${item.title}</h5>` : ''}
<h4 inverse class="list-with-arrow__label${this.inverse ? '--inverse' : ''}">${item.label}</h4>
</li>
<div>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99999 4.93933L15.5303 11.4697C15.8232 11.7626 15.8232 12.2374 15.5303 12.5303L8.99999 19.0607L7.93933 18L13.9393 12L7.93933 5.99999L8.99999 4.93933Z" fill="black"/>
</svg>
</div>
</a>
</div>
I apologize for any confusion as the structure might seem disorganized due to using lit element. The issue arises when testing the component with a screen reader, where it only reads the elements/texts inside without providing information about being in a list or heading out of it. The conventional behavior of a screen reader while navigating through a list is to announce its presence along with the number of items within it, followed by informing when leaving the list.
If you have suggestions on how to make this dynamically bound content inside a list more accessible, please share your insights. Thank you!