Business Services/Create Objects : Interactive element is Inaccessible by keyboard and no conforming alternative.

Issue Summary

The element is not accessible by keyboard alone and there is no conforming accessible version of the same functionality reachable from the non-conforming page.

Tested URL

https://instenv-21072-japp.instenv.internal.atlassian.com/secure/ObjectSchema.jspa?id=3&typeId=43&mode=object&objectId=201

Steps to Reproduce

1. Launch the URL
2. In the Insights menu, select any object schema.
3. In the main content area, use keyboard tab functionality to reach "Object Graph".
4. Observe that when we use the tab functionality again it skips the "Print" and "QR code" elements and directly goes to the "Stop Watching" button.

Actual Results

In the main content area, the elements such as "Print" and "QR code" do not have keyboard support. When the keyboard-only users or screen reader users navigates the webpage with the help of the keyboard, the elements get skipped after "Object Graph" and it directly goes to the Stop Watching" button. The "Print" and "QR code" elements are active with the mouse click. This will make it the keyboard-only users difficult to use this feature.

Expected Results

The interactive element such as “Print” and “QR code”  must be coded as native <button> elements so that the appropriate role of the button will be announced for screen reader users on focus and they will also receive keyboard focus in tab traversal. As a workaround (not recommended), the <span> element can be provided with role=” button” and tabindex=”0”.

In addition, the button should be provided with an “aria-expanded” property and its value should be toggled programmatically to true when the content is displayed else false at other times.

Screenshot

Screen Recording

Screen Recording 2022-05-31 at 2.14.17 PM.mov

Workaround

Currently, there is no known workaround for this behaviour. A workaround will be added here when available.

Bug Ref: 748637

Bulldog Ref: JSMDC-12821