[terra-dropdown-button] Voice Over Focus does not go inside when opening with mouse.

[saket2403]

Bug Report

Description

Needs investigation for page jump issue which we found out in form-select issue #2682. Since
Terra-dropdown-button also uses terra-hookshot to render dropdown-list. we need to test terra-dropdown-button with IFrame.

[supreethmr]

The Voice Over Focus moves around in the page before going inside the dropdown. This was introduced due to the changes in PR #2766 , where the focus was moved out of the dropdown when opening it with a mouse click.
This is due to the Portal in Hookshot which is rendered into a DOM node that exists outside the DOM hierarchy of the parent component.

this issue has been addressed with PR : #2766

the page jump issue what we found in this component when rendered inside iframe

page jump issue seems to be not happening with dropdown button.

Added Iframe for DefaultDropdownButton.jsx in DisabledDropdownButton.test.jsx to re-create page jump Issue ( page scrolling to top on dropdown open ). the page scroll that is happening on dropdown open is expected scroll movement that keeps the active option at visible position on screen all the time.

As identified in terra-form-select page jump was happening due to setting focus to dropdown div on open. In case of terra-dropdown-button we will be setting focus to first item in list not to the dropdown div. this causes page to scroll to active item instead of scrolling to dropdown div (hookshot).

DisabledDropdownButton.test.jsx : ( Dropdown button with Iframe )

DefaultValueZero.test.jsx : ( Form-select with Iframe )

As seen in the above image page jump was not hiding selected item from visible viewport like terra-form-select where page was scrolled to top by ignoring opened dropdown div.

Since page is not hiding selected item of dropdown on open, So we may not require any code changes in dropdown button for Iframe scenario(page jump issue) like terra-form-select.

For reference I have created branch to re-create this issue of page jump on open.
Test examples : DisabledDropdownButton and DefaultValueZero can be used to re-create the above mentioned scenarios.

[supreethmr]

page jump issue mentioned in issue description was not reproducible in terra-dropdown button closing this issue.