From 1bbcb0bc5d903cd43330c3f4e4f7bb9fd375c16e Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 14 Dec 2018 14:30:52 -0800
Subject: [PATCH 1/3] Fix screen reader accessibility of remote clusters table
 column headers.

---
 .../remote_cluster_table.js                   | 51 ++++++++-----------
 1 file changed, 21 insertions(+), 30 deletions(-)

diff --git a/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_table/remote_cluster_table.js b/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_table/remote_cluster_table.js
index 572272adabf98..611f6dae83472 100644
--- a/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_table/remote_cluster_table.js
+++ b/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_table/remote_cluster_table.js
@@ -70,6 +70,7 @@ export class RemoteClusterTableUi extends Component {
   render() {
     const {
       openDetailPanel,
+      intl,
     } = this.props;
 
     const {
@@ -78,12 +79,10 @@ export class RemoteClusterTableUi extends Component {
 
     const columns = [{
       field: 'name',
-      name: (
-        <FormattedMessage
-          id="xpack.remoteClusters.remoteClusterList.table.nameColumnTitle"
-          defaultMessage="Name"
-        />
-      ),
+      name: intl.formatMessage({
+        id: 'xpack.remoteClusters.remoteClusterList.table.nameColumnTitle',
+        defaultMessage: 'Name',
+      }),
       sortable: true,
       truncateText: false,
       render: (name, { isConfiguredByNode }) => {
@@ -120,42 +119,34 @@ export class RemoteClusterTableUi extends Component {
       }
     }, {
       field: 'seeds',
-      name: (
-        <FormattedMessage
-          id="xpack.remoteClusters.remoteClusterList.table.seedsColumnTitle"
-          defaultMessage="Seeds"
-        />
-      ),
+      name: intl.formatMessage({
+        id: 'xpack.remoteClusters.remoteClusterList.table.seedsColumnTitle',
+        defaultMessage: 'Seeds',
+      }),
       truncateText: true,
       render: (seeds) => seeds.join(', '),
     }, {
       field: 'isConnected',
-      name: (
-        <FormattedMessage
-          id="xpack.remoteClusters.remoteClusterList.table.connectedColumnTitle"
-          defaultMessage="Connection"
-        />
-      ),
+      name: intl.formatMessage({
+        id: 'xpack.remoteClusters.remoteClusterList.table.connectedColumnTitle',
+        defaultMessage: 'Connection',
+      }),
       sortable: true,
       render: (isConnected) => <ConnectionStatus isConnected={isConnected} />,
       width: '160px',
     }, {
       field: 'connectedNodesCount',
-      name: (
-        <FormattedMessage
-          id="xpack.remoteClusters.remoteClusterList.table.connectedNodesColumnTitle"
-          defaultMessage="Connected nodes"
-        />
-      ),
+      name: intl.formatMessage({
+        id: 'xpack.remoteClusters.remoteClusterList.table.connectedNodesColumnTitle',
+        defaultMessage: 'Connected nodes',
+      }),
       sortable: true,
       width: '160px',
     }, {
-      name: (
-        <FormattedMessage
-          id="xpack.remoteClusters.remoteClusterList.table.actionsColumnTitle"
-          defaultMessage="Actions"
-        />
-      ),
+      name: intl.formatMessage({
+        id: 'xpack.remoteClusters.remoteClusterList.table.actionsColumnTitle',
+        defaultMessage: 'Actionss',
+      }),
       width: '100px',
       actions: [{
         render: ({ name, isConfiguredByNode }) => {

From 27f20ef6d686c4e7e40d572ab5e895decff1bb51 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 14 Dec 2018 14:33:59 -0800
Subject: [PATCH 2/3] Fix 'Actionss' typo.

---
 .../remote_cluster_table/remote_cluster_table.js                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_table/remote_cluster_table.js b/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_table/remote_cluster_table.js
index 611f6dae83472..34bb2c59e2f4b 100644
--- a/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_table/remote_cluster_table.js
+++ b/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_table/remote_cluster_table.js
@@ -145,7 +145,7 @@ export class RemoteClusterTableUi extends Component {
     }, {
       name: intl.formatMessage({
         id: 'xpack.remoteClusters.remoteClusterList.table.actionsColumnTitle',
-        defaultMessage: 'Actionss',
+        defaultMessage: 'Actions',
       }),
       width: '100px',
       actions: [{

From 625d45b12889f7d5eb81e5ced96cff7729f721ed Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 14 Dec 2018 16:06:03 -0800
Subject: [PATCH 3/3] Fix screen reader accessibility of auto-follow patterns
 table column headers. Add Actions column header.

---
 .../auto_follow_pattern_table.js              | 57 ++++++++-----------
 1 file changed, 25 insertions(+), 32 deletions(-)

diff --git a/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/components/auto_follow_pattern_table/auto_follow_pattern_table.js b/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/components/auto_follow_pattern_table/auto_follow_pattern_table.js
index a26a9cd544983..66f4bd7a05793 100644
--- a/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/components/auto_follow_pattern_table/auto_follow_pattern_table.js
+++ b/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/components/auto_follow_pattern_table/auto_follow_pattern_table.js
@@ -61,59 +61,52 @@ export class AutoFollowPatternTableUI extends PureComponent {
 
     return [{
       field: 'name',
-      name: (
-        <FormattedMessage
-          id="xpack.cross_cluster_replication.autofollow_pattern_list.table.name_column_title"
-          defaultMessage="Name"
-        />
-      ),
+      name: intl.formatMessage({
+        id: 'xpack.crossClusterReplication.autoFollowPatternList.table.nameColumnTitle',
+        defaultMessage: 'Name',
+      }),
       sortable: true,
       truncateText: false,
     }, {
       field: 'remoteCluster',
-      name: (
-        <FormattedMessage
-          id="xpack.cross_cluster_replication.autofollow_pattern_list.table.cluster_column_title"
-          defaultMessage="Cluster"
-        />
-      ),
+      name: intl.formatMessage({
+        id: 'xpack.crossClusterReplication.autoFollowPatternList.table.clusterColumnTitle',
+        defaultMessage: 'Cluster',
+      }),
       truncateText: true,
       sortable: true,
     }, {
       field: 'leaderIndexPatterns',
-      name: (
-        <FormattedMessage
-          id="xpack.cross_cluster_replication.autofollow_pattern_list.table.leader_patterns_column_title"
-          defaultMessage="Leader patterns"
-        />
-      ),
+      name: intl.formatMessage({
+        id: 'xpack.crossClusterReplication.autoFollowPatternList.table.leaderPatternsColumnTitle',
+        defaultMessage: 'Leader patterns',
+      }),
       render: (leaderPatterns) => leaderPatterns.join(', '),
     }, {
       field: 'followIndexPattern',
-      name: (
-        <FormattedMessage
-          id="xpack.cross_cluster_replication.autofollow_pattern_list.table.connected_nodes_column_title"
-          defaultMessage="Follower pattern prefix"
-        />
-      ),
+      name: intl.formatMessage({
+        id: 'xpack.crossClusterReplication.autoFollowPatternList.table.prefixColumnTitle',
+        defaultMessage: 'Follower pattern prefix',
+      }),
       render: (followIndexPattern) => {
         const { followIndexPatternPrefix } = getPrefixSuffixFromFollowPattern(followIndexPattern);
         return followIndexPatternPrefix;
       }
     }, {
       field: 'followIndexPattern',
-      name: (
-        <FormattedMessage
-          id="xpack.cross_cluster_replication.autofollow_pattern_list.table.connected_nodes_column_title"
-          defaultMessage="Follower pattern suffix"
-        />
-      ),
+      name: intl.formatMessage({
+        id: 'xpack.crossClusterReplication.autoFollowPatternList.table.suffixColumnTitle',
+        defaultMessage: 'Follower pattern suffix',
+      }),
       render: (followIndexPattern) => {
         const { followIndexPatternSuffix } = getPrefixSuffixFromFollowPattern(followIndexPattern);
         return followIndexPatternSuffix;
       }
     }, {
-      name: '',
+      name: intl.formatMessage({
+        id: 'xpack.crossClusterReplication.autoFollowPatternList.table.actionsColumnTitle',
+        defaultMessage: 'Actions',
+      }),
       actions: [
         {
           render: ({ name }) => {
@@ -152,7 +145,7 @@ export class AutoFollowPatternTableUI extends PureComponent {
           type: 'icon',
         },
       ],
-      width: '40px',
+      width: '100px',
     }];
   }