From 01b9478cf6c9f8f33efd9baf9979541d0e3eee2e Mon Sep 17 00:00:00 2001
From: Giorgos Bamparopoulos <georgios.bamparopoulos@elastic.co>
Date: Thu, 26 Sep 2024 19:37:54 +0300
Subject: [PATCH] Add rowgroup, row and cell attributes to log stream
 components (#192841)

Closes https://github.com/elastic/observability-accessibility/issues/123

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../log_text_stream/loading_item_view.tsx     | 56 ++++++++++++-------
 .../log_text_stream/log_text_separator.tsx    |  8 ++-
 .../log_text_stream/vertical_scroll_panel.tsx |  1 +
 3 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/x-pack/plugins/observability_solution/logs_shared/public/components/logging/log_text_stream/loading_item_view.tsx b/x-pack/plugins/observability_solution/logs_shared/public/components/logging/log_text_stream/loading_item_view.tsx
index 72490b5936943..68b21ad8d029e 100644
--- a/x-pack/plugins/observability_solution/logs_shared/public/components/logging/log_text_stream/loading_item_view.tsx
+++ b/x-pack/plugins/observability_solution/logs_shared/public/components/logging/log_text_stream/loading_item_view.tsx
@@ -63,13 +63,20 @@ export class LogTextStreamLoadingItemView extends React.PureComponent<
       onStreamStart,
     } = this.props;
 
-    const shouldShowCta = !hasMore && !isStreaming;
+    const shouldShowCta = !hasMore && !isStreaming && !isLoading;
 
     const extra = (
-      <LoadingItemViewExtra justifyContent="center" alignItems="center" gutterSize="m">
-        {isLoading || isStreaming ? (
+      <LoadingItemViewExtra
+        justifyContent="center"
+        alignItems="center"
+        gutterSize="m"
+        {...(shouldShowCta ? { role: 'row' } : {})}
+      >
+        {(isLoading || isStreaming) && (
           <ProgressSpinner kind={isStreaming ? 'streaming' : 'loading'} />
-        ) : shouldShowCta ? (
+        )}
+
+        {shouldShowCta && (
           <ProgressCta
             position={position}
             onStreamStart={onStreamStart}
@@ -77,7 +84,7 @@ export class LogTextStreamLoadingItemView extends React.PureComponent<
             startDateExpression={startDateExpression}
             endDateExpression={endDateExpression}
           />
-        ) : null}
+        )}
       </LoadingItemViewExtra>
     );
 
@@ -181,9 +188,15 @@ const ProgressCta: React.FC<ProgressCtaProps> = ({
 
   if (rangeEdge === 'now' && position === 'end') {
     return (
-      <EuiButton data-test-subj="infraProgressCtaStreamLiveButton" onClick={onStreamStart} size="s">
-        <FormattedMessage id="xpack.logsShared.logs.streamLive" defaultMessage="Stream live" />
-      </EuiButton>
+      <div role="cell">
+        <EuiButton
+          data-test-subj="infraProgressCtaStreamLiveButton"
+          onClick={onStreamStart}
+          size="s"
+        >
+          <FormattedMessage id="xpack.logsShared.logs.streamLive" defaultMessage="Stream live" />
+        </EuiButton>
+      </div>
     );
   }
 
@@ -197,19 +210,20 @@ const ProgressCta: React.FC<ProgressCtaProps> = ({
   }
 
   return (
-    <EuiButton
-      data-test-subj="infraProgressCtaButton"
-      onClick={() => {
-        if (typeof onExtendRange === 'function') {
-          onExtendRange(extendedRange.value);
-        }
-      }}
-      iconType={iconType}
-      size="s"
-      role="cell"
-    >
-      <ProgressExtendMessage amount={extendedRange.diffAmount} unit={extendedRange.diffUnit} />
-    </EuiButton>
+    <div role="cell">
+      <EuiButton
+        data-test-subj="infraProgressCtaButton"
+        onClick={() => {
+          if (typeof onExtendRange === 'function') {
+            onExtendRange(extendedRange.value);
+          }
+        }}
+        iconType={iconType}
+        size="s"
+      >
+        <ProgressExtendMessage amount={extendedRange.diffAmount} unit={extendedRange.diffUnit} />
+      </EuiButton>
+    </div>
   );
 };
 
diff --git a/x-pack/plugins/observability_solution/logs_shared/public/components/logging/log_text_stream/log_text_separator.tsx b/x-pack/plugins/observability_solution/logs_shared/public/components/logging/log_text_stream/log_text_separator.tsx
index 2c06cca214ec7..abdce85ad379a 100644
--- a/x-pack/plugins/observability_solution/logs_shared/public/components/logging/log_text_stream/log_text_separator.tsx
+++ b/x-pack/plugins/observability_solution/logs_shared/public/components/logging/log_text_stream/log_text_separator.tsx
@@ -13,9 +13,11 @@ import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule } from '@elastic/eui';
  */
 export const LogTextSeparator: FC<PropsWithChildren<unknown>> = ({ children }) => {
   return (
-    <EuiFlexGroup alignItems="center" gutterSize="s">
-      <EuiFlexItem grow={false}>{children}</EuiFlexItem>
-      <EuiFlexItem>
+    <EuiFlexGroup alignItems="center" gutterSize="s" role="row">
+      <EuiFlexItem grow={false} role="cell">
+        {children}
+      </EuiFlexItem>
+      <EuiFlexItem role="cell">
         <EuiHorizontalRule aria-hidden="true" />
       </EuiFlexItem>
     </EuiFlexGroup>
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 ec8d666ef9b87..c3db8b6e6b024 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
@@ -250,6 +250,7 @@ export class VerticalScrollPanel<Child> extends React.PureComponent<
         ref={this.scrollRef}
         tabIndex={0}
         className="eui-scrollBar"
+        role="rowgroup"
       >
         {typeof children === 'function' ? children(this.registerChild) : null}
       </ScrollPanelWrapper>