From e11da8252a86a53c2af154276b7b8a4e01d2d18c Mon Sep 17 00:00:00 2001 From: Alexey Antonov Date: Mon, 3 Jun 2024 19:00:22 +0300 Subject: [PATCH] fix: [Obs Infrastructure > Hosts][KEYBOARD]: Logs tab at the bottom of the page cannot be scrolled by keyboard (#184003) Closes: https://github.com/elastic/observability-dev/issues/3421 Closes: https://github.com/elastic/observability-dev/issues/3407 Closes: https://github.com/elastic/observability-dev/issues/3412 Closes: https://github.com/elastic/observability-dev/issues/3418 Closes: https://github.com/elastic/observability-dev/issues/3421 Closes: https://github.com/elastic/observability-dev/issues/3424 ## Summary The Obs Applications > Host Detail page has aLogs table that includes a hover-only detail view. This needs to also be keyboard focusable to be available to all users. Screenshot attached below. ## Steps to recreate 1. Open the [Obs Hosts](https://issue-serverless-bdwqw-pr183659-f2d99b.kb.eu-west-aws.qa.elastic.cloud/app/metrics/hosts) view 2. Click on one of the host name links 3. When the Host Detail opens, click on the Logs tab 4. Use the Tab key to move through the table 5. Verify the table row [ ... ] never appears when navigating by keyboard ## What was changed?: All the above-mentioned errors use a single component` x-pack/plugins/observability_solution/logs_shared/public/components/logging/log_text_stream` and can be fixed within it. 1. tab-index has been added to vertical_scroll_panel.tsx. 2. The logic displaying the button with menu has been updated using CSS. --- .../logging/log_text_stream/scrollable_log_text_stream_view.tsx | 2 +- .../logging/log_text_stream/vertical_scroll_panel.tsx | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/observability_solution/logs_shared/public/components/logging/log_text_stream/scrollable_log_text_stream_view.tsx b/x-pack/plugins/observability_solution/logs_shared/public/components/logging/log_text_stream/scrollable_log_text_stream_view.tsx index 959a2d99924dbd..fdb0d6a88f8a5d 100644 --- a/x-pack/plugins/observability_solution/logs_shared/public/components/logging/log_text_stream/scrollable_log_text_stream_view.tsx +++ b/x-pack/plugins/observability_solution/logs_shared/public/components/logging/log_text_stream/scrollable_log_text_stream_view.tsx @@ -204,7 +204,7 @@ export class ScrollableLogTextStreamView extends React.PureComponent< onVisibleChildrenChange={this.handleVisibleChildrenChange} target={targetId} hideScrollbar={hideScrollbar} - data-test-subj={'logStream'} + data-test-subj="logStream" isLocked={isScrollLocked} entriesCount={items.length} > diff --git a/x-pack/plugins/observability_solution/logs_shared/public/components/logging/log_text_stream/vertical_scroll_panel.tsx b/x-pack/plugins/observability_solution/logs_shared/public/components/logging/log_text_stream/vertical_scroll_panel.tsx index 6f0313ce459f0f..ec8d666ef9b878 100644 --- a/x-pack/plugins/observability_solution/logs_shared/public/components/logging/log_text_stream/vertical_scroll_panel.tsx +++ b/x-pack/plugins/observability_solution/logs_shared/public/components/logging/log_text_stream/vertical_scroll_panel.tsx @@ -248,6 +248,8 @@ export class VerticalScrollPanel extends React.PureComponent< scrollbarOffset={scrollbarOffset} onScroll={this.handleScroll} ref={this.scrollRef} + tabIndex={0} + className="eui-scrollBar" > {typeof children === 'function' ? children(this.registerChild) : null}