No accessible name for bullet (data-step) lists

Description

The unordered list of links to navigate from one tour step to the next doesn't create an accessible name for each link.

Expected Behavior

An interactive component (i.e. hyperlinks, buttons) should have a role and name, according to WCAG 4.1.2. Accessibility expectations:

A screen reader user should be presented with the purpose of this "button". Example: "Step 1" or {{ title of step }}
A voice control user should be able to say the name of this component to activate it. (if they knew what the name was, although no visible label is available to them - )

Actual Behavior

The links have been given the role of button. But no name (description of what this component does) isn't present (nor accessible). Testing with VoiceOver on macOS alerted me that the accessible name is missing.

Errors and Screenshots (optional)

Visual of tour steps from a project under development:

2 steps (gray dots) are visible and centered above the Back and Next buttons

Example rendered code in a project under development:

<div class="introjs-bullets">
  <ul role="tablist">
    <li role="presentation">
      <a role="button" class="" tabindex="0" data-step-number="1">&nbsp;</a>
    </li>
    <li role="presentation">
      <a role="button" tabindex="0" data-step-number="2" class="active">&nbsp;</a>
    </li>
  </ul>
</div>

Example (recommended)

The project I'm working on is currently under development.

However, this can be tested even on intro.js docs example page

Environment (optional)

Tech	Spec
Browser	Firefox 99.0.1
OS	macOS 12.3.1
Version	5.1.0
Frameworks	Rails, jQuery

usablica / intro.js