Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

BBButton: pressed state for toggle buttons

Aperta
  • Qualcosa non va?
#107 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 2 giorni

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
30/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
accessibility, frontend

Direzione di ricerca

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.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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
  />
))}
Lingua principale
TypeScript
Stelle
2
Fork
5
Merge medio
1g 16h
PR unite (30g)
12

Preparare l'ambiente

  • Nessun Dockerfile né file Docker Compose
  • Ha un modello di pull request
  • Nessuna guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di bigbluebutton/bbb-ui-components-react

Tutte le issue di bigbluebutton/bbb-ui-components-react

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.