Every IconButton has the accessible name "text"

Aperta
  • Qualcosa non va?
#6,378 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
20/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
javascript
Ambito
accessibility, frontend

Direzione di ricerca

Start with contentcuration/contentcuration/frontend/shared/views/IconButton.vue, specifically the ariaLabel prop usage cited in the issue. Then find the component's unit tests and check how they verify its tooltip text. Done means the accessible name matches the text prop, the test covers it, and the Generate, Upload, and Crop buttons are announced by their labels.

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

Descrizione

bug DEV: frontend

❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

Observed behavior

IconButton passes the literal string "text" to KIconButton (ariaLabel="text" with no : binding), so screen readers announce every icon button as "text":
https://github.com/learningequality/studio/blob/865e06b4fdef5bc8b0e7ec21782f6cbc5adbe88b/contentcuration/contentcuration/frontend/shared/views/IconButton.vue#L5-L7

The tooltip receives the translated label, so sighted users see the correct name on hover.

These 12 files use IconButton:

  • channelEdit/components/StudioTree/StudioTree.vue
  • channelEdit/components/ContentNodeEditListItem.vue
  • channelEdit/components/Clipboard/index.vue
  • channelEdit/pages/StagingTreePage/index.vue
  • channelEdit/views/TreeView/index.vue
  • channelEdit/views/CurrentTopicView.vue
  • channelEdit/views/ImportFromChannels/BrowsingCard.vue
  • channelEdit/views/files/EpubRenderer.vue
  • channelEdit/views/files/thumbnails/ContentNodeThumbnail.vue
  • shared/views/channel/ChannelThumbnail.vue
  • administration/pages/Channels/ChannelTable.vue
  • administration/pages/Users/UserTable.vue

User-facing consequences

Screen reader users cannot tell icon buttons apart in the channel editor. For example, the thumbnail field's Generate, Upload, and Crop buttons are all announced as "text".

Steps to reproduce

  1. Open the details of any resource in a channel's edit modal.
  2. Scroll to Thumbnail.
  3. Inspect the icon buttons below the thumbnail: each has aria-label="text".

Context

Studio unstable at 865e06b4f, Chromium.

Acceptance Criteria

  • Each IconButton has the same accessible name as its tooltip, i.e. its text prop.
  • The thumbnail field's Generate, Upload, and Crop buttons are announced by their labels.
  • A unit test covers the accessible name of IconButton.

AI usage

Claude Code found this during manual QA of #6358, checked IconButton.vue on unstable, and drafted this issue.

Lingua principale
Python
Stelle
211
Fork
317
Merge medio
4g 10h
PR unite (30g)
25

Preparare l'ambiente

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 learningequality/studio

Tutte le issue di learningequality/studio

Issue simili

Altre issue su Python

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.