focus lock and nvda browse mode.

[manatde]

trafficstars

I am using focus lock on my modal. tabbing is working perfectly. continuous tabbing inside the modal working as a loop. This is good for me. But in browse mode of NVDA , inside the focus lock arrow keys are working but it is not looping. Could you please give some suggestion to fix this?

[theKashey]

This is correct behavior - arrow keys are not changing "active", ie focused elements, thus you may escape the lock. There is another library to complete this case - (aria-hidden)[https://github.com/theKashey/aria-hidden], which will hide the rest of a document from screen readers, and "fix" the problem that way. Not sure it would properly handle looping, but should do the job.

You may try it, replacing react-focus-lock with react-focus-on with scroll lock disabled

import {FocusOn} from 'react-focus-on';

<FocusOn 
  scrollLock={false} // disable scroll lock, you might not need it
  noIsolation // disable click handler isolation, you might not need it
>
  your content
</FocusOn>

^ by default scroll lock is quite aggressive - locking focus, scroll, casting aria-hidden on the rest and appling pointer-events:none to all the hidden nodes.

[manatde]

Thanks a lot Kashey

[stale[bot]]

This issue has been marked as "stale" because there has been no activity for 2 months. If you have any new information or would like to continue the discussion, please feel free to do so. If this issue got buried among other tasks, maybe this message will reignite the conversation. Otherwise, this issue will be closed in 7 days. Thank you for your contributions so far.