Changed Shortcut format for better accessibility

[Sheikh-JamirAlam]

Fixes #2355

Changes:
Removed the symbols used in shortcuts for windows users to "Ctrl + Shift" format so that every user can understand.

I have verified that this pull request:

• has no linting errors (npm run lint)
• has no test errors (npm run test)
• is from a uniquely-named feature branch and is up to date with the develop branch.
• is descriptively named and links to an issue number, i.e. Fixes #123

[welcome]

🎉 Thanks for opening this pull request! Please check out our contributing guidelines if you haven't already.

[lindapaiste]

Here's some before and after screenshots

[lindapaiste]

I definitely think that this is better for accessibility! My only concern is how some of the longer shortcuts look in the dropdown menus. I wonder if we want to decrease the font size of the shortcut and/or increase the width of the dropdown to better accommodate it.

[lindapaiste]

You will need to run the command npm test -- -u and then commit and push the changes to the Nav testing snapshot in order for it to pass the tests.

[Sheikh-JamirAlam]

@lindapaiste Decresing the font size might be not be a good idea as on a bigger screen its hard to see unless u look closely, in my opinion. Here are some screenshots where I decresed it to 0.85rem, which was 1rem originally.

So I went with the increase in width of the dropdown option. But if we increase it just by value then there's too much whitespace in the "Help" menu.

So instead I utilized the flex property so that the dropdown menu size is now dynamically set according to the options.

I would like to hear your opinion about this.

[mkmori]

This is exactly what I came here looking for. The screenshots look good---I hope it's caught up and makes it to production!

Whenever I need to refamiliarize myself with a shortcut, I just guess at what the carat vs fat arrow mean...and the fat arrow is on the keyboard I'm using right now! 😅 (Good example of a momentary/transient accessibility issue....)

I did follow the link to Sublime Text, only to find even more mysterious symbols, (rather than a legend for those used in the web editor)....

If the length of shortcuts were a concern, just spelling out "Ctrl" would probably be sufficiently disambiguating for me, personally. A legend might also suffice, (e.g., on hover and/or on the Keyboard Shortcuts pop-up)---it's only for occasional reference after all--but @Sheikh-JamirAlam 's solution above seems the most direct and helpful, (esp. the later versions, ensuring both legible font size and adequate space between the menu option and the shortcut).

[raclim]

Thanks so much for your work on this! I think a few more UI adjustments could probably be made, but I think it's overall good for now and can be made down the line, so I'm going to get this in!