Issue Description

When users activate the tree view (which is visible upon activating the graph button) in the interactive image links such as 'Business services', 'CPU', 'Memory', 'Network Interface' etc. are missing keyboard support.

Steps to Reproduce

1. Click on the "oracledb-11g-prod" button, just beside the "Affected Server:".
2. The "Object Overview" dialog will pop up.
3. Activate the "Show graph" icon button.
4. Activate the "Tree" button.
5. The graph will be available in tree view.

Screenshot

Actual Behaviour

The interactive image links such as 'Business services', 'CPU', 'Memory', 'Network Interface' etc. are missing keyboard support. Additionally, provide a descriptive aria-label.

Expected Result

Apply the following changes:

• Modify the scripts to ensure that the content is available on focus as well as on hover.
• onfocus and onblur keyboard handlers can be used to ensure that the images are available for keyboard-only users.
•  Specify key listeners to make sure that the content becomes visible when users press the Tab and Up/Down Arrow keys.
• Add a hidden instruction for the benefit of screen reader users to inform them about the presence of the content. Add an instruction, such as "Press the tab key to access the content”. This instruction should be placed before entering the interactive objects area.

Provide role="button" tabindex="0" to <span> elements to make sure button receive focus and appropriate role is announced.

Workaround

Currently, there is no workaround available. 

Bug Ref: 745140

Bulldog Ref: JSMDC-12550