microsoft / microsoft/vscode-documentdb

Audit codebase for non-breaking-space + redundant aria-label accessibility issues

Open
#818 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
31
Forks
22
Avg merge
2d 20h
Merged PRs (30d)
21

Description

Summary

Audit the codebase for accessibility issues caused by non-breaking-space (NBSP, \u00A0) text transforms combined with a redundant aria-label, which can produce duplicate / confusing screen-reader announcements (and can also break browser find-in-page and text selection).

Where this was found

Surfaced during the PR #732 review (finding LOW-4). IndexTypeBadgeView renders a badge whose visible text replaces every space with an NBSP to keep multi-word labels on one line, while also setting aria-label from the original (space-separated) string:

// src/webviews/documentdb/indexView/components/indexList/IndexTypeBadgeView.tsx
<Badge ... aria-label={type}>
    {type.replace(/ /g, '\u00A0')}
</Badge>

Assistive tech normalizes NBSP to an ordinary space when computing the accessible name, so the aria-label and the visible text resolve to the same string (e.g. "Single Field"). Screen readers that consider both sources can announce it twice. The fix for that specific badge is to drop the redundant aria-label and let the visible (NBSP) text be the single accessible name.

What to audit

Look for the following anti-patterns across the extension's webviews (and anywhere else DOM text is produced):

  1. NBSP (or other Unicode) substitution on visible text — e.g. .replace(/ /g, '\u00A0'), literal &nbsp;, \u00A0, \u200B (zero-width space), etc. Verify each does not:
    • duplicate an aria-label/aria-labelledby derived from the untransformed string (double announcement),
    • break find-in-page / copy-paste (NBSP ≠ space to the browser's text search),
    • leak into telemetry, tooltips, or exported/generated text where a real space is expected.
  2. Redundant aria-label that repeats visible text more broadly — an aria-label should replace or enrich the accessible name, not duplicate the visible label. Where a rich label is intended, hide the visible text from AT with aria-hidden="true" (per the existing focusable-badge pattern) instead of setting a duplicate aria-label.
  3. Prefer a CSS layout solution (e.g. white-space: nowrap) over NBSP substitution when the only goal is preventing wrapping, so the accessible/searchable text stays a normal string.

Suggested search seeds: \u00A0, &nbsp;, \u200B, white-space, and every aria-label={ where the same value is also rendered as children.

Follow-up: teach the review skill

Once the audit lands, update the accessibility review skill (.github/skills/accessibility-aria-expert/) so future reviews automatically flag this pattern:

  • A visible-text Unicode/NBSP substitution paired with an aria-label sourced from the untransformed string → likely duplicate announcement; recommend dropping the redundant aria-label or using aria-hidden on the visible text.
  • Prefer white-space: nowrap over NBSP substitution when the intent is purely to prevent wrapping.
  • Note the secondary effects of NBSP: broken find-in-page, copy-paste surprises, and telemetry/text-export mismatches.

Acceptance criteria

  • Codebase audited for NBSP/Unicode text substitutions and redundant aria-labels duplicating visible text.
  • Each occurrence either fixed or explicitly justified.
  • accessibility-aria-expert skill updated to detect this pattern in future reviews.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with src/webviews/documentdb/indexView/components/indexList/IndexTypeBadgeView.tsx and search the webviews for \u00A0,  , \u200B, white-space, and aria-label expressions. Review each occurrence for duplicated accessible names and text transformations, then inspect .github/skills/accessibility-aria-expert/ for the review guidance. Done means every occurrence is fixed or justified, and the skill documents this pattern and the nowrap alternative.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, typescript
Domain
accessibility, documentation, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.