Issue Summary

An Inappropriate label “…“(ellipses) is being announced by the screen reader for the button.

Steps to Reproduce

1. Open any “Jira align“ page.
2. Navigate to the header section and turn on the “New navigation“ mode.
3. Using the screen reader, navigate to the mentioned button.
4. Listen that the button label is inappropriate.

Screenshot

Screen Recording

Actual Results

An inappropriate label "…"(ellipses) is specified for the "More options" button in the header section of the page.

As a result, screen reader users will not understand the purpose of the button.

Expected Results

The screen reader should announce a unique and appropriate label for the button.

Specify the appropriate label "more navigation options" for the button using hidden text or the "aria-label" attribute.

Code Snippet:

<button aria-label="More navigation options" aria-expanded="false" aria-haspopup="true" class="css-4mgr5f" data-testid="overflow-menu-trigger" type="button">
<span class="css-178ag6o">…</span>
</button>

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available

Environment

MacBook Pro (16-inch, 2021)
macOs Sonoma 14.2
Chrome - Version 120.0.6099.109 (Official Build) (arm64)
Firefox- Version 92.0 (64-bit) 
Safari- Version 17.0 (19616.1.27.211.1)
JAWS- Version 2023
NVDA- Version 2021.2 
Voiceover - Version Latest