Entity type names make poor screen-reader accessible names
- Dominant language
- TypeScript
- Stars
- 481
- Forks
- 108
- Avg merge
- 6d 8h
- Merged PRs (30d)
- 5
Description
## Problem
Several UI surfaces build `aria-label`s (and other accessible names) directly from entity type / display values, which are not always friendly when read verbatim by a screen reader:
- **Sentinels with punctuation** — an untyped edge/vertex falls back to `«No Type»` (`LABELS.MISSING_TYPE`, using guillemet characters). An `aria-label` like `"«No Type» edge"` causes VoiceOver to announce the literal quotation-mark characters.
- **IRIs / URIs** — in SPARQL/RDF, type and predicate values are often full IRIs (e.g. `http://www.w3.org/2000/01/rdf-schema#label`), which read aloud character-by-character are unintelligible.
- **Raw identifiers** — camelCase / snake_case type names read awkwardly.
This surfaced while adding an `aria-label` to the edge details connector preview (`EdgeDetail.tsx` → `EdgeLinePreview`), but it is not specific to that component — it is a general pattern anywhere we interpolate a type/display value into an accessible name.
## Scope (investigation + fix)
- Audit where entity type/display values feed `aria-label`, `alt`, `title`, or `role="img"` names (e.g. `EdgeLinePreview`/`EdgeDetail`, `VertexSymbol`, icon previews, rows).
- Decide a consistent approach for producing a human-friendly accessible name from a type/display value: strip/replace the `«No Type»` sentinel with plain wording, prefer the localName over a full IRI, and handle empty/degenerate cases.
- Consider a small shared helper (e.g. `accessibleTypeName(...)`) so every surface derives names the same way rather than interpolating raw values.
## Notes
Deferred from the edge arrow/line preview work (#1985). Left the `EdgeDetail` `«No Type» edge` case as-is pending this broader decision.
> [!IMPORTANT]
> Internal only — this issue is maintained by the core team and is not accepting external contributions.
Contributor guide
Research direction
Start with EdgeDetail.tsx and EdgeLinePreview, then audit the named surfaces such as VertexSymbol, icon previews, and rows for accessible names derived from entity values. Define the shared handling for the missing-type sentinel, IRIs, raw identifiers, and empty values, then consider the work complete when those surfaces use consistent human-friendly names.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 20/100