fix otel_service_overview_and_transactions.cy.ts group

Author: alexwizp

x-pack/solutions/observability/plugins/apm/public/components/app/error_group_overview/error_group_list/index.tsx

@@ -62,6 +62,7 @@ interface Props {
   saveTableOptionsToUrl?: boolean;
   showPerPageOptions?: boolean;
   onLoadTable?: () => void;
+  tableCaption?: string;
 }
 
 const defaultSorting = {
@@ -77,6 +78,7 @@ export function ErrorGroupList({
   saveTableOptionsToUrl,
   showPerPageOptions = true,
   onLoadTable,
+  tableCaption,
 }: Props) {
   const { query } = useAnyOfApmParams(
     '/services/{serviceName}/overview',
@@ -316,6 +318,7 @@ export function ErrorGroupList({
 
   return (
     <ManagedTable
+      tableCaption={tableCaption}
       noItemsMessage={
         isMainStatsLoading
           ? i18n.translate('xpack.apm.errorsTable.loading', {

x-pack/solutions/observability/plugins/apm/public/components/app/error_group_overview/index.tsx

@@ -30,6 +30,11 @@ export function ErrorGroupOverview() {
     kuery,
   });
 
+  const headerTitle = i18n.translate(
+    'xpack.apm.serviceDetails.metrics.errorOccurrencesChart.title',
+    { defaultMessage: 'Error occurrences' }
+  );
+
   return (
     <EuiFlexGroup direction="column" gutterSize="s">
       <EuiFlexItem>
@@ -40,10 +45,7 @@ export function ErrorGroupOverview() {
                 <ErrorDistribution
                   fetchStatus={errorDistributionStatus}
                   distribution={errorDistributionData}
-                  title={i18n.translate(
-                    'xpack.apm.serviceDetails.metrics.errorOccurrencesChart.title',
-                    { defaultMessage: 'Error occurrences' }
-                  )}
+                  title={headerTitle}
                 />
               </EuiPanel>
             </EuiFlexItem>
@@ -69,6 +71,7 @@ export function ErrorGroupOverview() {
             serviceName={serviceName}
             comparisonEnabled={comparisonEnabled}
             initialPageSize={10}
+            tableCaption={headerTitle}
           />
         </EuiPanel>
       </EuiFlexItem>

x-pack/solutions/observability/plugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx

@@ -20,18 +20,17 @@ interface Props {
 
 export function ServiceOverviewErrorsTable({ serviceName, onLoadTable }: Props) {
   const { query } = useApmParams('/services/{serviceName}/overview');
+  const headerTitle = i18n.translate('xpack.apm.serviceOverview.errorsTableTitle', {
+    defaultMessage: 'Errors',
+  });
 
   return (
     <EuiFlexGroup direction="column" gutterSize="s" data-test-subj="serviceOverviewErrorsTable">
       <EuiFlexItem>
         <EuiFlexGroup responsive={false} justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>
             <EuiTitle size="xs">
-              <h2>
-                {i18n.translate('xpack.apm.serviceOverview.errorsTableTitle', {
-                  defaultMessage: 'Errors',
-                })}
-              </h2>
+              <h2>{headerTitle}</h2>
             </EuiTitle>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
@@ -52,6 +51,7 @@ export function ServiceOverviewErrorsTable({ serviceName, onLoadTable }: Props)
             isCompactMode={true}
             saveTableOptionsToUrl={false}
             showPerPageOptions={false}
+            tableCaption={headerTitle}
           />
         </OverviewTableContainer>
       </EuiFlexItem>

x-pack/solutions/observability/plugins/apm/public/components/app/service_overview/service_overview_instances_table/get_columns.tsx

@@ -6,7 +6,7 @@
  */
 
 import type { EuiBasicTableColumn } from '@elastic/eui';
-import { EuiButtonIcon, RIGHT_ALIGNMENT } from '@elastic/eui';
+import { EuiButtonIcon, RIGHT_ALIGNMENT, EuiScreenReaderOnly } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import type { ReactNode } from 'react';
 import React from 'react';
@@ -254,6 +254,15 @@ export function getColumns({
       },
     },
     {
+      name: (
+        <EuiScreenReaderOnly>
+          <span>
+            {i18n.translate('xpack.apm.getColumns.actionsMenu.srName', {
+              defaultMessage: 'Actions menu',
+            })}
+          </span>
+        </EuiScreenReaderOnly>
+      ),
       width: '40px',
       render: (instanceItem: MainStatsServiceInstanceItem) => {
         return (
@@ -284,6 +293,15 @@ export function getColumns({
       },
     },
     {
+      name: (
+        <EuiScreenReaderOnly>
+          <span>
+            {i18n.translate('xpack.apm.getColumns.rightAlignment.srName', {
+              defaultMessage: 'Expanded menu',
+            })}
+          </span>
+        </EuiScreenReaderOnly>
+      ),
       align: RIGHT_ALIGNMENT,
       width: '40px',
       isExpander: true,

x-pack/solutions/observability/plugins/apm/public/components/app/service_overview/service_overview_instances_table/index.tsx

@@ -136,16 +136,16 @@ export function ServiceOverviewInstancesTable({
     showPerPageOptions: false,
   };
 
+  const headerTitle = i18n.translate('xpack.apm.serviceOverview.instancesTableTitle', {
+    defaultMessage: 'Top {count} {count, plural, one {instance} other {instances}}',
+    values: { count: mainStatsItemCount },
+  });
+
   return (
     <EuiFlexGroup direction="column" gutterSize="s" data-test-subj="serviceOverviewInstancesTable">
       <EuiFlexItem>
         <EuiTitle size="xs">
-          <h2>
-            {i18n.translate('xpack.apm.serviceOverview.instancesTableTitle', {
-              defaultMessage: 'Top {count} {count, plural, one {instance} other {instances}}',
-              values: { count: mainStatsItemCount },
-            })}
-          </h2>
+          <h2>{headerTitle}</h2>
         </EuiTitle>
       </EuiFlexItem>
       <EuiFlexItem data-test-subj="serviceInstancesTableContainer">
@@ -154,6 +154,7 @@ export function ServiceOverviewInstancesTable({
           isEmptyAndNotInitiated={mainStatsItemCount === 0 && isNotInitiated}
         >
           <EuiBasicTable
+            tableCaption={headerTitle}
             noItemsMessage={
               status === FETCH_STATUS.LOADING
                 ? i18n.translate('xpack.apm.serviceOverview.loadingText', {
@@ -164,6 +165,7 @@ export function ServiceOverviewInstancesTable({
                   })
             }
             data-test-subj="instancesTable"
+            rowHeader="serviceNodeName"
             loading={isLoading}
             items={mainStatsItems}
             columns={columns}

x-pack/solutions/observability/plugins/apm/public/components/shared/managed_table/index.tsx

@@ -103,6 +103,8 @@ function UnoptimizedManagedTable<T extends object>(props: {
   tableLayout?: 'auto' | 'fixed';
   tableSearchBar?: TableSearchBar<T>;
   saveTableOptionsToUrl?: boolean;
+
+  tableCaption?: string;
 }) {
   const [searchQuery, setSearchQuery] = useState('');
   const history = useHistory();
@@ -333,6 +335,7 @@ function UnoptimizedManagedTable<T extends object>(props: {
           rowHeader={rowHeader === false ? undefined : rowHeader ?? columns[0]?.field}
           sorting={sorting}
           onChange={onTableChange}
+          tableCaption={props.tableCaption}
           {...(paginationProps ? { pagination: paginationProps } : {})}
         />
       </EuiFlexItem>

x-pack/solutions/observability/plugins/apm/public/components/shared/transactions_table/index.tsx

@@ -182,18 +182,18 @@ export function TransactionsTable({
     });
   }, [setScreenContext, mainStatistics]);
 
+  const title = i18n.translate('xpack.apm.transactionsTable.title', {
+    defaultMessage: 'Transactions',
+  });
+
   return (
     <EuiFlexGroup direction="column" gutterSize="s" data-test-subj="transactionsGroupTable">
       {!hideTitle && (
         <EuiFlexItem>
           <EuiFlexGroup justifyContent="spaceBetween" responsive={false}>
             <EuiFlexItem grow={false}>
               <EuiTitle size="xs">
-                <h2>
-                  {i18n.translate('xpack.apm.transactionsTable.title', {
-                    defaultMessage: 'Transactions',
-                  })}
-                </h2>
+                <h2>{title}</h2>
               </EuiTitle>
             </EuiFlexItem>
             {!hideViewTransactionsLink && (
@@ -261,6 +261,7 @@ export function TransactionsTable({
             showPerPageOptions={showPerPageOptions}
             saveTableOptionsToUrl={saveTableOptionsToUrl}
             onChangeRenderedItems={setRenderedItems}
+            tableCaption={title}
           />
         </OverviewTableContainer>
       </EuiFlexItem>