[8.x] [A11y][APM] Improve aria-label for EuiCodeBlock on onboarding page (#217292) (#217690)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[A11y][APM] Improve `aria-label` for `EuiCodeBlock` on onboarding
page (#217292)](https://github.com/elastic/kibana/pull/217292)

<!--- Backport version: 9.6.6 -->

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

<!--BACKPORT [{"author":{"name":"Sergi
Romeu","email":"sergi.romeu@elastic.co"},"sourceCommit":{"committedDate":"2025-04-09T13:55:12Z","message":"[A11y][APM]
Improve `aria-label` for `EuiCodeBlock` on onboarding page
(#217292)\n\n## Summary\n\nFixes #195030\n\nThis PR adds `aria-label`
with language context for `EuiCodeBlock` in\nthe APM onboarding
page.","sha":"a49dc033306931b83facd68b062b30339ec895ed","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","apm","Team:obs-ux-infra_services","backport:version","a11y","v8.18.0","v9.1.0","v8.19.0","v9.0.1"],"title":"[A11y][APM]
Improve `aria-label` for `EuiCodeBlock` on onboarding
page","number":217292,"url":"https://github.com/elastic/kibana/pull/217292","mergeCommit":{"message":"[A11y][APM]
Improve `aria-label` for `EuiCodeBlock` on onboarding page
(#217292)\n\n## Summary\n\nFixes #195030\n\nThis PR adds `aria-label`
with language context for `EuiCodeBlock` in\nthe APM onboarding
page.","sha":"a49dc033306931b83facd68b062b30339ec895ed"}},"sourceBranch":"main","suggestedTargetBranches":["8.18","8.x","9.0"],"targetPullRequestStates":[{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/217292","number":217292,"mergeCommit":{"message":"[A11y][APM]
Improve `aria-label` for `EuiCodeBlock` on onboarding page
(#217292)\n\n## Summary\n\nFixes #195030\n\nThis PR adds `aria-label`
with language context for `EuiCodeBlock` in\nthe APM onboarding
page.","sha":"a49dc033306931b83facd68b062b30339ec895ed"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"9.0","label":"v9.0.1","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

x-pack/solutions/observability/plugins/apm/public/components/app/onboarding/agent_config_instructions.tsx

@@ -6,6 +6,7 @@
  */
 
 import React from 'react';
+import { i18n } from '@kbn/i18n';
 import { EuiCodeBlock, EuiSpacer } from '@elastic/eui';
 import {
   getApmAgentCommands,
@@ -54,6 +55,13 @@ export function AgentConfigInstructions({
 
       <EuiCodeBlock
         isCopyable
+        copyAriaLabel={i18n.translate(
+          'xpack.apm.onboarding.agentConfigInstructions.euiCodeBlock.copyAriaLabel',
+          {
+            defaultMessage: 'Copy {variantId} agent configuration code',
+            values: { variantId },
+          }
+        )}
         language={highlightLang || 'bash'}
         data-test-subj="commands"
         lineNumbers={lineNumbers}

x-pack/solutions/observability/plugins/apm/public/components/app/onboarding/instructions/django_agent.tsx

@@ -37,7 +37,13 @@ export const createDjangoAgentInstructions = (commonOptions: AgentInstructions):
             })}
           </EuiMarkdownFormat>
           <EuiSpacer />
-          <EuiCodeBlock language="bash" isCopyable={true}>
+          <EuiCodeBlock
+            language="bash"
+            isCopyable={true}
+            copyAriaLabel={i18n.translate('xpack.apm.onboarding.django.install.copyAriaLabel', {
+              defaultMessage: 'Copy the code to install the APM agent for Django',
+            })}
+          >
             $ pip install elastic-apm
           </EuiCodeBlock>
         </>

x-pack/solutions/observability/plugins/apm/public/components/app/onboarding/instructions/dotnet_agent.tsx

@@ -77,7 +77,16 @@ export const createDotNetAgentInstructions = (commonOptions: AgentInstructions):
             })}
           </EuiMarkdownFormat>
           <EuiSpacer />
-          <EuiCodeBlock language="bash" isCopyable={true}>
+          <EuiCodeBlock
+            language="bash"
+            isCopyable={true}
+            copyAriaLabel={i18n.translate(
+              'xpack.apm.onboarding.dotNet.configureApplication.copyAriaLabel',
+              {
+                defaultMessage: 'Copy the code to add the APM agent to the dotnet application',
+              }
+            )}
+          >
             {codeBlock}
           </EuiCodeBlock>
           <EuiSpacer />

x-pack/solutions/observability/plugins/apm/public/components/app/onboarding/instructions/flask_agent.tsx

@@ -37,7 +37,13 @@ export const createFlaskAgentInstructions = (commonOptions: AgentInstructions):
             })}
           </EuiMarkdownFormat>
           <EuiSpacer />
-          <EuiCodeBlock language="bash" isCopyable={true}>
+          <EuiCodeBlock
+            language="bash"
+            isCopyable={true}
+            copyAriaLabel={i18n.translate('xpack.apm.onboarding.flask.install.copyAriaLabel', {
+              defaultMessage: 'Copy the code to install the APM agent for Flask',
+            })}
+          >
             $ pip install elastic-apm[flask]
           </EuiCodeBlock>
         </>

x-pack/solutions/observability/plugins/apm/public/components/app/onboarding/instructions/go_agent.tsx

@@ -50,7 +50,13 @@ func main() {
             })}
           </EuiMarkdownFormat>
           <EuiSpacer />
-          <EuiCodeBlock language="bash" isCopyable={true}>
+          <EuiCodeBlock
+            language="bash"
+            isCopyable={true}
+            copyAriaLabel={i18n.translate('xpack.apm.onboarding.go.install.copyAriaLabel', {
+              defaultMessage: 'Copy the code to install the APM agent for Go',
+            })}
+          >
             go get go.elastic.co/apm
           </EuiCodeBlock>
         </>
@@ -118,7 +124,13 @@ by using the tracer API directly.',
             })}
           </EuiMarkdownFormat>
           <EuiSpacer />
