From 094c46db015132d11c7663ce51331c52ea1ddb68 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Tue, 5 Nov 2024 03:38:55 +1100
Subject: [PATCH] [8.x] fix: [Stateful: Home page] Not accessible element,
 showing number of active API keys, via keyboard (#197456) (#198804)

# Backport

This will backport the following commits from `main` to `8.x`:
- [fix: [Stateful: Home page] Not accessible element, showing number of
active API keys, via keyboard
(#197456)](https://github.com/elastic/kibana/pull/197456)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Alexey
Antonov","email":"alexwizp@gmail.com"},"sourceCommit":{"committedDate":"2024-11-04T14:47:33Z","message":"fix:
[Stateful: Home page] Not accessible element, showing number of active
API keys, via keyboard (#197456)\n\nCloses: #195209\r\n\r\nThis PR is
based on the following comment: \r\n\r\n> @cee-chen / @bhavyarm, could
you please validate this issue? I'm not\r\nsure if the badge should be
keyboard accessible. On the other hand, I\r\nthink it might make sense
to move active API keys inside the badge.\r\nHowever, this is more of a
design question rather than an a11y one.\r\n\r\n_Originally posted by
@alexwizp
in\r\n[#195209](https://github.com/elastic/kibana/issues/195209#issuecomment-2429091670)_\r\n\r\nThis
PR move text inside badge to address a11y concerns.\r\n\r\n## Screen:
\r\n\r\n<img width=\"734\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/66b2d4f5-75ee-4a1a-b286-03cd346d9aeb\">","sha":"0a1ec8f846cb0c78cfe3ddd0f2c1b4ccd1b3365b","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Project:Accessibility","release_note:skip","v9.0.0","Team:Search","backport:prev-minor"],"title":"fix:
[Stateful: Home page] Not accessible element, showing number of active
API keys, via
keyboard","number":197456,"url":"https://github.com/elastic/kibana/pull/197456","mergeCommit":{"message":"fix:
[Stateful: Home page] Not accessible element, showing number of active
API keys, via keyboard (#197456)\n\nCloses: #195209\r\n\r\nThis PR is
based on the following comment: \r\n\r\n> @cee-chen / @bhavyarm, could
you please validate this issue? I'm not\r\nsure if the badge should be
keyboard accessible. On the other hand, I\r\nthink it might make sense
to move active API keys inside the badge.\r\nHowever, this is more of a
design question rather than an a11y one.\r\n\r\n_Originally posted by
@alexwizp
in\r\n[#195209](https://github.com/elastic/kibana/issues/195209#issuecomment-2429091670)_\r\n\r\nThis
PR move text inside badge to address a11y concerns.\r\n\r\n## Screen:
\r\n\r\n<img width=\"734\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/66b2d4f5-75ee-4a1a-b286-03cd346d9aeb\">","sha":"0a1ec8f846cb0c78cfe3ddd0f2c1b4ccd1b3365b"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/197456","number":197456,"mergeCommit":{"message":"fix:
[Stateful: Home page] Not accessible element, showing number of active
API keys, via keyboard (#197456)\n\nCloses: #195209\r\n\r\nThis PR is
based on the following comment: \r\n\r\n> @cee-chen / @bhavyarm, could
you please validate this issue? I'm not\r\nsure if the badge should be
keyboard accessible. On the other hand, I\r\nthink it might make sense
to move active API keys inside the badge.\r\nHowever, this is more of a
design question rather than an a11y one.\r\n\r\n_Originally posted by
@alexwizp
in\r\n[#195209](https://github.com/elastic/kibana/issues/195209#issuecomment-2429091670)_\r\n\r\nThis
PR move text inside badge to address a11y concerns.\r\n\r\n## Screen:
\r\n\r\n<img width=\"734\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/66b2d4f5-75ee-4a1a-b286-03cd346d9aeb\">","sha":"0a1ec8f846cb0c78cfe3ddd0f2c1b4ccd1b3365b"}}]}]
BACKPORT-->

Co-authored-by: Alexey Antonov <alexwizp@gmail.com>
---
 .../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>