Every IconButton has the accessible name "text"

Abierto
  • ¿Algo no está bien?
#6,378 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
20/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
javascript
Área
accessibility, frontend

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
Python
Estrellas
211
Forks
317
Merge medio
4 d 2 h
PR fusionados (30 d)
23

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de learningequality/studio

Todos los issues de learningequality/studio

Issues similares

Más issues de Python

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.