pxt-arcade icon indicating copy to clipboard operation
pxt-arcade copied to clipboard

Ensure links have discernible text (.link.ui:nth-child(1)): A11y_arcade.makecode.com_AI4W.

Open shindepra opened this issue 3 months ago • 4 comments

"Please do not close this bug. This bug should only be closed by TCS, C+AI Accessibility tester after bug verification."

"Check out Accessibility Insights! - Identify accessibility bugs before check-in and make bug fixing faster and easier."

GitHub Tags:

#A11yTCS; #A11yWCAG; #MAS2.4.4; #CELA_P2; #A11ySev2; #WCP; #Benchmark; #FTP; #ChromiumEdge; #DesktopWeb; #BM_arcade.makecode_Web_Sept25; #LinkPurpose(InContext); #Win11; #link-name; #arcade.makecode.com;

Environment Details:

Application Name:  arcade.makecode.com URL: https://arcade.makecode.com/skillmap/educator-info/balloon-map-info Chromium Edge: Version 140.0.3485.54 (Official build) (64-bit) OS: Windows 11 Enterprise version 24H2

Repro Steps:

  1. Launch the URL: [S5 Ep2 Agents with Purpose: GenAI Meets LEGO | Microsoft Reactor](https://arcade.makecode.com/skillmap/educator-info/balloon-map-info) and open it.
  2. Run Accessibility insights for Web.
  3. Observe that element links have discernible text.

Issue:

Ensure links have discernible text (link-name - https://accessibilityinsights.io/info-examples/web/link-name)

Target application:

Burstin’ Balloons - https://arcade.makecode.com/skillmap/educator-info/balloon-map-info

Element path:

table:nth-child(16) > tbody > tr:nth-child(2) > td:nth-child(2) > .link.ui:nth-child(1)

Snippet:

How to fix: Fix all of the following: Element is in tab order and does not have accessible text

Fix any of the following: Element does not have text that is visible to screen readers 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

Environment: Microsoft Edge version 140.0.0.0

====

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

Attachment:

Image

shindepra avatar Sep 12 '25 11:09 shindepra

#A11yMAS; #WCAG2.4.4;

kupatkar99 avatar Nov 13 '25 05:11 kupatkar99

This is microbit repo and I am unsure why this is filed in Micro:bit repo. Moving.

abchatra avatar Dec 11 '25 22:12 abchatra

Recommendation for Triage

Issue Type: bug

Status: info-complete

Label(s): accessibility, sidedocs

Duplicate Issue(s): #4871 (closed - similar accessibility issue with skillmap educator-info pages)

Likely Related: #7137 (link accessibility issue in different context)

Suggested Priority: p2

Complexity: low

Copilot Agent Ready: ✅ Yes

Recommendations for Assignee

Analysis

This is an accessibility bug where links in the skillmap educator-info page lack discernible text for screen readers. The issue occurs on the auto-generated "Burstin' Balloons" educator info page at (redacted) The problematic element is a link with class ui linkpointing to/reference/controller/button/on-event` that has no visible text content, violating WCAG 2.4.4 (Link Purpose in Context). This prevents screen reader users from understanding the link's purpose.


Duplicate & Related Issues

Duplicates:

  • #4871 (closed) - Nearly identical issue with skillmap educator-info pages lacking aria-labels on reference links in tables. This was fixed in March 2025.

Related Issues:

  • #7137 (open) - Link accessibility issue related to color contrast, different root cause but same accessibility theme

Location Hints

Likely fix location: microsoft/pxt (pxt-core repository)

The educator-info pages are dynamically generated from skillmap markdown files by the skillmap rendering system in pxt-core. Based on the issue #4871 which had the same problem and was fixed, the rendering code that creates these reference link tables needs to ensure links have proper accessible text or aria-labels.

Relevant files in the pxt repository:

  • skillmap/src/components/InfoPanel.tsx - Likely renders the educator info pages
  • skillmap/src/App.tsx - Main skillmap application
  • Related skillmap rendering components in skillmap/src/components/

The fix should ensure that when rendering reference links in educator-info pages, each (a class="ui link") element either:

  1. Contains visible text content, OR
  2. Has an aria-label attribute describing the link destination

Next Steps

Copilot Coding Agent Assessment:

Can assign to Copilot Coding Agent: ✅ Yes, ready as-is

Reasoning: This is a well-documented accessibility bug with clear repro steps, specific element path, and a previous fix reference (#4871). The issue has complete information including the affected URL, element selector, and accessibility requirements. Since a similar issue was already fixed in the same codebase, the fix pattern is established and straightforward.

Ahoy! This treasure was crafted by 🏴‍☠️ Triage fer issue #7247 🗺️

github-actions[bot] avatar Dec 12 '25 22:12 github-actions[bot]

#A11yAuto;

AnKushSingh05 avatar Dec 15 '25 05:12 AnKushSingh05

Hi @srietkerk Could you please provide the evironment where I can verify the issue as in my env issue is still there

Image

AnKushSingh05 avatar Dec 19 '25 06:12 AnKushSingh05

Hi! The change will be viewable when we release in January/February when beta is live. Unfortunately we do not have a beta version of our docs.

srietkerk avatar Dec 20 '25 02:12 srietkerk