[Programmatic Access - Make code for micro bit - Menu bar]: Required aria child roles are not present for the menu bar control present on the header of the page.

[Chandangithb]

User Experience:

Some ARIA "parent" roles identify composite controls that always include managed controls, identified by "child" roles. For example, role="listbox" identifies a composite control that manages a set of managed controls identified by role="option". People who use assistive technologies might find it difficult or impossible to use a composite control if its managed controls lack the required child role.

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

Repro Steps:

1. Open https://makecode.microbit.org/
2. Navigate to header controls such as " micro: bit, Dropdown menu More..." etc.
3. Run AI tool.
4. Observe and verify the issue.

Actual Result:

Issue: Required aria child roles are not present for the menu bar control present on the header of the page.

Observation: While navigating menu bar control present on the header of the page, screen reader announces as "Banner New project menu item 1 of 4, import project menu item 2 of 4...etc".

Expected Result:

Solution: Ensures elements with an ARIA role that require child roles contain them. Element should have aria-busy="true" attribute defined.

Issue:

Ensures elements with an ARIA role that require child roles contain them (aria-required-children - https://accessibilityinsights.io/info-examples/web/aria-required-children)

Target application:

Microsoft MakeCode for micro:bit - https://makecode.microbit.org/

Element path:

#mainmenu

Snippet:

<div id="mainmenu" class="ui borderless fixed menu inverted " role="menubar">

How to fix:

Fix any of the following: Element has children which are not allowed (see related nodes) Element has no aria-busy="true" attribute

Environment:

Microsoft Edge version 111.0.1660.14

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

MAS Reference:

MAS 1.3.1 – Info and Relationships

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 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: 22H2 (OS Build:22621.1265)
• Browser: Microsoft Edge Version 111.0.1660.14 (Official build) (64-bit)
• Tool used: Accessibility insights for Web, Developer Tool (F12)
• #URL: https://makecode.microbit.org/

[Chandangithb]

#A11yAuto, #A11yMAS, #A11ySev3, #HCL, #Accessibility, #MAS1.3.1, #Benchmark, #K4W, #HCL-MakeCode-New, #WCP

[testingmakecode]

#A11yAuto;#A11yMAS;#A11ySev3;#HCL;#Accessibility;#MAS1.3.1;#K4W;#HCL-MakeCode-New;#WCP