-          <EuiCodeBlock language="go" isCopyable={true}>
+          <EuiCodeBlock
+            language="go"
+            isCopyable={true}
+            copyAriaLabel={i18n.translate('xpack.apm.onboarding.go.instrument.copyAriaLabel', {
+              defaultMessage: 'Copy the code to instrument your Go application',
+            })}
+          >
             {codeBlock}
           </EuiCodeBlock>
           <EuiMarkdownFormat>

x-pack/solutions/observability/plugins/apm/public/components/app/onboarding/instructions/node_agent.tsx

@@ -38,7 +38,13 @@ export const createNodeAgentInstructions = (commonOptions: AgentInstructions): E
             })}
           </EuiMarkdownFormat>
           <EuiSpacer />
-          <EuiCodeBlock language="bash" isCopyable={true}>
+          <EuiCodeBlock
+            language="bash"
+            isCopyable={true}
+            copyAriaLabel={i18n.translate('xpack.apm.onboarding.node.install.copyAriaLabel', {
+              defaultMessage: 'Copy the code to install the APM agent for Node.js',
+            })}
+          >
             npm install elastic-apm-node --save
           </EuiCodeBlock>
         </>

x-pack/solutions/observability/plugins/apm/public/components/app/onboarding/instructions/php_agent.tsx

@@ -53,7 +53,13 @@ export const createPhpAgentInstructions = (commonOptions: AgentInstructions): Eu
             })}
           </EuiMarkdownFormat>
           <EuiSpacer />
-          <EuiCodeBlock language="bash" isCopyable={true}>
+          <EuiCodeBlock
+            language="bash"
+            isCopyable={true}
+            copyAriaLabel={i18n.translate('xpack.apm.onboarding.php.installPackage.copyAriaLabel', {
+              defaultMessage: 'Copy the code to install the APM agent for PHP',
+            })}
+          >
             apk add --allow-untrusted &lt;package-file&gt;.apk
           </EuiCodeBlock>
           <EuiSpacer />

