Crystal: docs: Better keyboard navigation support

[mmKALLL]

The reference pages generated by crystal docs seem to have poor support for keyboard navigation (on Chrome, at least).

For example, try opening one of the API reference pages, such as https://crystal-lang.org/api/latest/String.html , and scrolling with arrow keys or Page Up / Page Down. What happens? Nothing! :cry:

I would expect to be able to open a tab, type in a few letters of my beloved String class, hit enter to get whisked to the awesome reference page, and move around the page without lifting my hands from the keyboard (which causes mild wrist pain). Chrome takes care of all the parts except the last, which is a bit unusual and negatively affects the user experience.

Pressing tab to bring focus does no better - it selects the class name from the left navigation column, and attempts to scroll only affect the navigation column. Tab-scrolling through all the class names to get focus on a link in the main-content div works, but it does take a lot of precious time and energy.

---

Would it be possible to have focus on the main content after page has finished loading, to be able to scroll the content using arrow keys? Bonus points if the first TAB press focuses on the search bar.

Keyboard control after a partial search works great - until the next page is loaded, at least. (Scrolling down beyond screen edge with arrow keys doesn't auto-scroll the search-results div though.)

---

Tested on Chrome 67.0 on Windows 10 and Ubuntu 18.04.

[straight-shoota]

IMHO the API docs need a general overhaul of all components, including the generator implementation, content structure, visual design and user interface.

I guess a simple improvement such as setting focus on the main panel should be pretty easy to implement. More complex changes should probably hold back until the overall concept is revisited.

[mmKALLL]

I tried fiddling around with this for a bit, doing things like document.getElementsByClassName('main-content')[0].focus; in https://github.com/crystal-lang/crystal/blob/master/src/compiler/crystal/tools/doc/html/js/doc.js . It didn't work locally, though.

While modifying that file _should_ be enough to implement this, it seems like something is done to mess with the focus and key event propagation.

The search shortcuts work like a charm though, not sure why I tried TAB to focus on search instead of S. Maybe because pressing S hides the side panel in https://crystal-lang.org/docs/ , instead of searching?

[proyb6]

@straight-shoota I have probably a massive idea for overhaul, make each APIs useful to visualise how it works.