Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン 初心者向け
  • 何か問題がありますか？
#108 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
72/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
react, typescript
領域
accessibility, frontend

調査の方向性

src/components/Checkbox/styles.ts から始めてください。ここでは StyledCheckbox が .MuiCheckbox-root に padding: 0 を設定し、Label が cursor を設定しています。次に component.tsx を確認してください。ここでは Label がレンダリングされ、disabled が利用できます。src/components/Button/styles.ts のフォーカスアウトラインを確認し、再利用すべきトークンを見つけてください。また、Tab で移動したときに .Mui-focusVisible がどのように適用されるかを確認してください。キーボードフォーカスで目に見えるアウトラインが表示され、無効なチェックボックスのラベルが not-allowed のカーソルと無効時のテキスト色を使っていれば完了です。

索引モデルが issue の本文から書いたものです。

説明

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.

主要言語
TypeScript
スター
2
フォーク
5
平均マージ
1日 21時間
マージ済み PR（30日）
15

環境構築

  • Dockerfile・Docker Compose ファイルなし
  • プルリクエストのテンプレートあり
  • コントリビューションガイドなし

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

bigbluebutton/bbb-ui-components-react のほかの issue

bigbluebutton/bbb-ui-components-react の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。