Issue Summary

Drag and drop feature is not keyboard accessible.

Elements name:

• oracledb-11g-prod
• Sara Peen
• 32GB DDR4-2400 ECC REG DIMM
• Solaris 11.3
• Intel(R) Xeon(R) CPU E7- 4830 @ 2.13GHz
  ..... etc.

Location of the elements: Image links, in the "Force" view section group image, in the "Force" view, in the "Object overview" modal.

Additional details: Using the mouse, we can re-arrange the position of the image links, from one place to another place. But this feature is not available to the keyboard users.

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. Then the graph will display in the Force view.
5. Check the above-mentioned image links.

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 :
Labels MUST be programmatically associated with their corresponding elements.

HOW TO FIX:
Fix this issue by using ONE of the following techniques:
1. Explicit label: Under most circumstances, the best technique is to use the <label> element with the for attribute. The value of the for attribute is the id attribute value of the <input> element.

<label for="fname">First Name:</label>
<input type="text" name="fn" id="fname">

2. Use an aria-label attribute or title attribute on the <input> to provide a label when there is no visible label.

<input type="text" aria-label="search"> <input type="submit" value="Search">

3. Use an aria-labelledby attribute on the <input> to reference a visible label. The value of the aria-labelledby attribute is the id attribute value of the visible text label.

<span id="nickname">Nickname:</span> <input type="text" aria-labelledby="nickname">

4. Implicit label (explicit label method is strongly preferred): Wrap the form element within the <label> element.

<label>First Name: <input type="text" name="fn"></label>

REFERENCE:
Deque University: https://dequeuniversity.com/class/forms2/labels/semantic-labels
W3C-WAI tutorial: https://www.w3.org/WAI/tutorials/forms/

BACKGROUND:
People who are blind cannot use the visual layout of a form to determine which labels go with which form elements. In order to be certain which label goes with which form element, the label and form element must be programmatically associated. When labels and form elements are programmatically associated, a screen reader user can put focus on a form element and the screen reader will automatically read the label and element type together. In addition, some coding methods will create a larger clickable area for the form element which benefits people with motor disabilities.

Screenshot

Screen Recording

screen recording

Workaround

workaround

Bug Ref: 745339

Bulldog Ref: JSMDC-12575