Issue Summary

An incomplete and non-descriptive label such as "Edit" is provided for the button.

Steps to Reproduce

1. Open the JSM DC Help Center instance.
2. Navigate to the "Requests" button and expand it.
3. Navigate to the "All requests" and activate it.
4. Using a screen reader, navigate to the mentioned button.
5. Listen and note that the button's label is incomplete and non-descriptive.

Screen Recording

Non-descriptive label screen recording.mp4

Actual Results

When screen reader users navigate through the "Requests" page, they encounter an incomplete and  non-descriptive label, such as "Edit" for the button.

As a result, screen reader users may not fully understand the button's purpose.

Expected Results

The screen reader should announce unique and descriptive labels for buttons to ensure users can easily understand their purpose.

In this case, update the value of the "aria-label" attribute to "Edit visible columns" to provide a clear and specific description of the button’s function.

Note: Before implementing the label for this control, please consult with the content design team to determine the best label for this approach.

Code Snippet:

<button class="edit-visible-columns" data-testid="edit-visible-columns" type="button">
    <span class="icon-container">
        <span data-vc="icon-undefined" role="img" aria-label="Edit visible columns" class="icon"></span>
    </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.7
Operations - Windows11
Chrome - Version 133.0.6943.127 (Official Build) (64-bit)
Safari- Version 18.0
Firefox- Version 135.0 (64-bit)
JAWS- Version 2023
NVDA- Version 2024.4.2
VoiceOver - Version Latest