Issue Summary

On the "Create Page | Labels" page, an identical label “Delete label” is provided for multiple clear buttons in the "Labels" modal dialog.

Steps to Reproduce

1. Open the “Create page | toolbar” page.
2. Activate the label icon in the main content area
3. Observe the "Label" modal dialog appear
4. Insert data in "Please enter a label" input field
5. Navigate to mentioned buttons and observe screen reader announcement.

Screenshot

Actual Results

An identical label "Delete label" is provided for multiple buttons present in the "Labels" modal dialog. As a result, screen reader users will not understand the purpose of these buttons. Also, screen reader users tend to pull a list of buttons for faster navigation, thus the buttons with similar label appearing twice in their list will create confusion for them.

Expected Results

Unique and descriptive labels should be provided for the “Delete label” buttons in the "Labels" modal dialog 

This can be achieved by linking the text element i.e. "test1", "test2" and so on with respective “Delete label” buttons by using the "aria-labelledby" attribute.

Code snippet

<li class="aui-label aui-label-closeable aui-label-split" data-label-id="1998852"><a id="1" class="aui-label-split-main" href="/label/TEST/test1" rel="tag">test1</a><span class="aui-label-split-close"><span aria-labelledby="2 1" id="2" role="button" tabindex="0" class="aui-icon aui-icon-close" title="Delete Label" original-title="Delete Label">Delete Label</span></span></li> 

Workaround

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

Environment

MacBook Pro (14-inch, 2021)
macOs Ventura  13.4
Chrome - Version 114.0.5735.106 (Official Build) (arm64)
Firefox- Version 112.0. 1
Safari- Version 16.5 (18615.2.9.11.4)
JAWS- Version 2023
NVDA- Version 2023
Voiceover - Version Latest