JSFiddle - React, Tailwind, and code Playground

HTML

<h1>
VoiceOver and Lists
</h1>

<p>
  Demonstrating VoiceOver behavior with lists.
</p>

<h2>
Default
</h2>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

<h2>
list-style-type: none
</h2>
<ul class="List(n)">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

<h2>
Inline
</h2>

<ul>
  <li class="D(i)">Item 1</li>
  <li class="D(i)">Item 2</li>
  <li class="D(i)">Item 3</li>
  <li class="D(i)">Item 4</li>
</ul>

<h2>
ARIA list-style-type: none
</h2>
<ul class="List(n)" role="list">
  <li role="listitem">Item 1</li>
  <li role="listitem">Item 2</li>
  <li role="listitem">Item 3</li>
  <li role="listitem">Item 4</li>
</ul>

<h2>
ARIA Inline
</h2>

<ul role="list">
  <li class="D(i)" role="list-item">Item 1</li>
  <li class="D(i)" role="list-item">Item 2</li>
  <li class="D(i)" role="list-item">Item 3</li>
  <li class="D(i)" role="list-item">Item 4</li>
</ul>

<h2>
Fixed, list-style-type: none
</h2>
<ul class="List(n) Fixed-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

<h2>
Fixed, Inline
</h2>

<ul class="Fixed-list">
  <li class="D(i)">Item 1</li>
  <li class="D(i)">Item 2</li>
  <li class="D(i)">Item 3</li>
  <li class="D(i)">Item 4</li>
</ul>

<a href="https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/">VoiceOver and list-style-type:none</a>

CSS

.List\(n\) {
  list-style-type: none;
}

.D\(i\) {
  display: inline;
}

.Fixed-list li:before {
  content: "\200B"; /* Add zero-width space */
}