Add rowgroup, row and cell attributes to log stream components (#192841)

Closes elastic/observability-accessibility#123 Co-authored-by: Elastic Machine <[email protected]>
elastic · Sep 26, 2024 · 01b9478 · 01b9478
1 parent 99160b6
commit 01b9478
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 24 deletions.
diff --git a/...lity_solution/logs_shared/public/components/logging/log_text_stream/loading_item_view.tsx b/...lity_solution/logs_shared/public/components/logging/log_text_stream/loading_item_view.tsx
@@ -63,21 +63,28 @@ 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}
             onExtendRange={onExtendRange}
             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/...ity_solution/logs_shared/public/components/logging/log_text_stream/log_text_separator.tsx b/...ity_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/..._solution/logs_shared/public/components/logging/log_text_stream/vertical_scroll_panel.tsx b/..._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>