Radio button doesn't visually focus when tabbed to.

[bgpete]

Bug

Radio widget does not apply the "focused" class when focused.

Code

  <div
    key="root"
    classes={[
    theme.variant(),
    themeCss.root,
    checked ? themeCss.checked : null,
    disabled ? themeCss.disabled : null,
    focus.isFocused('root') ? themeCss.focused : null,
    valid === false ? themeCss.invalid : null,
    valid === true ? themeCss.valid : null,
    readOnly ? themeCss.readonly : null,
    required ? themeCss.required : null
    ]}
  >
  ...
  <input
    id={idBase}
    {...formatAriaProperties(aria)}
    classes={themeCss.input}
    checked={checked}
    disabled={disabled}
    focus={focus.shouldFocus()}
    aria-invalid={valid === false ? 'true' : undefined}
    name={name}
    readonly={readOnly}
    aria-readonly={readOnly === true ? 'true' : undefined}
    required={required}
    type="radio"
    value={value}
    onblur={() => onBlur && onBlur()}
    onchange={(event: Event) => {
    event.stopPropagation();
    const radio = event.target as HTMLInputElement;
    onValue(radio.checked);
    }}
    onfocus={() => onFocus && onFocus()}
    onpointerenter={() => onOver && onOver()}
    onpointerleave={() => onOut && onOut()}
  />

Expected behavior:

focus.isFocused('root') is true and applies the class

Actual behavior:

focus.isFocused('root') is always false because it is, indeed, the input that gets the focus.

[bgpete]

The input is what gets the focus when the widget is tabbed to. Apply a key="input" to the input, and change to focus.isFocused('input') to apply the class. Also probably need to add a focus.focus() in the onfocus handler to spur the redraw.