Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Two unlabelled `.monaco-status` divs with `role=complementary` breaks accessibility compliance

See original GitHub issue

The latest Monaco editor is triggering accessibility errors in cypress-axe: 0.12.2 + axe-core: 4.1.4, specifically the landmark-unique rule, due to there being two .monaco-status divs with role=complementary but no aria-label or aria-labelledby to distinguish them.

Distinguishing the landmarks is required for level A accessibility compliance. See, e.g.

I believe this also causes failures for earlier versions of axe-core / cypress-axe.

monaco-editor version: 0.23.0 Browser: Chrome 89.0.4389.128 OS: MacOS 10.15.7 Playground code that reproduces the issue: Run document.querySelectorAll('.monaco-status[role="complementary"]') in the browser console on the monaco or vscode. Two div appear with a role="complementary" but no aria-label to distinguish them.

Issue Analytics

State:
Created 2 years ago
Reactions:2
Comments:7 (1 by maintainers)

Top GitHub Comments

1reaction

isidorncommented, May 12, 2021

I can add the aria-label to distinguish the elements. However these labels will never be read out by the screen reader, IMHO this will make no impact on the user experience. Due to that I will simply fix this for May and I suggest that the editor only picks this up in the next release since I think it is not critical.

0reactions

isidorncommented, Jan 26, 2022

@clintonc what conformance testing and unwanted labelling are you talking about? I am not sure I follow, sorry.