[Remote Clusters] Added a11y tests and fixed violations (elastic#96989)

* Added a11y tests for Remote Clusters plugin and fixed discovered violations * Added an a11y test for a delete modal * Updated payload type casting Co-authored-by: Kibana Machine <[email protected]>
yuliacech · Apr 20, 2021 · c9ed6c1 · c9ed6c1
1 parent e363f00
commit c9ed6c1
Show file tree

Hide file tree

Showing 8 changed files with 247 additions and 91 deletions.
diff --git a/x-pack/plugins/remote_clusters/common/lib/cluster_serialization.ts b/x-pack/plugins/remote_clusters/common/lib/cluster_serialization.ts
@@ -45,7 +45,7 @@ export interface Cluster {
   hasDeprecatedProxySetting?: boolean;
 }
 
-interface ClusterPayloadEs {
+export interface ClusterPayloadEs {
   skip_unavailable?: boolean | null;
   mode?: 'sniff' | 'proxy' | null;
   proxy_address?: string | null;

diff --git a/x-pack/plugins/remote_clusters/common/lib/index.ts b/x-pack/plugins/remote_clusters/common/lib/index.ts
@@ -10,4 +10,5 @@ export {
   serializeCluster,
   Cluster,
   ClusterInfoEs,
+  ClusterPayloadEs,
 } from './cluster_serialization';
diff --git a/...usters/public/application/sections/components/remote_cluster_form/remote_cluster_form.tsx b/...usters/public/application/sections/components/remote_cluster_form/remote_cluster_form.tsx
@@ -47,8 +47,8 @@ import {
   convertCloudUrlToProxyConnection,
   convertProxyConnectionToCloudUrl,
   validateCluster,
+  isCloudUrlEnabled,
 } from './validators';
-import { isCloudUrlEnabled } from './validators/validate_cloud_url';
 
 const defaultClusterValues: Cluster = {
   name: '',
@@ -369,7 +369,7 @@ export class RemoteClusterForm extends Component<Props, State> {
         </EuiFlexItem>
 
         <EuiFlexItem grow={false}>
-          <EuiButtonEmpty onClick={this.toggleRequest}>
+          <EuiButtonEmpty onClick={this.toggleRequest} data-test-subj="remoteClustersRequestButton">
             {isRequestVisible ? (
               <FormattedMessage
                 id="xpack.remoteClusters.remoteClusterForm.hideRequestButtonLabel"

diff --git a/...te_clusters/public/application/sections/components/remote_cluster_form/request_flyout.tsx b/...te_clusters/public/application/sections/components/remote_cluster_form/request_flyout.tsx
@@ -38,7 +38,7 @@ export class RequestFlyout extends PureComponent<Props> {
     return (
       <EuiFlyout maxWidth={480} onClose={close}>
         <EuiFlyoutHeader>
-          <EuiTitle>
+          <EuiTitle data-test-subj="remoteClusterRequestFlyoutTitle">
             <h2>
               {name ? (
                 <FormattedMessage

diff --git a/...pplication/sections/remote_cluster_list/components/connection_status/connection_status.js b/...pplication/sections/remote_cluster_list/components/connection_status/connection_status.js
@@ -41,13 +41,11 @@ export function ConnectionStatus({ isConnected, mode }) {
   return (
     <EuiFlexGroup gutterSize="s" alignItems="center">
       <EuiFlexItem grow={false}>
-        <EuiFlexGroup gutterSize="s" alignItems="center">
-          <EuiFlexItem grow={false}>{icon}</EuiFlexItem>
+        <span className="eui-displayBlock">{icon}</span>
+      </EuiFlexItem>
 
-          <EuiFlexItem className="remoteClustersConnectionStatus__message">
-            <EuiText size="s">{message}</EuiText>
-          </EuiFlexItem>
-        </EuiFlexGroup>
+      <EuiFlexItem grow={false} className="remoteClustersConnectionStatus__message">
+        <EuiText size="s">{message}</EuiText>
       </EuiFlexItem>
 
       {!isConnected && mode === SNIFF_MODE && (

diff --git a/...ote_clusters/public/application/sections/remote_cluster_list/detail_panel/detail_panel.js b/...ote_clusters/public/application/sections/remote_cluster_list/detail_panel/detail_panel.js
@@ -183,9 +183,9 @@ export class DetailPanel extends Component {
     mode,
   }) {
     return (
-      <EuiDescriptionList data-test-subj="remoteClusterDetailPanelStatusValues">
-        <EuiFlexGroup>
-          <EuiFlexItem>
+      <EuiFlexGroup data-test-subj="remoteClusterDetailPanelStatusValues">
+        <EuiFlexItem>
+          <EuiDescriptionList>
             <EuiDescriptionListTitle>
               <EuiTitle size="xs">
                 <FormattedMessage
@@ -194,13 +194,10 @@ export class DetailPanel extends Component {
                 />
               </EuiTitle>
             </EuiDescriptionListTitle>
-
             <EuiDescriptionListDescription data-test-subj="remoteClusterDetailIsConnected">
               <ConnectionStatus isConnected={isConnected} mode={mode} />
             </EuiDescriptionListDescription>
-          </EuiFlexItem>
 
-          <EuiFlexItem>
             <EuiDescriptionListTitle>
               <EuiTitle size="xs">
                 <FormattedMessage
@@ -209,17 +206,10 @@ export class DetailPanel extends Component {
                 />
               </EuiTitle>
             </EuiDescriptionListTitle>
-
             <EuiDescriptionListDescription data-test-subj="remoteClusterDetailConnectedNodesCount">
               {connectedNodesCount}
             </EuiDescriptionListDescription>
-          </EuiFlexItem>
-        </EuiFlexGroup>
 
-        <EuiSpacer size="s" />
-
-        <EuiFlexGroup>
-          <EuiFlexItem>
             <EuiDescriptionListTitle>
               <EuiTitle size="xs">
                 <FormattedMessage
@@ -228,17 +218,18 @@ export class DetailPanel extends Component {
                 />
               </EuiTitle>
             </EuiDescriptionListTitle>
-
             <EuiDescriptionListDescription data-test-subj="remoteClusterDetailSeeds">
               {seeds.map((seed) => (
                 <EuiText size="s" key={seed}>
                   {seed}
                 </EuiText>
               ))}
             </EuiDescriptionListDescription>
-          </EuiFlexItem>
+          </EuiDescriptionList>
+        </EuiFlexItem>
 
-          <EuiFlexItem>
+        <EuiFlexItem>
+          <EuiDescriptionList>
             <EuiDescriptionListTitle>
               <EuiTitle size="xs">
                 <FormattedMessage
@@ -247,17 +238,10 @@ export class DetailPanel extends Component {
                 />
               </EuiTitle>
             </EuiDescriptionListTitle>
-
             <EuiDescriptionListDescription data-test-subj="remoteClusterDetailSkipUnavailable">
               {this.renderSkipUnavailableValue(skipUnavailable)}
             </EuiDescriptionListDescription>
-          </EuiFlexItem>
-        </EuiFlexGroup>
 
-        <EuiSpacer size="s" />
-
-        <EuiFlexGroup>
-          <EuiFlexItem>
             <EuiDescriptionListTitle>
               <EuiTitle size="xs">
                 <FormattedMessage
@@ -266,13 +250,10 @@ export class DetailPanel extends Component {
                 />
               </EuiTitle>
             </EuiDescriptionListTitle>
-
             <EuiDescriptionListDescription data-test-subj="remoteClusterDetailMaxConnections">
               {maxConnectionsPerCluster}
             </EuiDescriptionListDescription>
-          </EuiFlexItem>
 
-          <EuiFlexItem>
             <EuiDescriptionListTitle>
               <EuiTitle size="xs">
                 <FormattedMessage
@@ -281,13 +262,12 @@ export class DetailPanel extends Component {
                 />
               </EuiTitle>
             </EuiDescriptionListTitle>
-
             <EuiDescriptionListDescription data-test-subj="remoteClusterDetailInitialConnectTimeout">
               {initialConnectTimeout}
             </EuiDescriptionListDescription>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiDescriptionList>
+          </EuiDescriptionList>
+        </EuiFlexItem>
+      </EuiFlexGroup>
     );
   }
 
@@ -302,9 +282,9 @@ export class DetailPanel extends Component {
     serverName,
   }) {
     return (
-      <EuiDescriptionList data-test-subj="remoteClusterDetailPanelStatusValues">
-        <EuiFlexGroup>
-          <EuiFlexItem>
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <EuiDescriptionList>
             <EuiDescriptionListTitle>
               <EuiTitle size="xs">
                 <FormattedMessage
@@ -313,13 +293,10 @@ export class DetailPanel extends Component {
                 />
               </EuiTitle>
             </EuiDescriptionListTitle>
-
             <EuiDescriptionListDescription data-test-subj="remoteClusterDetailIsConnected">
               <ConnectionStatus isConnected={isConnected} mode={mode} />
             </EuiDescriptionListDescription>
-          </EuiFlexItem>
 
-          <EuiFlexItem>
             <EuiDescriptionListTitle>
               <EuiTitle size="xs">
                 <FormattedMessage
@@ -328,17 +305,10 @@ export class DetailPanel extends Component {
                 />
               </EuiTitle>
             </EuiDescriptionListTitle>
-
             <EuiDescriptionListDescription data-test-subj="remoteClusterDetailConnectedSocketsCount">
               {connectedSocketsCount ? connectedSocketsCount : '-'}
             </EuiDescriptionListDescription>
-          </EuiFlexItem>
-        </EuiFlexGroup>
 
-        <EuiSpacer size="s" />
-
-        <EuiFlexGroup>
-          <EuiFlexItem>
             <EuiDescriptionListTitle>
               <EuiTitle size="xs">
                 <FormattedMessage
@@ -347,13 +317,25 @@ export class DetailPanel extends Component {
                 />
               </EuiTitle>
             </EuiDescriptionListTitle>
-
             <EuiDescriptionListDescription data-test-subj="remoteClusterDetailProxyAddress">
               {proxyAddress}
             </EuiDescriptionListDescription>
-          </EuiFlexItem>
 
-          <EuiFlexItem>
+            <EuiDescriptionListTitle>
+              <EuiTitle size="xs">
+                <FormattedMessage
+                  id="xpack.remoteClusters.detailPanel.serverNameLabel"
+                  defaultMessage="Server name"
+                />
+              </EuiTitle>
+            </EuiDescriptionListTitle>
+            <EuiDescriptionListDescription data-test-subj="remoteClusterDetailServerName">
+              {serverName ? serverName : '-'}
+            </EuiDescriptionListDescription>
+          </EuiDescriptionList>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiDescriptionList>
             <EuiDescriptionListTitle>
               <EuiTitle size="xs">
                 <FormattedMessage
@@ -362,17 +344,10 @@ export class DetailPanel extends Component {
                 />
               </EuiTitle>
             </EuiDescriptionListTitle>
-
             <EuiDescriptionListDescription data-test-subj="remoteClusterDetailSkipUnavailable">
               {this.renderSkipUnavailableValue(skipUnavailable)}
             </EuiDescriptionListDescription>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-
-        <EuiSpacer size="s" />
 
-        <EuiFlexGroup>
-          <EuiFlexItem>
             <EuiDescriptionListTitle>
               <EuiTitle size="xs">
                 <FormattedMessage
@@ -381,13 +356,10 @@ export class DetailPanel extends Component {
                 />
               </EuiTitle>
             </EuiDescriptionListTitle>
-
             <EuiDescriptionListDescription data-test-subj="remoteClusterDetailMaxSocketConnections">
               {proxySocketConnections ? proxySocketConnections : '-'}
             </EuiDescriptionListDescription>
-          </EuiFlexItem>
 
-          <EuiFlexItem>
             <EuiDescriptionListTitle>
               <EuiTitle size="xs">
                 <FormattedMessage
@@ -396,42 +368,22 @@ export class DetailPanel extends Component {
                 />
               </EuiTitle>
             </EuiDescriptionListTitle>
-
             <EuiDescriptionListDescription data-test-subj="remoteClusterDetailInitialConnectTimeout">
               {initialConnectTimeout}
             </EuiDescriptionListDescription>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-
-        <EuiSpacer size="s" />
-
-        <EuiFlexGroup>
-          <EuiFlexItem>
-            <EuiDescriptionListTitle>
-              <EuiTitle size="xs">
-                <FormattedMessage
-                  id="xpack.remoteClusters.detailPanel.serverNameLabel"
-                  defaultMessage="Server name"
-                />
-              </EuiTitle>
-            </EuiDescriptionListTitle>
-
-            <EuiDescriptionListDescription data-test-subj="remoteClusterDetailServerName">
-              {serverName ? serverName : '-'}
-            </EuiDescriptionListDescription>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiDescriptionList>
+          </EuiDescriptionList>
+        </EuiFlexItem>
+      </EuiFlexGroup>
     );
   }
 
   renderCluster(cluster) {
     return (
       <section
-        aria-labelledby="xpack.remoteClusters.detailPanel.statusTitle"
+        aria-labelledby="clusterStatus"
         data-test-subj="remoteClusterDetailPanelStatusSection"
       >
-        <EuiTitle size="s">
+        <EuiTitle size="s" id="clusterStatus">
           <h3>
             <FormattedMessage
               id="xpack.remoteClusters.detailPanel.statusTitle"