use label instead of span

also there are 60 seconds in a minute, not 30

package.json

@@ -10,6 +10,7 @@
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
     "@types/jest": "^27.0.1",
+    "@types/lodash": "^4.14.188",
     "@types/node": "^16.7.13",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",

src/App.tsx

@@ -1,7 +1,8 @@
-import React, {useState, useEffect} from 'react';
+import React, {useState, useEffect, useRef} from 'react';
 import db from './db.json';
 import {i18nLabels, defaultLang, $lang0, setLang} from './i18n';
 import {events, i18nEventNames, presets} from './events';
+import _uniqueId from 'lodash/uniqueId';
 import styles from './App.module.sass';
 
 const langs = [
@@ -26,7 +27,7 @@ const f2f = (f: number) => {
   const sf = String(f%30)+'f';
   const s = f/30|0;
   if (s === 0) return sign+sf;
-  const ssf = `${s%30}:${sf.padStart(3, '0')}`;
+  const ssf = `${s%60}:${sf.padStart(3, '0')}`;
   const m = s/60|0;
   if (m === 0) return sign+ssf;
   return `${sign}${m}:${ssf.padStart(6, '0')}`;
@@ -45,14 +46,18 @@ const f2s = (f: number) => {
 
 export const RadioGroup = ({name, value: val, values, onChange, ...props}: {
   values: (string | [value: string, label: string])[]
-} & React.ComponentProps<'input'>) => <>{values.map(o => {
+} & React.ComponentProps<'input'>) => {
-  const [value, label] = typeof o === 'string' ? [o, o] : o;
+  const {current: idp} = useRef(_uniqueId('rg-'));
-  return <div key={value} {...props}>
+  return <>{values.map(o => {
-    <input type='radio' name={name} value={value} checked={val===value}
+    const [value, label] = typeof o === 'string' ? [o, o] : o;
-      onChange={onChange} />
+    const id = idp+value;
-    <span>{label}</span>
+    return <div key={value} {...props}>
-  </div>;
+      <input type='radio' name={name} value={value} checked={val===value}
-})}</>;
+        onChange={onChange} id={id} />
+      <label htmlFor={id}>{label}</label>
+    </div>;
+  })}</>;
+};
 
 function App() {
   const [selected, setSelected] = useState(
@@ -60,6 +65,7 @@ function App() {
   );
   const [timeFormat, setTimeFormat] = useState('s');
   const f2t = timeFormat === 'f' ? f2f : f2s;
+  const {current: idpEv} = useRef(_uniqueId('ev-'));
 
   const [$lang, set$lang] = useState($lang0);
   useEffect(() => setLang($lang), [$lang]);
@@ -115,7 +121,7 @@ function App() {
         <div>
           <span>{L('timeFormat')}</span>
           <RadioGroup name='timeFormat' value={timeFormat}
-            values={[['s', 'ms'], 'f']}
+            values={[['s', 'ms'], ['f', 'frame']]}
             onChange={e => setTimeFormat(e.target.value)} />
         </div>
       </div>
@@ -142,11 +148,11 @@ function App() {
       <h3>Cutscenes</h3>
       <div>
         {events.map(id => <div key={id} className='option-ctn'>
-          <input
+          <input id={idpEv+id}
             type='checkbox' checked={selected[id]}
             onChange={e => setSelected(o => ({...o, [id]: e.target.checked}))}
           />
-          <span>{eventNames[id]}</span>
+          <label htmlFor={idpEv+id}>{eventNames[id]}</label>
         </div>)}
       </div>
     </section>

yarn.lock

@@ -1997,6 +1997,11 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
+"@types/lodash@^4.14.188":
+  version "4.14.188"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.188.tgz#e4990c4c81f7c9b00c5ff8eae389c10f27980da5"
+  integrity sha512-zmEmF5OIM3rb7SbLCFYoQhO4dGt2FRM9AMkxvA3LaADOF1n8in/zGJlWji9fmafLoNyz+FoL6FE0SLtGIArD7w==
+
 "@types/mime@*":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@types/mime/-/mime-3.0.1.tgz#5f8f2bca0a5863cb69bc0b0acd88c96cb1d4ae10"