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

BBBCheckbox: no visible keyboard focus, and the label ignores disabled

Aperta Adatta ai principianti
  • Qualcosa non va?
#108 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à
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
72/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
accessibility, frontend

Direzione di ricerca

Inizia da src/components/Checkbox/styles.ts, dove StyledCheckbox imposta padding: 0 su .MuiCheckbox-root e Label imposta il cursor, poi in component.tsx, dove viene renderizzato Label e disabled è disponibile. Controlla il contorno di focus in src/components/Button/styles.ts per trovare il token da riutilizzare, e verifica come viene applicato .Mui-focusVisible quando si naviga con Tab. È completato quando il focus da tastiera mostra un contorno visibile e l'etichetta di una checkbox disabilitata usa il cursore not-allowed e il colore del testo disabilitato.

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

Descrizione

Describe the bug
BBBCheckbox has two state-styling gaps.

  1. There is no visible keyboard focus. StyledCheckbox sets padding: 0 on .MuiCheckbox-root, so MUI's focus ripple only tints the inside of the 21px box. On a light background it is a faint grey square, easy to miss. Nothing else marks focus: there's no outline and no .Mui-focusVisible style. With MUI's default 9px padding, the same ripple shows as a 39px halo. BBButton, for comparison, draws a 2px outline on focus (&&:focus).
  2. The label ignores disabled. Label always has cursor: pointer and the default text color. The component doesn't pass disabled to it (component.tsx). With disabled, MUI dims the box, but the label still looks and points as if it were clickable.

To Reproduce

  1. Render <BBBCheckbox label="Whole image" checked={false} onChange={() => {}} />.
  2. Tab to it. The only focus cue is a faint tint inside the box.
  3. Render it with disabled and hover the label. The cursor is a pointer and the label text isn't dimmed.

Expected behavior

  • Focus: a clearly visible focus indicator when focused from the keyboard (:focus-visible / .Mui-focusVisible), consistent with BBButton's focus outline. WCAG 2.4.7 (Focus Visible) requires one.
  • Disabled: when disabled, the label shows cursor: not-allowed (or default) and the disabled text color, like the box.

Actual behavior

  • Focus: a faint grey square inside the 21px box.
  • Disabled: the label keeps cursor: pointer and full-contrast text.

Screenshots
Can add if useful. On keyboard focus, the box shows a light grey fill inside its 21px border and nothing outside it.

BBB version, plugin in which the bug happened and SDK version:

  • bbb-ui-components-react 0.9.0, and develop at ccef0a330.
  • Found while switching the BigBlueButton 4.0 client's camera settings ("Whole image" brightness option) from its own MUI checkbox to BBBCheckbox.

Desktop (please complete the following information):

  • OS: Linux
  • Browser: Chromium
  • Version: Playwright's bundled Chromium

Additional context
A possible fix:

export const StyledCheckbox = styled(MuiCheckbox)`
  &.MuiCheckbox-root { padding: 0; }
  &.Mui-checked { color: ${colorBrand1}; }
  &.Mui-focusVisible { outline: 2px solid <same token as BBButton's focus outline>; outline-offset: 2px; }
`;

export const Label = styled.label<{ $disabled?: boolean }>`
  ...
  cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'pointer')};
  ${({ $disabled }) => $disabled && `color: <disabled text token>;`}
`;

The component would pass $disabled={props.disabled} to Label.

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.