no-pointer

ポインターなし

クリック可能なコントロールには、確立された Studio の操作規約を使用します。

• cursor: 'default' を設定し、cursor: 'pointer' は使用しないでください。
• 視覚的なホバーのスタイル設定は、packages/studio/src/helpers/hoverable.ts の HOVERABLE_CLASS_NAME と hoverableStyle() のみで行ってください。色や背景の変更に React のホバー状態を追加しないでください。
• 周囲のコンポーネントで共有の背景ホバー規約をすでに使用している場合を除き、背景は変更しないでください。テキストのみのアクションでは、idleBackground と hoverBackground の両方に TRANSPARENT を使用してください。
• アイドル時の色には LIGHT_TEXT（#A6A7A9）を、ホバー時の色には WHITE（white）を使用してください。アイコンと内側のテキストも同じ状態に従うようにしてください。Studio の CSS リセットによって継承がブロックされている場合は、ピクセルを描画する要素を確認してください。

フォーカスのスタイル設定

デフォルトのアウトラインと、ポインターフォーカス時のシャドウを削除しつつ、キーボードフォーカスのインジケーターは見える状態にしてください。packages/studio/src/helpers/hoverable.ts の FOCUS_VISIBLE_ONLY_CLASS_NAME を HOVERABLE_CLASS_NAME とともにコントロールに追加してください。共有クラスは次のパターンを実装します。

.__remotion-focus-visible-only:focus {
  outline: none;
  box-shadow: none;
}

.__remotion-focus-visible-only:focus-visible {
  box-shadow: ${FOCUS_BOX_SHADOW};
}

:focus-visible のインジケーターは決して削除しないでください。非表示のアクションは、見つけられるようになるまでタブ順から除外してください。

検証

Studio を実行し、関連するすべての状態でコントロールの計算済みスタイルを確認してください。

• アイドル時とホバー時のカーソル：default。
• アイドル時の色：rgb(166, 167, 169)。
• ホバー時の色：rgb(255, 255, 255)。
• ポインターフォーカス時：アウトラインとボックスシャドウなし。
• キーボードの Tab フォーカス時：標準の FOCUS_BOX_SHADOW が表示される。

Studio のコード変更では、次を実行してください。

bunx turbo run make --filter='@remotion/studio'
bunx turbo run lint test --filter='@remotion/studio'