docs(shortcuts): add example usage for arrow keys

[brycecammo]

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Added example usage for arrow keys in the keyboard shortcuts section of the docs (after spending a bit too long yesterday trying to figure out the correct syntax).

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

(This is my first time creating a PR - let me know if I've done something wrong!)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	Oct 26, 2023 4:13am

[smarroufin]

Hi @brycecammo!

Thanks for the update, indeed the initial shortcuts doc lacks detail 😬
Your example is good. And if I may, in addition I would suggest displaying a more generic message to help others find the shortcut key they need, something like this after the list 🤷 :

::callout
To find out the appropriate shortcut key, please refer to the [`KeyboardEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values). The `KeyboardEvent.key` has to be written in lower case.
::

Feel free to improve my phrasing, it might not be that clear for everybody 😅

[brycecammo]

Good idea @smarroufin! I've updated with your suggestion.

[smarroufin]

LGTM 🙏

[benjamincanac]

Thanks 😊