Fix accessibility issues found by the Storybook catalog

Đang mở
  • Có gì không ổn?
#390 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
57/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
react, storybook, typescript
Lĩnh vực
accessibility, frontend

Hướng nghiên cứu

Start with ui/host/src/catalog/accessibility.ts to see the exceptions, then inspect shell.tsx, the dashboard and settings pages, dashboards/viz/health-pieces.tsx, rail.tsx, dashboards/panel-card.tsx, and settings.tsx. Run just design-check after removing an exception, or open the affected story with just design and check its Accessibility panel. Done when each listed issue is fixed and its exception is deleted.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

bug

The Storybook catalog runs axe on every story with a11y.test: "error". To keep it green, these existing issues in the shipping markup are excepted in ui/host/src/catalog/accessibility.ts. Fix each one, then delete its exception.

  • Nested and duplicate <main> landmarks. AppShell.Main in shell.tsx and the dashboard and settings pages each render a <main>. axe reports landmark-main-is-top-level (one nested main), landmark-no-duplicate-main (two mains) and landmark-unique (two unnamed mains).
  • Degraded health label contrast, light scheme. The degraded Metric label in dashboards/viz/health-pieces.tsx inherits warn text #c87d21, which is 3.275:1 on white (color-contrast, needs 4.5:1). Mantine's c prop overrides the component's darker status ink.
  • Selected chat timestamp contrast, light scheme. In rail.tsx, the dimmed timestamp on the active chat row is 3.901:1 against the selected background (color-contrast).
  • Panel loader label. The labelled Mantine Loader in dashboards/panel-card.tsx (aria-label="Loading panel") renders a span with no role (aria-prohibited-attr). Give it role="status" or use visually hidden text.
  • Settings documentation link. The "Sending telemetry" link in settings.tsx inherits the text colour and underlines only on hover. That is 1.289:1 against the surrounding text (link-in-text-block). Underline it at rest, or give it link colour.

Reproduce: run just design-check after removing an exception, or open the story in just design and check the Accessibility panel.

Ngôn ngữ chính
Go
Star
11
Fork
0
Merge trung bình
7 giờ 39 phút
Pull request đã merge (30 ngày)
97

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của labstack/fanout

Tất cả issue của labstack/fanout

Issue tương tự

Thêm issue về Go

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.