Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Disabling buttons is confusing

Đang mở
  • Có gì không ổn?
#7,880 4 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 2 ngày

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

Đánh giá

Issue này chưa được đánh giá.

Mô tả

component: Button react

As noted in #7879, there are three separate ways to disable a button:

  • disabled
  • aria-disabled
  • inactive
buttons in various variants and states of disabledness

Our accessibility guidance generally discourages disabled because it makes buttons inaccessible by keyboard navigation, which may make them undiscoverable to screen readers. So I avoid this.

aria-disabled generally seems to work well, making buttons visually disabled while leaving them focusable and ensuring that screen reader users understand they are disabled. So I'm tempted to just reach for aria-disabled all the time.

However, there is also the inactive prop, and it's not clear why this exists or when we should prefer it over aria-disabled. Visually they are distinct, which makes inactive buttons visually inconsistent with other buttons. And inactive completely overrides variant. To be honest, inactive feels redundant, with limited functionality - I'm tempted to avoid it altogether.

There's a docs section on what an inactive button is:

An inactive Button is an accessible alternative to a disabled Button. They're intended to be used for buttons that are non-functional, but cannot be removed from the page.

Unlike a disabled Button, an inactive Button can respond to user input. For example, if a Button shows a tooltip when hovered or focused, or a Dialog when clicked.

But this just raises more questions than it answers - why would I use inactive if I can get exactly the same functionality from aria-disabled but with much better styling and variant support?

Possible solutions

Ideally we need to create explicit clarity around the correct way to disable buttons, without making consumers dig through several different docs to try and determine this for themselves.

I would propose the following:

  1. Deprecate and remove the inactive prop in favor of aria-disabled
  2. Lint against the disabled prop in favor of aria-disabled
  3. Document that aria-disabled is the preferred approach

Alternatively, we could lean on inactive instead:

  1. Improve inactive so that it works like aria-disabled, supporting variant styling
  2. Lint against disabled and aria-disabled in favor of inactive
  3. Document that inactive is the preferred approach
Ngôn ngữ chính
TypeScript
Star
3.9k
Fork
697
Merge trung bình
3 ngày 12 giờ
Pull request đã merge (30 ngày)
51

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

Mở trong Codespaces

Khởi chạy dev container của dự án ngay trên trình duyệt, bằng tài khoản GitHub của bạn.

  • Không có Dockerfile hay tệp Docker Compose
  • Có mẫu pull request
  • Không có hướng dẫn đóng góp

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 primer/react

Tất cả issue của primer/react

Issue tương tự

Thêm issue về TypeScript

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.