Add explicit Tab support to keyboarding

[HeyImChris]

Please select one of the following

• I am removing an existing difference between facebook/react-native and microsoft/react-native-macos 👍
• I am cherry-picking a change from Facebook's react-native into microsoft/react-native-macos 👍
• I am making a fix / change for the macOS implementation of react-native
• I am making a change required for Microsoft usage of react-native

Summary

Tab is an interesting character to receive a keyboard event for. Tab alone provides an OS event of character @" " (the width of a tab). However, when paired with the shift modifier key, the Tab event character becomes an empty string modified by the shift bar.

This is likely due to the multiple purposes of the tab key given that tab is used by the OS to traverse between many accessible views.

The easiest fix here is to slot the Tab key along with Escape as a special character that we need to explicitly check the key code for. This also aligns with the W3 standard section 3.3 Whitespace.

After this gets into master I'll make PR's checking it into the 0.62-stable and 0.63-stable branches.

Changelog

[macOS] [Bug] - Tab keyboard support

Test Plan

Added tab to the keyboard events test app. Both tab and shift tab can now propagate to our JS when listening for tab events.

Microsoft Reviewers: Open in CodeFlow

[anandrajeswaran]

Can/should usage of this be added to RNTester - both as a test bed for future changes and an illustrative guide on how/when clients should consider listening for tab keys? I am kinda curious on the scenario that needs this and how a client would be using the event.

Probably related, I'm curious what you mean by "multiple purposes of the tab key" in the description. I had thought tab was a pretty consistent and opinionated key on macOS so I'm curious why someone would be overriding its behavior.

[HeyImChris]

Can/should usage of this be added to RNTester - both as a test bed for future changes and an illustrative guide on how/when clients should consider listening for tab keys? I am kinda curious on the scenario that needs this and how a client would be using the event.

Probably related, I'm curious what you mean by "multiple purposes of the tab key" in the description. I had thought tab was a pretty consistent and opinionated key on macOS so I'm curious why someone would be overriding its behavior.

Tab key has the add whitespace behavior and the toggle around views behavior which might be why the event char associated with tab is different from that of shift+tab as tab alone has a character representation but shift+tab doesn't.

An internal scenario for this is in Excel's CardView on macOS. I'm waiting to hear back specifics but believe it'll be used in their expanded matrix view for navigation.

[anandrajeswaran]

Can/should usage of this be added to RNTester - both as a test bed for future changes and an illustrative guide on how/when clients should consider listening for tab keys? I am kinda curious on the scenario that needs this and how a client would be using the event.
Probably related, I'm curious what you mean by "multiple purposes of the tab key" in the description. I had thought tab was a pretty consistent and opinionated key on macOS so I'm curious why someone would be overriding its behavior.

Tab key has the add whitespace behavior and the toggle around views behavior which might be why the event char associated with tab is different from that of shift+tab as tab alone has a character representation but shift+tab doesn't.

An internal scenario for this is in Excel's CardView on macOS. I'm waiting to hear back specifics but believe it'll be used in their expanded matrix view for navigation.

The tough part is that doesn't seem like a realistic distinction for me. In react-native I don't think we're ever going to want to recreate NSTextView (which has the special behavior), so other than that it should just follow the key view loop. If someone is using an rn control that translates to an NSTextView it should just work. So the question still is what customization we want to do and whether that is a good thing to do on the platform. Adding the scenario to the test app is a good way to illustrate that

[HeyImChris]

Can/should usage of this be added to RNTester - both as a test bed for future changes and an illustrative guide on how/when clients should consider listening for tab keys? I am kinda curious on the scenario that needs this and how a client would be using the event.
Probably related, I'm curious what you mean by "multiple purposes of the tab key" in the description. I had thought tab was a pretty consistent and opinionated key on macOS so I'm curious why someone would be overriding its behavior.

Tab key has the add whitespace behavior and the toggle around views behavior which might be why the event char associated with tab is different from that of shift+tab as tab alone has a character representation but shift+tab doesn't.

An internal scenario for this is in Excel's CardView on macOS. I'm waiting to hear back specifics but believe it'll be used in their expanded matrix view for navigation.

Okay so alternative solution here... we scrap this review and add NSView props to RCTView for key-view loop management (e.g. canBecomeKeyView, nextKeyView, previousKeyView, etc.) and clients can use the system defined tab behavior to navigate around controls without actually overriding what the system tab behavior does

[anandrajeswaran]

Can/should usage of this be added to RNTester - both as a test bed for future changes and an illustrative guide on how/when clients should consider listening for tab keys? I am kinda curious on the scenario that needs this and how a client would be using the event.
Probably related, I'm curious what you mean by "multiple purposes of the tab key" in the description. I had thought tab was a pretty consistent and opinionated key on macOS so I'm curious why someone would be overriding its behavior.

Tab key has the add whitespace behavior and the toggle around views behavior which might be why the event char associated with tab is different from that of shift+tab as tab alone has a character representation but shift+tab doesn't.
An internal scenario for this is in Excel's CardView on macOS. I'm waiting to hear back specifics but believe it'll be used in their expanded matrix view for navigation.

Okay so alternative solution here... we scrap this review and add NSView props to RCTView for key-view loop management (e.g. canBecomeKeyView, nextKeyView, previousKeyView, etc.) and clients can use the system defined tab behavior to navigate around controls without actually overriding what the system tab behavior does

To me that seems like it would make it easier for clients as it would decrease the amount they would have to recreate, but I still think seeing an example of recommmended usage in RNTester would help make that clear

[HeyImChris]

Can/should usage of this be added to RNTester - both as a test bed for future changes and an illustrative guide on how/when clients should consider listening for tab keys? I am kinda curious on the scenario that needs this and how a client would be using the event.
Probably related, I'm curious what you mean by "multiple purposes of the tab key" in the description. I had thought tab was a pretty consistent and opinionated key on macOS so I'm curious why someone would be overriding its behavior.

Tab key has the add whitespace behavior and the toggle around views behavior which might be why the event char associated with tab is different from that of shift+tab as tab alone has a character representation but shift+tab doesn't.
An internal scenario for this is in Excel's CardView on macOS. I'm waiting to hear back specifics but believe it'll be used in their expanded matrix view for navigation.

Okay so alternative solution here... we scrap this review and add NSView props to RCTView for key-view loop management (e.g. canBecomeKeyView, nextKeyView, previousKeyView, etc.) and clients can use the system defined tab behavior to navigate around controls without actually overriding what the system tab behavior does

To me that seems like it would make it easier for clients as it would decrease the amount they would have to recreate, but I still think seeing an example of recommended usage in RNTester would help make that clear

Cool yea I like that plan more too. When I add key-view loop support I can add a new test page for it

[HeyImChris]

Closing this PR to make a new one that instead of just exposing tab, will allow clients to set props like nextKeyView and previousKeyView on their views and just use the default tabbing as the OS allows

[HeyImChris]

There have been some valid client scenarios brought up since closing this that there is still value in tab support. I'll add this but then still add key-view looping support as well.