How to semantic/accessible create a list with "load more" button [on hold]

Here basic example of what I'd like to do:

HTML:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li hidden>Item 4</li>
  <li hidden>Item 5</li>
  <li hidden>Item 6</li>
  <li hidden>Item 7</li>
  <li hidden>Item 8</li>
</ul>
<button type="button">load more</button>

JS:

// Pseudo code
button.on('click').then(loadThreeMoreItems());

From the logic it's kind of easy and it would work fine with keyboard usage. But I'm not sure how get this more accessible for screenreaders, so the get noticed when new items are added to the list.

Does anyone have an option/kickstart of how to do this the right way?

In my search I found nothing. Maybe I look for the wrong keyword.

Thank you!

Tags: