fix: [Obs Cases > Overview][SCREEN READER]: Table rows need TH[scope=…

…"row"] for SR usability: 0002 (#186593) Closes: elastic/observability-dev#3539 ## Summary `rowHeader` attribute was added for the following table ![image](https://github.com/elastic/kibana/assets/20072247/5bc18540-2857-4788-b782-f6a1b1f77bdd) ### Screens <img width="1585" alt="Screenshot 2024-06-21 at 11 09 59" src="https://github.com/elastic/kibana/assets/20072247/a7202a67-01e9-4e4b-b798-813bea1e6c36">
elastic · Jun 24, 2024 · ee33a6f · ee33a6f
1 parent bd5798c
commit ee33a6f
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 2 deletions.
diff --git a/x-pack/plugins/cases/public/components/all_cases/all_cases_list.tsx b/x-pack/plugins/cases/public/components/all_cases/all_cases_list.tsx
@@ -132,7 +132,7 @@ export const AllCasesList = React.memo<AllCasesListProps>(
 
     const { selectedColumns, setSelectedColumns } = useCasesColumnsSelection();
 
-    const { columns, isLoadingColumns } = useCasesColumns({
+    const { columns, isLoadingColumns, rowHeader } = useCasesColumns({
       filterStatus: filterOptions.status ?? [],
       userProfiles: userProfiles ?? new Map(),
       isSelectorView,
@@ -228,6 +228,7 @@ export const AllCasesList = React.memo<AllCasesListProps>(
         />
         <CasesTable
           columns={columns}
+          rowHeader={rowHeader}
           data={data}
           goToCreateCase={onRowClick ? onCreateCasePressed : undefined}
           isCasesLoading={isLoadingCases}

diff --git a/x-pack/plugins/cases/public/components/all_cases/table.tsx b/x-pack/plugins/cases/public/components/all_cases/table.tsx
@@ -35,6 +35,7 @@ interface CasesTableProps {
   tableRef?: MutableRefObject<EuiBasicTable | null>;
   tableRowProps: EuiBasicTableProps<CaseUI>['rowProps'];
   isLoadingColumns: boolean;
+  rowHeader?: string;
 }
 
 export const CasesTable: FunctionComponent<CasesTableProps> = ({
@@ -52,6 +53,7 @@ export const CasesTable: FunctionComponent<CasesTableProps> = ({
   tableRef,
   tableRowProps,
   isLoadingColumns,
+  rowHeader,
 }) => {
   const { permissions } = useCasesContext();
   const { getCreateCaseUrl, navigateToCreateCase } = useCreateCaseNavigation();
@@ -81,6 +83,7 @@ export const CasesTable: FunctionComponent<CasesTableProps> = ({
       <EuiBasicTable
         className={classnames({ isSelectorView })}
         columns={columns}
+        rowHeader={rowHeader}
         data-test-subj="cases-table"
         itemId="id"
         items={data.cases}

diff --git a/x-pack/plugins/cases/public/components/all_cases/use_cases_columns.test.tsx b/x-pack/plugins/cases/public/components/all_cases/use_cases_columns.test.tsx
@@ -161,6 +161,7 @@ describe('useCasesColumns ', () => {
           },
         ],
         "isLoadingColumns": false,
+        "rowHeader": "title",
       }
     `);
   });
@@ -256,6 +257,7 @@ describe('useCasesColumns ', () => {
           },
         ],
         "isLoadingColumns": false,
+        "rowHeader": "title",
       }
     `);
   });
@@ -310,6 +312,7 @@ describe('useCasesColumns ', () => {
           },
         ],
         "isLoadingColumns": false,
+        "rowHeader": "title",
       }
     `);
   });
@@ -358,6 +361,7 @@ describe('useCasesColumns ', () => {
           },
         ],
         "isLoadingColumns": false,
+        "rowHeader": "title",
       }
     `);
   });
@@ -406,6 +410,7 @@ describe('useCasesColumns ', () => {
           },
         ],
         "isLoadingColumns": false,
+        "rowHeader": "title",
       }
     `);
   });
@@ -486,6 +491,7 @@ describe('useCasesColumns ', () => {
           },
         ],
         "isLoadingColumns": false,
+        "rowHeader": "title",
       }
     `);
   });
@@ -605,6 +611,7 @@ describe('useCasesColumns ', () => {
           },
         ],
         "isLoadingColumns": false,
+        "rowHeader": "title",
       }
     `);
   });

diff --git a/x-pack/plugins/cases/public/components/all_cases/use_cases_columns.tsx b/x-pack/plugins/cases/public/components/all_cases/use_cases_columns.tsx
@@ -74,6 +74,7 @@ export interface GetCasesColumn {
 export interface UseCasesColumnsReturnValue {
   columns: CasesColumns[];
   isLoadingColumns: boolean;
+  rowHeader: string;
 }
 
 export const useCasesColumns = ({
@@ -371,7 +372,7 @@ export const useCasesColumns = ({
     columns.push(actions);
   }
 
-  return { columns, isLoadingColumns };
+  return { columns, isLoadingColumns, rowHeader: casesColumnsConfig.title.field };
 };
 
 interface Props {