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.
Home page will open. Turn on the screen reader (JAWS).
Navigate "New Project" option and select it.
Editor screen will open.
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.
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”.
vroopea
commented
8 months ago
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:
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:
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:
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:
Test Environment: