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

## Summary

Fixes #195030

This PR adds `aria-label` with language context for `EuiCodeBlock` in
the APM onboarding page.

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 @@ app.Run();`;
             })}
           </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, Instruction } from './instruction_variants';
 import { getDisplayText } from './instruction_variants';
 import { useApmParams } from '../../../hooks/use_apm_params';
@@ -48,7 +49,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}