Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

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

Open Beginner friendly
  • Is something wrong?
#108 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 2 days

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
72/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
react, typescript
Domain
accessibility, frontend

Research direction

Start in src/components/Checkbox/styles.ts, where StyledCheckbox sets padding: 0 on .MuiCheckbox-root and Label sets the cursor, then in component.tsx where Label is rendered and disabled is available. Check the focus outline in src/components/Button/styles.ts to find the token to reuse, and confirm how .Mui-focusVisible is applied when tabbing. Done when keyboard focus shows a visible outline and a disabled checkbox's label uses not-allowed cursor and the disabled text color.

Written by the indexing model from the issue text.

Description

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.

Dominant language
TypeScript
Stars
2
Forks
5
Avg merge
1d 16h
Merged PRs (30d)
12

Getting set up

  • No Dockerfile or Docker Compose file
  • Has a pull request template
  • No contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from bigbluebutton/bbb-ui-components-react

All issues in bigbluebutton/bbb-ui-components-react

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.