vroopea commented 9 months ago

User Experience:

Visually impaired people who depend on screen readers for navigation will get impacted as they won't be able to know the purpose of the read-only field and cannot copy the value for the project link.

Note:

User credentials should NOT be included in the bug.

Repro Steps:

Launch application URL : https://makecode.microbit.org/.
Home page will open.
Navigate "New Project" option and select it.
Editor screen will open.
Navigate to "Share" option appearing in header section and select it.
Navigate through all the controls of "Share Project" dialog and invoke share project.
Turn on the AI (Accessibility Insights) and observe whether project link read-only field has label or not.

Actual Result:

Issue: 'Project link' read-only form field does not have a label.

Observation: When screen reader focus lands on the 'Project link' read-only field, the screen reader announces as "https://makecode.microbit.org/_1fE2E93pgaU6 read-only".

Expected Result:

Ensures every form element has a label
Accessible name should be defined 'Project link' read-only form field does not have a label.

Example: Aria-label="Project link" should be defined for the read-only field.

Note: The same issue is observed throughout the application for the similar controls.

Issue:

Ensures every form element has a label (label - https://accessibilityinsights.io/info-examples/web/label)

Target application:

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

Element path:

.common-input

Snippet:

<input class="common-input" role="textbox" tabindex="0" type="text" readonly="" autocomplete="off" autocorrect="off" autocapitalize="off" value="https://makecode.microbit.org/_1fE2E93pgaU6">

How to fix:

Fix any of the following:

Form element does not have an implicit (wrapped)
Form element does not have an explicit
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
Element has no placeholder attribute
Element's default semantics were not overridden with role="none" or role="presentation".

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

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

label.

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/.