aws / aws/graph-explorer

Entity type names make poor screen-reader accessible names

Open
#2,000 0 comments 0 reactions 0 assignees View on GitHub
internal usability
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.