pxt-microbit [Programmatic Access – Make code for micro bit – My projects]: "My projects" heading has focusable descendants.

[Programmatic Access – Make code for micro bit – My projects]: "My projects" heading has focusable descendants.

Open testingmakecode opened this issue 2 years ago • 2 comments

User Experience:

Visually impaired users who depend on screen readers will get disoriented and will face difficulty in understanding the controls which are not properly nested and appropriate information will not be announced.

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

Repro Steps:

Open https://makecode.microbit.org/
Run AI tool.
Verify the issue.

Actual Result:

Issue: Nested interactive control "My projects" heading is not defined properly as it contains focusable descendants. Button control is defined within heading <div>.

Observation: Screen reader announces as "My Projects view all button view all projects" button. Here, for the button there are two controls such as heading and a button are nested in the same group and those are focusable.

Expected Result:

Solution: Nested interactive control "My Project" heading should be defined properly i.e " My Project " must not have any focusable descendants.

Issue:

Ensures interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies (nested-interactive - https://dequeuniversity.com/rules/axe/4.4/nested-interactive?application=msftAI)

Target application:

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

Element path: .column[role="button"]

Snippet:

<div class="column" role="button" style="z-index: 1;"><h2 class="ui header myproject-header">My Projects<span class="view-all-button" tabindex="0" title="View all projects" role="button">View All</span></h2></div>

How to fix: Fix all of the following:

Element has focusable descendants. Environment: Microsoft Edge version104.0.1278.2

This accessibility issue was found using Accessibility Insights for Web 2.32.0 (axe-core 4.4.1), 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

Test Environment:

• OS Version: 22H2 (OS Build:25151.1010) • Browser: Microsoft Edge Version 104.0.1278.2 (Official build) (64-bit) • Tool used: Accessibility insights for Web, Developer Tool (F12) • #URL: https://makecode.microbit.org/