ID 260192: [Programmatic Access - Simon - Go to Dashboard]: Aria-label is not defined for 'Data source: AWS IoT Site Wise’ button under 'Alerting' screen.

[eledobleefe]

User Experience:

Visually impaired people who depend on screen reader will not get information about the control as aria attributes are not defined for the control due to which they will not be able to understand the purpose of it and cannot perform any corresponding action.
Note: User credentials should NOT be included in the bug.

Repro Steps:

1. Open #URL: play.grafana.org. Sign in with valid credentials. "Home" page appears.
2. Navigate to the left navigation bar and to the "Alerting" button, select it. It gets expanded and navigates the expanded sub menu items.
3. Select the "Alert Rules" menu items. New page appears.
4. Navigate the tab which opens.
5. Navigate to the already present rules under the tab.
6. Navigate them, expand them and navigate all the controls present under it.
7. Navigate to 'Data source: AWS IoT Sitewise’ button.
8. Run the AI tool. Verify the issue.

Actual Result:
Aria attributes such as aria-label, aria-labelledby and title are not defined for 'Data source: AWS IoT Sitewise’ button under 'Alerting' screen.
Screen reader behavior: While navigating on the 'Data source: AWS IoT Sitewise’ button screen reader (Narrator) announces as "button expanded/collapsed".

Expected Result:
Aria attributes such as aria-label, aria-labelledby and title should be defined for 'Data source: AWS IoT Sitewise’ button under 'Alerting' screen.
Screen reader should announce the aria-label as "Data source: AWS IoT Sitewise button expanded/collapse" when focus moves on it.
Note: The same issue exists with "Data source: Influx DB, Demoes and ztest" buttons under same screen.

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

Target application:
Alerting: Alert rules - Grafana - https://play.grafana.org/alerting/list

Element path:
section:nth-child(4) > .css-mfsfva[data-testid="rule-group"]:nth-child(3) > .css-kzesqw[data-testid="rule-group-header"] > .css-1ybakrp-button[data-testid="group-collapse-toggle"] Snippet: <button class="css-1ybakrp-button" type="button" aria-expanded="false" data-testid="group-collapse-toggle">

How to fix:
Fix any 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.1300.0
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:

Alerting Rules (RulesGroup component)

[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! ❤️

[github-actions]

This issue has been automatically marked as stale because it has not had activity in the last year. It will be closed in 30 days if no further activity occurs. Please feel free to leave a comment if you believe the issue is still relevant. Thank you for your contributions!