[Programmatic Access - Make code - Editor page]: Required aria parent role is not defined for the 'Select code editor language' menu item.

[vroopea]

User Experience:

People who use assistive technologies might find it difficult or impossible to use a child control if its managing control lacks the required parent role.

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

Repro Steps:

1. Launch application URL : https://makecode.microbit.org/.
2. Home page will open. Turn on the screen reader (JAWS).
3. Navigate "New Project" option and select it.
4. Editor screen will open.
5. Navigate to the 'Select code editor language' menu item and verify whether parent role is defined or not with the help of AI (Accessibility Insights)

Actual Result:

Issue: Required ARIA parents role not present: menu, menubar, group for the 'Select code editor language' menu item.

Observation: When focus lands on the 'Select code editor language' menu item, the screen reader announces as 'Dropdown menu - 'Select code editor language'.

Expected Result:

• Ensures elements with an ARIA role that require parent roles are contained by them.
• Required ARIA parents role should be defined for the 'Select code editor language' menu item.

Issue:

Ensures elements with an ARIA role that require parent roles are contained by them (aria-required-parent - https://accessibilityinsights.io/info-examples/web/aria-required-parent)

Target application:

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

Element path:

#editordropdown

Snippet:

<div role="menuitem" title="Select code editor language" aria-haspopup="false" id="editordropdown" class="ui dropdown icon item button attached right " tabindex="0"> `

How to fix:

Fix the following:

• Required ARIA parents role not present: menu, menubar, group.

MAS Reference: MAS 1.3.1 – Info and Relationships

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

aria-required-parent

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 23H2 (OS Build:22631.3007)
• Browser: Chrome Version 121.0.2277.4 (Official build) dev (64-bit).
• Test Matrix: Chrome + JAWS
• URL: https://makecode.microbit.org/.

[vroopea]

#Accessibility;#A11yMAS;#A11ySev3;#A11yAuto;#k4W;#MAS1.3.1;#HCL;#Benchmark;#Win11-Chrome;#E2E-HCL-MakeCode-Feb2024