[Programmatic Access - Make code Arcade- Projects]: Accessible name is not defined for the list box present on the page.

[vroopea]

User Experience:

An accessible name is a word or phrase coded in a way that assistive technologies can associate it with a specific user interface object. Assistive technologies can then refer to the object by name, not just by type. Unlike a standard HTML control, an ARIA input field requires additional markup to ensure it has an accessible name that conveys its purpose to users of assistive technologies.

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

Repro Steps:

1. Launch application URL: https://arcade.makecode.com/..
2. Projects page will open.
3. Turn on the AI (Accessibility Insights) and observe whether accessible name is defined for the listbox present on the page or not.

Actual Result:

Issue: Accessible name is not defined for the list box present on the page.

Expected Result:

Accessible name should be defined for the list box present on the page.

Example: Aria-label="Projects" can be defined.

Issue:

Ensure every ARIA input field has an accessible name (aria-input-field-name - https://accessibilityinsights.io/info-examples/web/aria-input-field-name)

Target application:

Projects - https://arcade.makecode.com/projects

Element path:

.text > .cards.ui[role="listbox"]

Snippet:

<div class="ui cards" role="listbox">

How to fix:

Fix any of the following:

• 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

MAS Reference:

MAS 4.1.2 – Name, Role, Value

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

aria-input-field-name

UIA/DOM details available:

Yes (Refer 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.

Test Environment:

OS Version: Windows 11 24H2 (OS Build:26100.3037)
Browser: Chrome Version 132.0.6834.196 (Official Build) (64-bit)
Test Matrix: Chrome + NVDA
URL: https://arcade.makecode.com/projects

Attachment:

[vroopea]

#Accessibility; #A11yMAS; #A11ySev3; #MAS4.1.2; #A11yAuto; #K4W; #HCL; #Benchmark; #Win11-Chrome; #BM-HCL-MakeCode-Feb2025