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

BBButton: pressed state for toggle buttons

Đang mở
  • Có gì không ổn?
#107 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 2 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
30/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
react, typescript
Lĩnh vực
accessibility, frontend

Hướng nghiên cứu

Start in src/components/Button/styles.ts, where the hover rule and the & span color rule are defined, and in the BBButton component that receives props. Check how the existing variants are styled so a pressed state can hold through hover, active and focus, and how aria-pressed could be rendered when pressed is set. Done means pressed={true} and pressed={false} render aria-pressed, undefined renders nothing, and each variant's pressed style survives hover. The colors need a design decision first, so confirm them before implementing.

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

Mô tả

Is your feature request related to a problem? Please describe.
BBButton has no selected/pressed state, so a group of toggle buttons, where one option is picked, has to be painted by the consumer.

The BigBlueButton 4.0 poll panel's response-type picker is such a group: True/False, A/B/C/D, Yes/No/Abstention and User response. Its spec asks for a grey box when not selected and the dark brand blue with white text once picked, holding that fill through hover and press. To get there, the client:

The selected state also isn't exposed to assistive technology. BBButton has no aria-pressed and doesn't pass extra props through, so a screen reader hears four plain buttons and no selection.

More groups like this are coming as the client moves to BBButton:

  • the poll/quiz tab selector, a custom SegmentedButton that sets aria-pressed itself;
  • the timer panel's Stopwatch/Timer switch, which still uses the legacy button.

Describe the solution you'd like
A pressed?: boolean prop:

  • When set (true or false): the button renders aria-pressed={pressed}. Leaving it undefined means "not a toggle", as today.
  • Pressed style: each variant/color gets a pressed style that holds through hover, active and focus. The design team would define the colors; the poll spec above is one data point.

Describe alternatives you've considered

  • Forwarding aria-pressed (or ARIA props in general). It fixes the accessibility gap, but the style still needs !important.
  • A segmented-control or toggle-group component. For a group where exactly one option is selected, role="radiogroup" with radio items may be more accurate than aria-pressed, and it brings arrow-key navigation. It's a bigger addition. A pressed prop would still cover standalone toggles, such as mute or pin buttons.

Affected component(s)
BBButton

Proposed API / Usage Example

{responseTypes.map((t) => (
  <BBButton
    key={t.id}
    label={t.label}
    variant="secondary"
    pressed={type === t.id}
    onClick={() => setType(t.id)}
    fullWidth
  />
))}
Ngôn ngữ chính
TypeScript
Star
2
Fork
5
Merge trung bình
1 ngày 16 giờ
Pull request đã merge (30 ngày)
12

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

  • 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 bigbluebutton/bbb-ui-components-react

Tất cả issue của bigbluebutton/bbb-ui-components-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.