Skip to content

Commit

Permalink
fix: [Obs Infrastructure > Hosts][KEYBOARD]: Host flyout has buggy sc…
Browse files Browse the repository at this point in the history
…rolling when I expand the State dropdown menu (#192372)

Closes: elastic/observability-accessibility#98

## Description

The Obs Applications > Hosts > Host popout menu has a buggy keyboard
navigation behavior when I expand the `State` dropdown. If I press
`Down_Arrow` before tabbing into the State dropdown, the entire page
scrolls. This feels like a bug because I was not expecting the page to
shift. It creates an unexpected scroll event, so treating it as a
keyboard nav bug. I've attached an MOV file to show the behavior.

### Steps to recreate
1. Open the [Obs
Hosts](https://issue-serverless-bdwqw-pr183659-f2d99b.kb.eu-west-1.aws.qa.elastic.cloud/app/metrics/hosts)
view
2. Click double arrows next to a host in the table
3. Click the `Processes` tab in the flyout
4. Tab through to the State dropdown and press `Enter`
5. Press `Down_Arrow` to see the entire page scroll, but not the State
menu options
6. Press`Tab` to "drop into" the State menu
7. Press `Down_Arrow` again to see the menu scroll correctly


### What was changed?: 
1. Removed `ownFocus={false}` from `EuiFlyout`. This restores the
default user experience (UX) for `EuiFlyout` and resolves the mentioned
issue.
  • Loading branch information
alexwizp authored Sep 29, 2024
1 parent 8bc3911 commit fb79799
Show file tree
Hide file tree
Showing 2 changed files with 4 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,6 @@ export const Flyout = ({
return (
<EuiFlyout
onClose={handleOnClose}
ownFocus={false}
data-component-name={ASSET_DETAILS_FLYOUT_COMPONENT_NAME}
data-asset-type={asset.type}
>
Expand Down
4 changes: 4 additions & 0 deletions x-pack/test/functional/page_objects/infra_home_page.ts
Original file line number Diff line number Diff line change
Expand Up @@ -201,18 +201,22 @@ export function InfraHomePageProvider({ getService, getPageObjects }: FtrProvide
},

async goToHost() {
await browser.pressKeys(browser.keys.ESCAPE);
await testSubjects.click('openInventorySwitcher');
await testSubjects.find('goToHost');
return testSubjects.click('goToHost');
},

async goToPods() {
await browser.pressKeys(browser.keys.ESCAPE);
await testSubjects.click('openInventorySwitcher');
await testSubjects.find('goToHost');

return testSubjects.click('goToPods');
},

async goToContainer() {
await browser.pressKeys(browser.keys.ESCAPE);
await testSubjects.click('openInventorySwitcher');
await testSubjects.find('goToHost');
return testSubjects.click('goToContainer');
Expand Down

0 comments on commit fb79799

Please sign in to comment.