From 0a1ec8f846cb0c78cfe3ddd0f2c1b4ccd1b3365b Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Mon, 4 Nov 2024 16:47:33 +0200
Subject: [PATCH] fix: [Stateful: Home page] Not accessible element, showing
 number of active API keys, via keyboard (#197456)

Closes: #195209

This PR is based on the following comment:

> @cee-chen / @bhavyarm, could you please validate this issue? I'm not
sure if the badge should be keyboard accessible. On the other hand, I
think it might make sense to move active API keys inside the badge.
However, this is more of a design question rather than an a11y one.

_Originally posted by @alexwizp in
[#195209](https://github.com/elastic/kibana/issues/195209#issuecomment-2429091670)_

This PR move text inside badge to address a11y concerns.

## Screen:

<img width="734" alt="image"
src="https://github.com/user-attachments/assets/66b2d4f5-75ee-4a1a-b286-03cd346d9aeb">
---
 .../shared/api_key/api_key_panel.tsx          | 34 ++++++++-----------
 .../panels/api_key_panel_content.tsx          | 32 +++++++----------
 2 files changed, 26 insertions(+), 40 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/api_key/api_key_panel.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/api_key/api_key_panel.tsx
index 34c7ac66343c9..b9d5cf8c414d6 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/api_key/api_key_panel.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/api_key/api_key_panel.tsx
@@ -76,6 +76,7 @@ export const ApiKeyPanel: React.FC = () => {
                 <EuiCopy textToCopy={elasticsearchEndpoint || ''} afterMessage={COPIED_LABEL}>
                   {(copy) => (
                     <EuiButtonIcon
+                      data-test-subj="enterpriseSearchApiKeyPanelButton"
                       onClick={copy}
                       iconType="copyClipboard"
                       aria-label={i18n.translate(
@@ -113,6 +114,7 @@ export const ApiKeyPanel: React.FC = () => {
                     <EuiCopy textToCopy={cloudId || ''} afterMessage={COPIED_LABEL}>
                       {(copy) => (
                         <EuiButtonIcon
+                          data-test-subj="enterpriseSearchApiKeyPanelButton"
                           onClick={copy}
                           iconType="copyClipboard"
                           aria-label={i18n.translate(
@@ -133,26 +135,18 @@ export const ApiKeyPanel: React.FC = () => {
         <EuiSplitPanel.Inner color="subdued">
           <EuiFlexGroup direction="row" alignItems="center" justifyContent="flexEnd">
             <EuiFlexItem grow={false}>
-              <EuiFlexGroup gutterSize="s">
-                <EuiFlexItem>
-                  <EuiText size="xs" color="subdued">
-                    <FormattedMessage
-                      id="xpack.enterpriseSearch.apiKey.activeKeys"
-                      defaultMessage="{number} active API keys."
-                      values={{
-                        number: (
-                          <EuiBadge
-                            color={apiKeys.length > 0 ? 'success' : 'warning'}
-                            data-test-subj="api-keys-count-badge"
-                          >
-                            {apiKeys.length}
-                          </EuiBadge>
-                        ),
-                      }}
-                    />
-                  </EuiText>
-                </EuiFlexItem>
-              </EuiFlexGroup>
+              <EuiBadge
+                color={apiKeys.length > 0 ? 'success' : 'warning'}
+                data-test-subj="api-keys-count-badge"
+              >
+                <FormattedMessage
+                  id="xpack.enterpriseSearch.apiKey.activeKeys"
+                  defaultMessage="{number} active API keys."
+                  values={{
+                    number: apiKeys.length,
+                  }}
+                />
+              </EuiBadge>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <span>
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/getting_started/panels/api_key_panel_content.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/getting_started/panels/api_key_panel_content.tsx
index ff271a3a3d79e..a220e077f0824 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/getting_started/panels/api_key_panel_content.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/getting_started/panels/api_key_panel_content.tsx
@@ -102,26 +102,18 @@ export const ApiKeyPanelContent: React.FC<ApiKeyPanelContent> = ({ apiKeys, open
               </EuiFlexGroup>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiFlexGroup gutterSize="s">
-                <EuiFlexItem>
-                  <EuiText size="xs" color="subdued">
-                    <FormattedMessage
-                      id="xpack.enterpriseSearch.apiKey.activeKeys"
-                      defaultMessage="{number} active API keys."
-                      values={{
-                        number: (
-                          <EuiBadge
-                            color={(apiKeys?.length || 0) > 0 ? 'success' : 'warning'}
-                            data-test-subj="api-keys-count-badge"
-                          >
-                            {apiKeys?.length || 0}
-                          </EuiBadge>
-                        ),
-                      }}
-                    />
-                  </EuiText>
-                </EuiFlexItem>
-              </EuiFlexGroup>
+              <EuiBadge
+                color={(apiKeys?.length || 0) > 0 ? 'success' : 'warning'}
+                data-test-subj="api-keys-count-badge"
+              >
+                <FormattedMessage
+                  id="xpack.enterpriseSearch.apiKey.activeKeys"
+                  defaultMessage="{number} active API keys."
+                  values={{
+                    number: apiKeys?.length || 0,
+                  }}
+                />
+              </EuiBadge>
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>