vailabel/vailabel-studio

a11y: Several image elements are missing alt text

Open

#250 创建于 2026年6月19日

在 GitHub 查看
 (0 评论) (0 反应) (0 负责人)TypeScript (22 fork)auto 404
good first issuehacktoberfest

仓库指标

Star
 (62 star)
PR 合并指标
 (PR 指标待抓取)

描述

Summary Multiple <img> elements across the studio render without an alt attribute, so screen readers can't describe them and the markup fails basic accessibility/lint checks.

Where (non-exhaustive)

  • apps/studio/src/app/layout/main-layout.tsx:140
  • apps/studio/src/features/studio/components/file-list-panel.tsx:162
  • apps/studio/src/features/studio/components/canvas/canvas.tsx:54
  • apps/studio/src/features/projects/components/image-upload.tsx:64
  • apps/studio/src/features/projects/components/image-table.tsx:95
  • apps/studio/src/features/studio/components/editors/video/video-library.tsx:180

Find the rest with: grep -rn "<img" --include=*.tsx apps/studio/src | grep -v "alt="

Steps

  1. Branch: git checkout -b a11y/img-alt-text.
  2. Add a descriptive alt to each (e.g. alt={image.name} for dataset thumbnails, alt="Vailabel logo" for the logo). Use alt="" only for purely decorative images.
  3. Run yarn lint and yarn typecheck; open a PR.

Acceptance criteria

  • Every meaningful <img> has a descriptive alt; decorative ones use alt="".
  • grep -rn "<img" --include=*.tsx apps/studio/src | grep -v "alt=" returns nothing.

Good first issue — comment here if you'd like to take it.

贡献者指南