Keyboard Navigation

[Venkata-Sai-Vishwanath-robo]

This PR improves the keyboard accessibility of the App Inventor by introducing the following features:

• Navigation in the project explorer: this enables the user to open projects, expand or collapse folders, and sort projects by name or date, using the keyboard.
• Navigation in dropdown menus: this allows the user to open and close the dropdown with the help of the enter key and navigate the dropdown items using the arrow keys.
• Navigation in Dialog boxes: this allows the user to cycle through the widgets inside a dialog box without letting the focus escape out of the dialog.
• Component addition: this allows the user to add a component to the app's workspace from the component palette by pressing the enter key and also allows the user to add components into a specific arrangement they can by having the required arrangement selected in the Source Structure Explorer. The same function could also be done by double-clicking the palette item.
• Accessing property editors with keyboard: this allows the user to open the popup attached to the property editor by pressing the enter key and the options in the popup are accessible with tab and arrow keys, upon closing the focus remains at the same spot.
• The visibility of UI elements when they are focused has been enhanced.
• Moving Components: this allows the user to move the selected component by pressing the alt + ↓/↑. This feature is not perfect and will require some changes.
• Keyboard shortcuts have also been added which are listed below.

Keyboard Shortcuts

Action	Key Combination
Focus component search box	/
Focus Components tree	T
Focus Hidden components checkbox	V
Focus Properties Panel	P
Switch between Designer and Block editor	Ctrl + Alt
Rename Component	Alt + N
Reset Connection	Alt + Shift + R
Refresh Companion Screen	Alt + R
Open/Close Backpack	Alt + B
Switch between Inline and External Inputs	Alt + I
Add comment to a block	Alt + K
Expand/Collapse block	Alt + O
Navigate up the blocks	Alt + S
Navigate down the blocks	Alt + W
Zoom in	Alt + +
Zoom out	Alt + -
Re-center	Alt + G
Open Shortcuts Dialog	Alt + ?

[AppInventorWorkerBee]

Can one of the admins verify this patch?

[ewpatton]

We may want to revisit this choice, since Alt on Windows typically maps to Cmd on macOS, and Cmd + R will refresh the page.

[SusanRatiLane]

We may want to revisit this choice, since Alt on Windows typically maps to Cmd on macOS, and Cmd + R will refresh the page.

Does't Ctrl usually map to Cmd on MacOS in GUI aps? I usually expect Alt to map to Option.

I realize that we have a Ctrl button, and that works as Ctrl for a lot of command line stuff. There's no consistent official mapping.

[Venkata-Sai-Vishwanath-robo]

Thanks for the feedback @ewpatton. I will look into these and fix them.
I will once go through the shortcuts in macOS and see for any more overlaps.
I still need to add code that adjusts the shortcut key messages based on whether the user is on Windows or macOS.
The community feedback is still pending, and I plan to complete it by the end of this week.

[SusanRatiLane]

Issues from testing Sep 4, using Mac Firefox:

1. I was unable to get the backpack to open using the shortcut.
2. Highlighting of trees is not consistent in Neo. Often, only the bottom border of the tree is highlighted when the tree has focus