Improve calculator's tooltip accessibility.

[polesye]

Add possibility to navigate through the hints via arrow keys.

Keyboard Support:
If focus is on the hint button:

• Enter: Open or close hint popup. Select last focused hint item if opening.
• Space: Open or close hint popup. Select last focused hint item if opening.

If focus is on a hint item:

• Left arrow: Select previous hint item.
• Up arrow: Select previous hint item.
• Right arrow: Select next hint item.
• Down arrow: Select next hint item.

Goal (composite):

Authors SHOULD ensure that a composite widget exist as a single navigation stop within the larger navigation system of the web page. Once the composite widget has focus, authors SHOULD provide a separate navigation mechanism for users to navigate to elements that are descendants or owned children of the composite element.

Related links:

• Menubar: ARIA
• aria-activedescendant
• composite

@jmclaus , @auraz , @frrrances please review.

[auraz]

👍 Please update ticket in Jira with all links that you've posted here.

[polesye]

@auraz done.

[jmclaus]

@polesye Nice job! It would be great if pressing on the ESC key would hide the help popup and give focus back to the help button. Right now, the only way to collapse the list is to tab forward (gives focus to = button) or backwards (gives focus to help button).

[jmclaus]

@polesye When using VoiceOver, the elements of the help popup are read twice.

[frrrances]

I would recommend adding one more list item at the top with the sr class to give instructions on keyboard navigation, maybe something like this:

<li class="sr" id="hint-instructions" tabindex="-1"><p>Use the arrow keys to navigate the tips or use the tab key to return to the calculator</p></li>

[polesye]

Done using aria-describedby attribute.

[frrrances]

Great improvement! Looks good to me. I just added one comment which is not a blocker about adding some instructions. 👍

[polesye]

It would be great if pressing on the ESC key would hide the help popup and give focus back to the help button. Right now, the only way to collapse the list is to tab forward (gives focus to = button) or backwards (gives focus to help button).

@jmclaus done.

[polesye]

When using VoiceOver, the elements of the help popup are read twice.

@jmclaus Strange. It works fine for me.

[jmclaus]

@polesye Great, Esc key works nicely now. 👍 to merge.