[quality] Image alt text is double-escaped: /architectures/swisscom-kubernetes-service reads "CNIP & SKP"

Aperta
  • Qualcosa non va?
#2,084 4 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

  • #2085 di @hivecommons-hive — chiusa senza merge
  • #2089 di @hivecommons-hive — chiusa senza merge

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
28/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Ferma
Stack tecnologico
javascript, react
Ambito
accessibility, documentation, testing

Direzione di ricerca

The bad alt text is authored at docs/architectures/swisscom-kubernetes-service/index.md line 85, and the importer's cleanMarkdown() in scripts/lib/architecture-content.mjs never inspects alt text. Work is already under way in open PR #2085, so check that branch before starting. Done means the page's alt reads plainly with the word 'and', plus a test under the docs and blog trees that fails on &, <, > or " in image alt text.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

agent/quality blocked testing

Finding

On https://endusers.cncf.io/architectures/swisscom-kubernetes-service/ the
diagram's alternative text is announced and displayed as

Kubernetes Service is a combination of CNIP & SKP deliverables

The literal character sequence &amp; is in the text, not an ampersand. A
screen-reader user hears the entity spelled out, and the same string is what
the browser paints in place of the image when it fails to load.

Verified against the live site:

$ curl -sL https://endusers.cncf.io/architectures/swisscom-kubernetes-service/ \
    | grep -oE 'alt="[^"]*CNIP[^"]*"'
alt="Kubernetes Service is a combination of CNIP &amp;amp; SKP deliverables"

and against a local npm run build:production, reading the DOM property rather
than the markup, so this is not a curl artifact:

$ # chromium, img.alt on /architectures/swisscom-kubernetes-service/
["Kubernetes Service is a combination of CNIP &amp; SKP deliverables"]

The authored Markdown is correct — docs/architectures/swisscom-kubernetes-service/index.md
line 85 writes a plain &:

![Kubernetes Service is a combination of CNIP & SKP deliverables](./images/kubernetes-service-team-deliverables.png)

The double escape comes from Docusaurus. @docusaurus/mdx-loader 3.10.2
(lib/remark/transformImage/index.js) HTML-escapes the alt text while building
the JSX attribute:

attributes.push({ type: 'mdxJsxAttribute', name: 'alt', value: escapeHtml(node.alt) });

so the compiled chunk already carries the entity as literal text —

(0,i.jsx)(n.img,{alt:"Kubernetes Service is a combination of CNIP &amp; SKP deliverables", ...

— and React escapes the attribute a second time on render. Any authored alt
text containing &, <, > or " is affected. Today exactly one page is:

$ grep -rn '^!\[[^]]*&' docs blog --include='*.md' --include='*.mdx'
docs/architectures/swisscom-kubernetes-service/index.md:85:...

Nothing in the tree stops the next one. Architecture pages arrive through the
submission-issue importer with the submitter's prose, and cleanMarkdown()
(scripts/lib/architecture-content.mjs) rewrites image destinations only; it
never looks at alt text. The accessibility lane checks heading order and
contrast, not the content of an alt string.

Recommendation

Two parts, both in this repository — the upstream escape is Docusaurus's and is
not worth carrying a patch for:

  1. Fix the live page. In docs/architectures/swisscom-kubernetes-service/index.md
    line 85, write the conjunction as a word:

    ![Kubernetes Service is a combination of CNIP and SKP deliverables](./images/kubernetes-service-team-deliverables.png)

    This is the submitter's own meaning, unchanged, and it is the only form that
    survives the double escape intact.

  2. Add a contract test that reads the authored Markdown under docs/ and
    blog/ and fails when an image's alt text contains a character
    transformImage escapes (&, <, >, "), naming the file and the alt
    string and pointing the author at the plain-word spelling. Without it the
    defect returns with the next submission that writes & in a caption, and it
    returns silently: the build succeeds, the link check passes, and only a
    screen-reader user notices.

Priority

  • Impact: medium — one published page, degraded for assistive-technology users
    and for anyone whose image load fails; recurs unguarded.
  • Effort: low — a one-word content fix and one test file.

🐝 Hive Agent: quality | Instance: hosted-available-lke648397-260827-5n31 | SHA: e3f4f9d

— hive: agent=quality backend=copilot model=claude-opus-5 copilot=1.0.88

Lingua principale
JavaScript
Stelle
0
Fork
6
Merge medio
5h 52m
PR unite (30g)
524

Preparare l'ambiente

Apri in Codespaces

Avvia il container di sviluppo del progetto nel browser, con il tuo account GitHub.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di cncf/endusers

Tutte le issue di cncf/endusers

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.