Implemented keyboard navigation to operations menu

[j264415]

Issue:

#1718 - Accessibility Audit for Keyboard Navigation, Screen Reader and High Zoom

As documented in this issue I am solving:

• Lack of keyboard alternative for drag-and-drop operations
• Replicating the click function for edit favourites with keyboard navigation

Code changes:

• The HTMLCategory and HTMLOperations files were changed to include tabindex="0" , enabling access to operations via the Tab key.
• A keydown event listener was added to operations and categories to replicate mouse functionality.
• It shows and hides elements as well as adding recipes.
• TabIndex=0 added to elements within the Edit Favourites dialog
• On focus styling of elements with tooltips to match mouse hover
• Keydown event listeners added to favourite operations
• Function added to enable reordering of favorite operation using CTRL + arrow keys to mimic mouse drag function
• Arrow navigation of favourite items implemented

User-facing changes:

• Previously, keyboard navigation to access the Operations menu was unavailable for users.
• Now, users have the capability to navigate to the operations menu using the Tab key. They can then use either Enter or the Spacebar to open and close the operations panels.
• Additionally, users can now utilise the keyboard shortcut CTRL + Enter to add operations to the recipe field.
• tooltips show on focus
• Navigate to favourites star button then pressing either Enter or the Spacebar to open favourites dialog box.
• reorder instructions within dialog updated to include keyboard navigation

Replication for tabbing to side panel :

1. Navigate the web page using the Tab key
2. Show and hide operations using the Enter and Space keys
3. Press CTRL + Enter to add operations to the recipe.

To replicate navigating edit favorites with keyboard:

1. Open favourites dialog by tabbing to the star button
2. Press Enter or spacebar to open the edit dialog box
3. Tab to first operation
4. Press up/down arrow to navigate through the list (should loop back to top/bottom)
5. Press Arrow Right on any operation and either Arrow Left to focus back on the operation or Enter/ Space to delete from list
6. Pressing Ctrl+ Up Arrow / Down Arrow should move the focused operation up or down the list (should loop back to top/bottom)
7. Press Tab to exit the list of operations and either reset/save/or cancel

[CLAassistant]

All committers have signed the CLA.