JAWS Screen Reader not showing visual focus indicator for my mui checkbox

Question

So i have this issue in JAWS screen reader. In the browser this is the full HTML

<span class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-31 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary" aria-disabled="false"><span class="MuiIconButton-label"><input class="PrivateSwitchBase-input-34" tabindex="0" type="checkbox" data-indeterminate="false" aria-label="Add johndoe@gmail.com johndoe@gmail.com to selected items" value=""><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path></svg></span><span class="MuiTouchRipple-root"></span></span>

in the code above this is my code in the component

  <Checkbox
    checked={isSelected}
    onChange={onSelect}
    inputProps={{
      'aria-label': checkboxAriaLabel || 'Select item',
      tabIndex: 0,
    }}
    onFocus={(e) => {
      e.target.style.outline = `2px solid ${ 'pink'}`;
      e.target.style.outlineOffset = '2px';
    }}
    onClick={(e) => e.stopPropagation()}
  />

my issue here is that screen reader can read the aria-label, but the focus ring indicator doesn't show up

Answer 1

This is normal behavior. Arrow keys, when using JAWS, don't move the system focus. What they do is they allow the user to navigate in what is called virtual buffer. A web page is presented as kind of a text environment where the user can move by character, by word, by line, select, mark places, jump by HTML element such as heading, button, form field and so on. This is called virtual cursor mode.
So, in your case yes, Tab works as expected, and arrow keys don't. As I'm blind myself, I cannot tell you what happens visually when you don't use a screen reader and press arrow keys. I believe in this case the focus should move though, but I'm not 100% sure.
Also, not really related to your question, but I can't keep silence: your aria-label is waaay to verbose. It should be something like John Doe, john.doe@gmail.com. Because the "add to selection" meaning is conveyed by the screen reader saying "check box, (not) checked". That's it. See how, for example, Windows or Office settings are done. There is a check box saying "Show tool tips", for example, and not "Turn showing tool tips on" or something. It's not your fault per se, it's one of that modern trends we, blind community, are preaching against.