Issue Summary

Keyboard focus or touch screen swiping falls on an element that is hidden or empty.

Elements:

• EMPLOYEES(1)
• View all inbound references button
• Drop files to attach or click to browse
• Download button
• Filter by name or description field
  • • • etc

Location:
Present in "Inbound refences" button and "Attachments" button

Additional details:
When the above buttons are in collapsed state, the focus is going to under the content present in these buttons.

Tested URL

https://instenv-5971-nizh.instenv.atl-test.space/secure/insight/assets/INITSM-77?v=0

Steps to Reproduce

1. Step 1

Actual Results

Actual results

Expected Results

Fix Information
RULE :
The visual state of an active user interface component MUST have sufficient contrast of 3 to 1 with the adjacent background. Exceptions exist.

HOW TO FIX:
Fix this issue by adjusting the visual focus indicator or state indicator (e.g. selected, checked, pressed, etc.) of the user interface component and/or background to increase the contrast with either the inner or outer adjacent background to at least 3 to 1.

REFERENCE:
WCAG Understanding document: https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast

BACKGROUND:
People who have low vision or are colorblind may have difficulty perceiving that an element is interactive or what its state is - e.g. whether it has keyboard focus, is selected/checked/pressed, etc. - if the contrast between the element boundaries and/or state indicators and its background or adjacent colors is insufficient. When an interactive element's visual boundaries and state indicators have adequate contrast, people who have low vision or are colorblind are more likely to be able to perceive which elements on the screen are interactive and what their current state is.

Screenshot

Screen Recording

screen recording

Workaround

workaround

Bug Ref: 748479

Bulldog Ref: JSMDC-13232