[CCR] Accessibility fixes (#27268)

* Fix screen reader accessibility of remote clusters table column headers. Fix 'Actionss' typo. * Fix screen reader accessibility of auto-follow patterns table column headers. Add Actions column header.
elastic · Dec 17, 2018 · 2ccbb41 · 2ccbb41
1 parent e4c67a6
commit 2ccbb41
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 62 deletions.
diff --git a/...uto_follow_pattern_list/components/auto_follow_pattern_table/auto_follow_pattern_table.js b/...uto_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',
     }];
   }
 

diff --git a/...clusters/public/sections/remote_cluster_list/remote_cluster_table/remote_cluster_table.js b/...clusters/public/sections/remote_cluster_list/remote_cluster_table/remote_cluster_table.js
@@ -71,6 +71,7 @@ export class RemoteClusterTableUi extends Component {
   render() {
     const {
       openDetailPanel,
+      intl,
     } = this.props;
 
     const {
@@ -79,12 +80,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 }) => {
@@ -121,42 +120,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: 'Actions',
+      }),
       width: '100px',
       actions: [{
         render: ({ name, isConfiguredByNode }) => {