fix: [Stateful: Home page] Not accessible element, showing number of …

…active API keys, via keyboard (elastic#197456) Closes: elastic#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 [elastic#195209](elastic#195209 (comment) 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">
rshen91 · Nov 4, 2024 · 0a1ec8f · 0a1ec8f
1 parent 641d0e2
commit 0a1ec8f
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 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
@@ -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/...rprise_search/public/applications/shared/getting_started/panels/api_key_panel_content.tsx b/...rprise_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>