Allow keyboard navigation in browser on product detail pages, by fixi…

[hostep]

…ng fotorama library to not change to a different image when pressing left or right arrow key in combination with certain modifier keys on your keyboard.

Description

I'm trying to use my keyboard as much as possible during my work since I find it more efficient then using a mouse/trackpad.
However, if you end up on a product detail page with images in Magento, you can not use your keyboard to navigate to the previous or next page in your browser history.

Previously the fotorama library got triggered for switching to the next or previous image by pressing the left or right arrow key, but when pressing certain modifier keys to go back/forward in the browsers history, fotorama intercepted this and blocked this, which is really annoying.

This PR should fix this.

I researched a little bit what keyboard shortcuts are used in different browsers on different operating systems, and it looks like those are:

• macOS: cmd + left/right arrow key
• linux: alt + left/right arrow key
• windows: alt + left/right arrow key

It looks like all major browsers seem to follow this, but this should be tested by someone having access to all those different variants.
I've only tested on macOS with Google Chrome 69.0.3497.100, Firefox 62.0.2 and Safari 12.0

Also see:

• https://support.google.com/chrome/answer/157179?hl=en
• https://support.mozilla.org/en-US/kb/keyboard-shortcuts-perform-firefox-tasks-quickly#w_navigation
• https://support.microsoft.com/en-us/help/12445/windows-keyboard-shortcuts

The minified fotorama file was manipulated manually because I don't know how the minified file got generated.
I've tested Magento both in development as in production modus (with minify js files enabled) and everything seems to work perfectly fine.

Fixed Issues (if relevant)

None that I could find.

Manual testing scenarios

1. Setup a clean Magento installation
2. Add a product in the backend with at least a couple of images (I tested with 3 images)
3. Navigate in your browser to some random page (not the product detail page)
4. Now go to that product detail page
5. Click some link in the footer, just so you have a page in the history of your browser to go forward to from the product detail page
6. Navigate to the previous page (the product detail page) by clicking the back button or keyboard shortcut
7. Test the image gallery, by pressing the left & right arrows, they should work
8. Test the browser navigation by pressing either cmd on macOS or alt on linux/windows + left & right arrow keys

Contribution checklist

• Pull request has a meaningful description of its purpose
• All commits are accompanied by meaningful commit messages
• All new or changed code is covered with unit/integration tests (if applicable)
• All automated tests passed successfully (all builds on Travis CI are green)

[magento-engcom-team]

Hi @hostep. Thank you for your contribution
Here is some useful tips how you can test your changes using Magento test environment.
Add the comment under your pull request to deploy test or vanilla Magento instance:

• @magento-engcom-team give me test instance - deploy test instance based on PR changes
• @magento-engcom-team give me $VERSION instance - deploy vanilla Magento instance

For more details, please, review the Magento Contributor Assistant documentation

[VladimirZaets]

@magento-engcom-team give me test instance

[magento-engcom-team]

Hi @VladimirZaets. Thank you for your request. I'm working on Magento instance for you

[okorshenko]

@magento-engcom-team give me 2.3-develop instance

[magento-engcom-team]

Hi @okorshenko. Thank you for your request. I'm working on Magento 2.3-develop instance for you

[magento-engcom-team]

Hi @okorshenko, here is your Magento instance.
Admin access: https://i-18212-2-3-develop.engcom.dev.magento.com/admin
Login: admin Password: 123123q
Instance will be terminated in up to 3 hours.

[okorshenko]

@magento-engcom-team give me test instance

[magento-engcom-team]

Hi @okorshenko. Thank you for your request. I'm working on Magento instance for you

[magento-engcom-team]

Hi @okorshenko, here is your new Magento instance.
Admin access: https://pr-18212.engcom.dev.magento.com/admin
Login: admin Password: 123123q

[magento-engcom-team]

Hi @sidolov, thank you for the review.
ENGCOM-3039 has been created to process this Pull Request

[magento-engcom-team]

Hi @hostep. Thank you for your contribution.
We will aim to release these changes as part of 2.3.1.
Please check the release notes for final confirmation.