x-pack/solutions/observability/plugins/apm/public/components/app/onboarding/instructions/rack_agent.tsx

@@ -64,7 +64,13 @@ export const createRackAgentInstructions = (commonOptions: AgentInstructions): E
             })}
           </EuiMarkdownFormat>
           <EuiSpacer />
-          <EuiCodeBlock language="bash" isCopyable={true}>
+          <EuiCodeBlock
+            language="bash"
+            isCopyable={true}
+            copyAriaLabel={i18n.translate('xpack.apm.onboarding.rack.install.copyAriaLabel', {
+              defaultMessage: 'Copy the code to install the APM agent for Rack',
+            })}
+          >
             gem &apos;elastic-apm&apos;
           </EuiCodeBlock>
         </>
@@ -83,7 +89,13 @@ export const createRackAgentInstructions = (commonOptions: AgentInstructions): E
             })}
           </EuiMarkdownFormat>
           <EuiSpacer />
-          <EuiCodeBlock language="bash" isCopyable={true}>
+          <EuiCodeBlock
+            language="bash"
+            isCopyable={true}
+            copyAriaLabel={i18n.translate('xpack.apm.onboarding.rack.configure.copyAriaLabel', {
+              defaultMessage: 'Copy the code to configure the APM agent for Rack',
+            })}
+          >
             {codeBlock}
           </EuiCodeBlock>
         </>

x-pack/solutions/observability/plugins/apm/public/components/app/onboarding/instructions/rails_agent.tsx

@@ -37,7 +37,13 @@ export const createRailsAgentInstructions = (commonOptions: AgentInstructions):
             })}
           </EuiMarkdownFormat>
           <EuiSpacer />
-          <EuiCodeBlock language="bash" isCopyable={true}>
+          <EuiCodeBlock
+            language="bash"
+            isCopyable={true}
+            copyAriaLabel={i18n.translate('xpack.apm.onboarding.rails.install.copyAriaLabel', {
+              defaultMessage: 'Copy the code to install the APM agent for Ruby on Rails',
+            })}
+          >
             gem &apos;elastic-apm&apos;
           </EuiCodeBlock>
         </>

x-pack/solutions/observability/plugins/apm/public/components/app/onboarding/instructions_set.tsx

@@ -16,6 +16,7 @@ import {
 } from '@elastic/eui';
 import React, { useMemo } from 'react';
 import { useHistory } from 'react-router-dom';
+import { css } from '@emotion/react';
 import type {
   INSTRUCTION_VARIANT,
   InstructionVariant,
@@ -52,7 +53,11 @@ function InstructionTabs({
   };
 
   return (
-    <EuiTabs style={{ padding: `0 ${euiTheme.size.l}` }}>
+    <EuiTabs
+      css={css`
+        padding: 0 ${euiTheme.size.l};
+      `}
+    >
       {agentTabs.map((tab) => (
         <EuiTab
           key={tab.id}

x-pack/solutions/observability/plugins/apm/public/tutorial/config_agent/agent_config_instructions.tsx

@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { EuiCodeBlock, EuiSpacer } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import { OpenTelemetryInstructions } from './opentelemetry_instructions';
 import {
   getApmAgentCommands,
@@ -63,6 +64,13 @@ export function AgentConfigInstructions({
 
       <EuiCodeBlock
         isCopyable
+        copyAriaLabel={i18n.translate(
+          'xpack.apm.tutorial.apmAgents.agentConfigurationInstructions.copyAriaLabel',
+          {
+            defaultMessage: 'Copy {variantId} agent configuration code',
+            values: { variantId },
+          }
+        )}
         language={highlightLang || 'bash'}
         data-test-subj="commands"
         lineNumbers={lineNumbers}