No accessible name for bullet (data-step) lists

[digilou]

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:

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

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.