Screen reader reads list items multiple times

Question

I'm trying to make a project fully accessible, but the screenreader reads some elements from my list multiple times.

Edit: It seems this issue only happens in google chrome

this is the source code:

<ul class="o-contact__list">
    <li *ngIf="page?.result?.fields?.contactAddress">
        {{ page?.result?.fields?.contactAddress }}
    </li>
    <li *ngIf="page?.result?.fields?.contactEmail">
        {{ page?.result?.fields?.contactEmail }}
    </li>
    <li *ngIf="page?.result?.fields?.contactTel">
        {{ page?.result?.fields?.contactTel }}
    </li>
    <li *ngIf="page?.result?.fields?.contactPrice">
        {{ page?.result?.fields?.contactPrice }}
    </li>
</ul>

And this is the HTML output:

<ul class="o-contact__list">
    <!--bindings={"ng-reflect-ng-if": "mainstreet 123"}--><li>
        mainstreet 123
    </li>
    <!--bindings={"ng-reflect-ng-if": "info@email.com"}--><li>
        info@email.com
    </li>
    <!--bindings={"ng-reflect-ng-if": "tel.: 555 7125"}--><li>
        tel.: 555 7125
    </li>
    <!--bindings={"ng-reflect-ng-if": "free"}--><li>
        free
    </li>
</ul>

For some reason the first item gets read 3 times. The 2 following items get read twice, and the last item only gets read 1 time.

Answer 1

I have found the problem lay in the styling. The list-items had a ::before which cause the issue with the multiple readings. I changed it to ::after which solved the problem . I don't know exactly why this is tho so if someone still know the answer to this I would love to hear!