Make it possible to navigate Product Opener using keyboard shortcuts

[teolemon]

What

Make it possible to navigate Product Opener using keyboard shortcuts

• product edition (e)
• product JSON (a)
• view mode (v), etc.

Code pointers

• Code is available here: https://github.com/openfoodfacts/power-user-script

Add "Edit" keyboard shortcut for logged users
Clicking E in the page would open edit mode.

Part of

• 🐣 Road to contribution / First time experience #5708

[VaiTon]

If this is approved I can start working on it. 😄

[CharlesNepote]

@VaiTon it would be great.

We shouldn't have only one keyboard shortcut but several related to the different part of the page (the HTML code already provide many "id"s in the page, but we can add more if necessary).

The keyboard shortcuts should be consistent between edit and view modes.

I think we first have to ask feedbacks from huge contributors such as SebLeOuf, @teolemon, @TaciteOFF, @stephanegigandet, @aleene, @moon-rabbitOFF, @hangy, @offvince, etc. [TODO: add more ?]...

Also we have to carefully design all the keyboard shortcuts. Suggestions:

• "E" can be for edit mode
• "P" could be for "Product characteristic" section (view mode: <h2>Product characteristics</h2> => <h2 id="product_characteristic">Product characteristics</h2> (not very useful) ; edit mode: <legend>Product characteristics</legend> => add the id)
• "P" could also be for the "product name" field (edit mode: id="product_name_fr" when fr)
• "I" could be for "Ingredients" section (view mode: <h2>Ingredients</h2> => <h2 id="ingredients_section">Ingredients</h2> ; edit mode: <legend>Ingredients</legend> => add the id)
• "I" could also be for the "Ingredients" field (edit mode: id="ingredients_text_fr" when fr)
• "N" could be for "Nutrition facts" section (view mode: <h2>Nutrition facts</h2> => <h2 id="nutrition_facts_section">Nutrition facts</h2> ; edit mode: <legend>Nutrition facts</legend> => add the id)
• "N" could also be for the "Energy" field in edit mode (id="nutriment_energy")
• "Q" for "quantity"
• "B" for "brands"
• "C" for "categories" (very important field)
• "L" for "labels"
• "F" for "Dietary fiber" (often not completed for historical reasons)

Finally, I Think we might use pure HTML rather than Javascript, see: https://www.w3schools.com/tags/att_global_accesskey.asp

[CharlesNepote]

I started a Greasemonkey script to let power user play with it and suggest their own hacks:
https://gist.github.com/CharlesNepote/f6c675dce53830757854141c7ba769fc

[hangy]

Finally, I Think we might use pure HTML rather than Javascript, see: https://www.w3schools.com/tags/att_global_accesskey.asp

👍 Much better for accessibility reasons than a custom JS-only solution.

About the shortcuts to use: I wonder if we should take I18N/I10N into account from the get-go. We could let translators choose the access keys, so that the shortcuts make sense for their specific locale.