[Programmatic access - Make Code - Home]: Role attribute does not have an appropriate value for the element.

[Keertisree]

User Experience:

Visually impaired users who depend on screen reader will not understand the exact purpose of the controls and will find it difficult to find role of the controls on the page.

Note: User credentials should NOT be included in the bug.

Repro Steps:

1. Open URL: https://arcade.makecode.com/hardware/raspberry-pi and sign in with valid credentials.
2. Run Accessibility Insights tool.
3. Navigate the page.
4. Verify whether elements with aria roles have all required attributes or not.

Actual Result:

Role attribute does not have an appropriate value for the element. Observation: Screen reader announcing as 'search button' but navigating with swift tab it is announcing as 'Menu search button to move items press down arrow' when focus moves to search button.

Expected Result:

ARIA role form is not allowed for given element.

Note: The same issue exists throughout the application.

Issue: Ensures role attribute has an appropriate value for the element (aria-allowed-role - https://dequeuniversity.com/rules/axe/4.7/aria-allowed-role?application=msftAI)

Target application: Raspberry Pi - https://arcade.makecode.com/hardware/raspberry-pi

Element path: #tocsearch1

Snippet:

How to fix: Fix any of the following: ARIA role form is not allowed for given element.

Environment: Chrome version 121.0.0.0

====

This accessibility issue was found using Accessibility Insights for Web 2.41.0 (axe-core 4.7.2), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

MAS Reference:

MAS 4.1.2 – Name, Role, Value

ARIA Authoring Ref Link/Fluent Patterns Guidance /HITS Guidance:

ARIA role should be appropriate for the element | Axe Rules | Deque University | Deque Systems

UIA/DOM details available:

Yes (Please refer to the attachment)

Reference Links:

Accessibility Insights! - Identify accessibility bugs before check-in and make bug fixing faster and easier. External Bug Process: If this bug belongs to an external team, mark it as resolved/done and assign it back to the tester with notes on where to file/route the bug. For more information, please use this External Bug Process (sharepoint.com). “HCL Staff should not log any third-party external bugs. Should be routed to EDAD team”. Please reach out to C&AI Teams channel for any process-related queries.

[Keertisree]

Accessibility;#A11yMAS;#A11yAuto;#A11ySev2;#K4W;#HCL;#E2E-HCL-MakeCode-Feb2024;#Win11-chrome;#MAS4.1.2

[vroopea]

As checked the issue on URL: https://makecode.microbit.org/. The issue is still repro and severity is fine. #Regressed:04-08-24;InternalReviewed-Apr2024