[TableListView] Fix table scope issues (#82105)

* [TableListView] Fix table scope issues

* Replace the default tableCaption with another one that describes what the table does

* Make the accessibility props required in order to always add them in the future

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

src/plugins/dashboard/public/application/listing/__snapshots__/dashboard_listing.test.js.snap

@@ -31,7 +31,9 @@ exports[`after fetch hideWriteControls 1`] = `
         />
       </div>
     }
+    rowHeader="title"
     searchFilters={Array []}
+    tableCaption="Dashboards"
     tableColumns={
       Array [
         Object {
@@ -134,7 +136,9 @@ exports[`after fetch initialFilter 1`] = `
         />
       </div>
     }
+    rowHeader="title"
     searchFilters={Array []}
+    tableCaption="Dashboards"
     tableColumns={
       Array [
         Object {
@@ -237,7 +241,9 @@ exports[`after fetch renders call to action when no dashboards exist 1`] = `
         />
       </div>
     }
+    rowHeader="title"
     searchFilters={Array []}
+    tableCaption="Dashboards"
     tableColumns={
       Array [
         Object {
@@ -340,7 +346,9 @@ exports[`after fetch renders table rows 1`] = `
         />
       </div>
     }
+    rowHeader="title"
     searchFilters={Array []}
+    tableCaption="Dashboards"
     tableColumns={
       Array [
         Object {
@@ -443,7 +451,9 @@ exports[`after fetch renders warning when listingLimit is exceeded 1`] = `
         />
       </div>
     }
+    rowHeader="title"
     searchFilters={Array []}
+    tableCaption="Dashboards"
     tableColumns={
       Array [
         Object {
@@ -545,7 +555,9 @@ exports[`renders empty page in before initial fetch to avoid flickering 1`] = `
         />
       </div>
     }
+    rowHeader="title"
     searchFilters={Array []}
+    tableCaption="Dashboards"
     tableColumns={
       Array [
         Object {

src/plugins/dashboard/public/application/listing/dashboard_listing.js

@@ -43,6 +43,7 @@ export class DashboardListing extends React.Component {
       <I18nProvider>
         <TableListView
           headingId="dashboardListingHeading"
+          rowHeader="title"
           createItem={this.props.hideWriteControls ? null : this.props.createItem}
           findItems={this.props.findItems}
           deleteItems={this.props.hideWriteControls ? null : this.props.deleteItems}
@@ -61,6 +62,9 @@ export class DashboardListing extends React.Component {
           tableListTitle={i18n.translate('dashboard.listing.dashboardsTitle', {
             defaultMessage: 'Dashboards',
           })}
+          tableCaption={i18n.translate('dashboard.listing.dashboardsTitle', {
+            defaultMessage: 'Dashboards',
+          })}
           toastNotifications={this.props.core.notifications.toasts}
           uiSettings={this.props.core.uiSettings}
           searchFilters={

src/plugins/kibana_react/public/table_list_view/table_list_view.tsx

@@ -66,6 +66,14 @@ export interface TableListViewProps {
    * If the table is not empty, this component renders its own h1 element using the same id.
    */
   headingId?: string;
+  /**
+   * Indicates which column should be used as the identifying cell in each row.
+   */
+  rowHeader: string;
+  /**
+   * Describes the content of the table. If not specified, the caption will be "This table contains {itemCount} rows."
+   */
+  tableCaption: string;
   searchFilters?: SearchFilterConfig[];
 }
 
@@ -471,6 +479,8 @@ class TableListView extends React.Component<TableListViewProps, TableListViewSta
         search={search}
         sorting={true}
         data-test-subj="itemsInMemTable"
+        rowHeader={this.props.rowHeader}
+        tableCaption={this.props.tableCaption}
       />
     );
   }

src/plugins/visualize/public/application/components/visualize_listing.tsx

@@ -154,6 +154,9 @@ export const VisualizeListing = () => {
       // we allow users to create visualizations even if they can't save them
       // for data exploration purposes
       createItem={createNewVis}
+      tableCaption={i18n.translate('visualize.listing.table.listTitle', {
+        defaultMessage: 'Visualizations',
+      })}
       findItems={fetchItems}
       deleteItems={visualizeCapabilities.delete ? deleteItems : undefined}
       editItem={visualizeCapabilities.save ? editItem : undefined}
@@ -161,6 +164,7 @@ export const VisualizeListing = () => {
       listingLimit={listingLimit}
       initialPageSize={savedObjectsPublic.settings.getPerPage()}
       initialFilter={''}
+      rowHeader="title"
       noItemsFragment={noItemsFragment}
       entityName={i18n.translate('visualize.listing.table.entityName', {
         defaultMessage: 'visualization',

x-pack/plugins/graph/public/components/listing.tsx

@@ -31,7 +31,11 @@ export function Listing(props: ListingProps) {
   return (
     <I18nProvider>
       <TableListView
+        tableCaption={i18n.translate('xpack.graph.listing.graphsTitle', {
+          defaultMessage: 'Graphs',
+        })}
         headingId="graphListingHeading"
+        rowHeader="title"
         createItem={props.capabilities.save ? props.createItem : undefined}
         findItems={props.findItems}
         deleteItems={props.capabilities.delete ? props.deleteItems : undefined}