ID 260316: [Programmatic Access - Simon - Value Mapping]: Aria-label is not defined for "Remove" button under "Value mapping" dialog.

[eledobleefe]

User Experience:

Screen reader dependent users may get misguided while navigating, if the screen reader is not announcing the proper name of the controls present on the page as they will not understand it's purpose.
Note: User credentials should NOT be included in the bug.

Repro Steps:

• Open #Url: play.grafana.org Sign in with valid credentials. "Home" page appears.
• Navigate the Feature Showcase pane heading and select it.
• Navigate the expanded Dropdown and select the "Edit" menu item.
• Navigate the page "Edit" page which appears.
• Navigate to the "All" buttons and select it.
• Navigate to "Value Mapping" button and expand it.
• Navigate all the controls present under it.
• Run AI tool. Verify the issue

Actual Result:
Issue: Aria-label is not defined for "Remove" button under "Value mapping" dialog.
Observation: Screen reader is announcing as "Button" when focus moves to it.

Expected Result:
Aria-label should be defined for "Remove" button under "Value mapping" dialog.
_Note: Same issue exists with 'Copy" button under "Value mapping" dialog. Same issue appears for Explore->Query patterns. samw issue appears for alerting->alerting group_s

Issue:
Ensures buttons have discernible text (button-name - https://accessibilityinsights.io/info-examples/web/button-name)

Target application:
1 -Time series graphs - Grafana - https://play.grafana.org/d/000000016/1-time-series-graphs?orgId=1&editPanel=1&showCategory=Value%20mappings

Element path:
button[data-testid="remove-value-mapping"]

Snippet:
<button aria-label=""data-testid="remove-value-mapping" class="css-x1vujn">

How to fix:
Fix all of the following:

• Element does not have inner text that is visible to screen readers
• aria-label attribute does not exist or is empty
• aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
• Element has no title attribute
• Element's default semantics were not overridden with role="none" or role="presentation"

Environment:
Microsoft Edge version 105.0.1329.1
This accessibility issue was found using Accessibility Insights for Web 2.32.0 (axe-core 4.4.1), a tool that helps find and fix accessibility issues.

Severity:

SEV2

Area:

Value Mappings Modal / IconButton Component (Saga Design System)

[grafanabot]

@eledobleefe please add one or more appropriate labels. Here are some tips:

• if you are making an issue, TODO, or reminder for yourself or your team, please add one label that best describes the product or feature area. Please also add the issue to your project board. 🚀

• if you are making an issue for any other reason (docs typo, you found a bug, etc), please add at least one label that best describes the product or feature that you are discussing (e.g. area/alerting, datasource/loki, type/docs, type/bug, etc). Our issue triage doc also provides additional guidance on labeling. 🚀

Thank you! ❤️

[joshhunt]

The two IconButtons (Copy and Remove) are missing labels. We should probably enforce this prop is added with Typescript and fix all issues accross the codebase

[eledobleefe]

I investigated a bit more and, as Josh said, the IconButton has both tooltip and ariaLabel as optional. When there is no ariaLabel set, this props gets the value of the tooltip, but when there is also no tooltip value, the ariaLabel is an empty string.

As there is current work on improving the IconButton, it could be a good idea to add this a11y issue in the same PR.