Object Overview Modal with default force mode graph : State of active component lacks color contrast ratio 3:1.

Issue Summary

The state of an ACTIVE user interface component such as does not have at least a 3:1 luminosity contrast ratio with either the inner or outer adjacent background.

1) Element: Links as
-Hide
-Info
-Configure
-unlocked

Location: Located beside graph, in "Force" view, at the "Object overview" modal

a) Contrast ratio details:
Focus indicator color: rgb(76, 154, 255)
Inner Background: #F5F5F5
The contrast ratio is: 2.6:1

b) Contrast ratio details:
Focus indicator color: rgb(76, 154, 255)
Outer Background: #FFFFFF
The contrast ratio is: 2.8:1

2) Element: Buttons as "Tree" and "Back to filter view"

Location:
-Tree button, located beside "Force" button to the right side of "Object overview" modal
-Back to filter view button, located at the end of "Object overview" modal

a) Contrast ratio details:
Focus indicator color: rgb(76, 154, 255)
Inner Background: #ECEDF0
The contrast ratio is: 2.4:1

b) Contrast ratio details:
Focus indicator color: rgb(76, 154, 255)
Outer Background: #FFFFFF
The contrast ratio is: 2.8:1

3) Element: Link as "Close"

Location: Located beside "Back to filter view" button at the "Object overview" modal

Contrast ratio details:
Focus indicator color: rgb(76, 154, 255)
Background: #FFFFFF
The contrast ratio is: 2.8:1

Steps to reproduce:
1. Click on the "oracledb-11g-prod" button, just beside the "Affected Server:" text, in the "Can we get this server request approved?" page.
2. Then the "Object Overview" modal will display.
3. Click on the "Show graph" icon button.
4. Click on the "Force" button.
5. Will get above mentioned elements.

Tested URL

https://instenv-5971-nizh.instenv.atl-test.space/projects/JSM/queues/custom/31/JSM-111

Steps to Reproduce

1. Step 1

Actual Results

Actual results

Expected Results

Fix Information
RULE :
The reading and navigation order MUST be logical and intuitive.

All focusable elements MUST have a visual focus indicator when in focus.

HOW TO FIX:
Fix this issue by using ONE of the following techniques:
1.If the element should not be visible or focusable, remove the element from the DOM or hide it from all users with CSS such as display:none.
2.If the element is meant to be visible but not interactive, make it visible and remove the focus state.
3.If the element is meant to be visible and interactive, then ensure that it is both focusable and visible to all users.

REFERENCE:
Deque University: https://dequeuniversity.com/class/input-methods2/keyboard-input/tab-order
Deque University: https://dequeuniversity.com/class/input-methods2/keyboard-input/visual-focus-indicator

BACKGROUND:
When an element that is not visible receives keyboard focus, sighted keyboard users and screen reader users may be left wondering if they are missing content or functionality. Every focusable element must have content and be visible. Then sighted keyboard users and screen reader users will know where their focus is and can be certain they are not missing content or functionality.

Screenshot

Screen Recording

screen recording

Workaround

workaround

Bug Ref: 745814

Bulldog Ref: JSMDC-12586