[TableListView] Fix table scope issues (#82105) (#82452)

stratoula · kibanamachine · web-flow · commit 7490e8a3effd · 2020-11-04T08:29:39.000+02:00
* [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 &lt;42973632+kibanamachine@users.noreply.github.com&gt;

Co-authored-by: Kibana Machine &lt;42973632+kibanamachine@users.noreply.github.com&gt;
diff --git a/src/plugins/dashboard/public/application/listing/__snapshots__/dashboard_listing.test.js.snap b/src/plugins/dashboard/public/application/listing/__snapshots__/dashboard_listing.test.js.snap
diff --git a/src/plugins/dashboard/public/application/listing/dashboard_listing.js b/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={
diff --git a/src/plugins/kibana_react/public/table_list_view/table_list_view.tsx b/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}
       />
     );
   }
diff --git a/src/plugins/visualize/public/application/components/visualize_listing.tsx b/src/plugins/visualize/public/application/components/visualize_listing.tsx
@@ -154,13 +154,17 @@ 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}
       tableColumns={tableColumns}
       listingLimit={listingLimit}
       initialPageSize={savedObjectsPublic.settings.getPerPage()}
       initialFilter={''}
+      rowHeader="title"
       noItemsFragment={noItemsFragment}
       entityName={i18n.translate('visualize.listing.table.entityName', {
         defaultMessage: 'visualization',
diff --git a/x-pack/plugins/graph/public/components/listing.tsx b/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}
