Issue description

Hidden content is read by screen reader users when they try to navigate the 'Inbound References' dropdown in reading mode.

Tested URL

https://instenv-19536-ipiz.instenv.internal.atlassian.com/secure/insight/assets/ASDITSM-21

Steps to reproduce

1. Activate the URL: https://instenv-19536-ipiz.instenv.internal.atlassian.com/secure/insight/assets/ASDITSM-21
2. With the screen reader running, navigate to the 'Inbound references' dropdown.
3. Make sure to keep the dropdown in a collapsed state.
4. Navigate through the dropdown in reading mode using the TAB key.
5. Observe the invisible content read by the screenreader.

Screen recording

CFF2B9FA-A27A-4D83-BA3D-1F2978F5EF95_2_0_a.mov

Actual behaviour

While navigating with the screen reader running in reading mode, the 'Inbound references' dropdown is in a collapsed state. It can be observed, that the focus moves to the invisible contents: “Employees(1)” and "View all inbound references" of the 'Inbound references' dropdown. This causes confusion for screen reader users and can result in users interacting with the wrong content.

Expected behaviour

It is important for the users to only access the content which is visually shown on screen. aria-hidden=”true” can be used to hide the background content from the screen reader.

Also, the "aria-hidden" attribute should be removed from the page source when the dropdown is in an expanded state to ensure the content which is visible should not affect the output generated by the screen reader hence providing a seamless experience.

Workaround

Currently, there is no workaround available.

Bug Ref: 748472

Bulldog Ref: JSMDC-13192