fiddle icon indicating copy to clipboard operation
fiddle copied to clipboard

fix: tab focus for settings page

Open miqh opened this issue 2 years ago • 2 comments

Hello there,

Thought I'd try look into the issue (#1083) with tab focus misbehaving when the settings page is open.

I can confirm those tooltips come about because tabbing through the settings page eventually runs out of elements and goes on to tab through elements that are part of either the header or editor area.

The least invasive solution I could think of is to ensure the header and editor area elements are made invisible. display: none is a bit more destructive than visibility: hidden, because the former may interfere with components not rendering at all and potentially losing their state.

Now, I'm not awfully familiar with MobX, but I tried my best to work in some changes that do what I described above.

Happy to take feedback and revise (or add a test, which I couldn't work out how to do for this) as necessary. 🙂


As an aside, I was curious why tabbing inside those overlay dialogs worked better, so I also looked there at what's going on. It seems to be that the underlying Blueprint dialog implementations have some special code which ensure tabbing only cycles through within the overlay.

miqh avatar Oct 01 '22 09:10 miqh

Coverage Status

Coverage decreased (-0.1%) to 91.395% when pulling 20432c2cde836edfb2ad2a3ef7354dcc3c8e7d4b on miqh:fix/settings-tab-focus into 8cbc9c998153d512da28413204a3d5618aa36dd7 on electron:main.

coveralls avatar Oct 03 '22 20:10 coveralls

@erickzhao, funny you should ask that...

I actually started out making changes in app.tsx to apply the CSS classes there because it's obviously a more central choke point. However, I wasn't able to figure out how to do it.

I think something needs to be done with that plain old JSX element being passed into ReactDOM.render() to make it aware and observing the isSettingsShowing property part of application state. My MobX-fu and understanding isn't up to scratch on how best to do this I'm afraid. All I know is that it's probably not wise to be conditionally rendering Header or OutputEditorsWrapper for fear that might do strange things to application state.

If you can point me in the right direction I can try have another stab, otherwise I'll just close these changes.

miqh avatar Oct 06 '22 13:10 miqh

@erickzhao do we want to move forward here?

codebytere avatar Jan 11 '23 19:01 codebytere