[A11y] improve aria labels (elastic#188363)

## Summary Closes elastic/search-team#7624 to provide more information to blind users what the programming language is referring to. Closes elastic/search-team#7620 to include more information for the Copy button ### Checklist - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
lcawl · Jul 25, 2024 · 15942bf · 15942bf
1 parent e831e83
commit 15942bf
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 7 deletions.
diff --git a/packages/kbn-search-api-panels/components/code_box.tsx b/packages/kbn-search-api-panels/components/code_box.tsx
@@ -43,6 +43,7 @@ interface CodeBoxProps {
   sharePlugin?: SharePluginStart;
   consoleRequest?: string;
   showTopBar?: boolean;
+  consoleTitle?: string;
 }
 
 export const CodeBox: React.FC<CodeBoxProps> = ({
@@ -56,10 +57,31 @@ export const CodeBox: React.FC<CodeBoxProps> = ({
   setSelectedLanguage,
   sharePlugin,
   consoleRequest,
+  consoleTitle,
   showTopBar = true,
 }) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
 
+  const getAriaLabel = (name: string) =>
+    consoleTitle
+      ? i18n.translate('searchApiPanels.welcomeBanner.codeBox.selectAriaLabel', {
+          defaultMessage: '{context} {languageName}',
+          values: { context: consoleTitle, languageName: name },
+        })
+      : i18n.translate('searchApiPanels.welcomeBanner.codeBox.selectLabel', {
+          defaultMessage: 'Select a programming language for the code snippet {languageName}',
+          values: { languageName: name },
+        });
+
+  const getCopyButtonAriaLabel = consoleTitle
+    ? i18n.translate('searchApiPanels.welcomeBanner.codeBox.copyAriaLabel', {
+        defaultMessage: 'Copy the {context} code snippet',
+        values: { context: consoleTitle },
+      })
+    : i18n.translate('searchApiPanels.welcomeBanner.codeBox.copyLabel', {
+        defaultMessage: 'Copy the code snippet',
+      });
+
   const items = languages
     ? languages.map((language) => (
         <EuiContextMenuItem
@@ -87,9 +109,7 @@ export const CodeBox: React.FC<CodeBoxProps> = ({
   const button = selectedLanguage ? (
     <EuiThemeProvider colorMode="dark">
       <EuiButtonEmpty
-        aria-label={i18n.translate('searchApiPanels.welcomeBanner.codeBox.selectAriaLabel', {
-          defaultMessage: 'Select a programming language',
-        })}
+        aria-label={getAriaLabel(selectedLanguage.name)}
         color="text"
         iconType="arrowDown"
         iconSide="left"
@@ -129,7 +149,13 @@ export const CodeBox: React.FC<CodeBoxProps> = ({
               <EuiFlexItem grow={false}>
                 <EuiCopy textToCopy={codeSnippet}>
                   {(copy) => (
-                    <EuiButtonEmpty color="text" iconType="copyClipboard" size="s" onClick={copy}>
+                    <EuiButtonEmpty
+                      color="text"
+                      iconType="copyClipboard"
+                      size="s"
+                      onClick={copy}
+                      aria-label={getCopyButtonAriaLabel}
+                    >
                       {i18n.translate('searchApiPanels.welcomeBanner.codeBox.copyButtonLabel', {
                         defaultMessage: 'Copy',
                       })}

diff --git a/packages/kbn-search-api-panels/components/ingest_data.tsx b/packages/kbn-search-api-panels/components/ingest_data.tsx
@@ -73,6 +73,9 @@ export const IngestData: React.FC<IngestDataProps> = ({
           application={application}
           consolePlugin={consolePlugin}
           sharePlugin={sharePlugin}
+          consoleTitle={i18n.translate('searchApiPanels.welcomeBanner.ingestData.title', {
+            defaultMessage: 'Ingest data',
+          })}
         />
       }
       links={[]}

diff --git a/packages/kbn-search-api-panels/components/install_client.tsx b/packages/kbn-search-api-panels/components/install_client.tsx
@@ -70,6 +70,9 @@ export const InstallClientPanel: React.FC<InstallClientProps> = ({
         assetBasePath={assetBasePath}
         application={application}
         sharePlugin={sharePlugin}
+        consoleTitle={i18n.translate('searchApiPanels.welcomeBanner.installClient.title', {
+          defaultMessage: 'Install a client',
+        })}
       />
       <EuiSpacer />
       <Link language={language} assetBasePath={assetBasePath} />

diff --git a/x-pack/plugins/serverless_search/public/application/components/overview.tsx b/x-pack/plugins/serverless_search/public/application/components/overview.tsx
@@ -192,6 +192,9 @@ export const ElasticsearchOverview = () => {
               assetBasePath={assetBasePath}
               application={application}
               sharePlugin={share}
+              consoleTitle={i18n.translate('xpack.serverlessSearch.configureClient.title', {
+                defaultMessage: 'Configure your client',
+              })}
             />
           }
           links={[
@@ -238,6 +241,9 @@ export const ElasticsearchOverview = () => {
               assetBasePath={assetBasePath}
               application={application}
               sharePlugin={share}
+              consoleTitle={i18n.translate('xpack.serverlessSearch.testConnection.title', {
+                defaultMessage: 'Test your connection',
+              })}
             />
           }
           links={[]}
@@ -349,6 +355,9 @@ export const ElasticsearchOverview = () => {
               application={application}
               consolePlugin={consolePlugin}
               sharePlugin={share}
+              consoleTitle={i18n.translate('xpack.serverlessSearch.searchQuery.title', {
+                defaultMessage: 'Build your first search query',
+              })}
             />
           }
           links={[]}

diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
@@ -5812,7 +5812,6 @@
     "searchApiPanels.pipeline.overview.extAndStandard.description": "Analysez les informations depuis vos documents pour assurer qu'ils sont conformes au format standardisé.",
     "searchApiPanels.pipeline.overview.extAndStandard.title": "Extraire et standardiser",
     "searchApiPanels.welcomeBanner.codeBox.copyButtonLabel": "Copier",
-    "searchApiPanels.welcomeBanner.codeBox.selectAriaLabel": "Sélectionner un langage de programmation",
     "searchApiPanels.welcomeBanner.header.description": "Configurez votre client de langage de programmation, ingérez des données, et vous serez prêt à commencer vos recherches en quelques minutes.",
     "searchApiPanels.welcomeBanner.header.greeting.customTitle": "👋 Bonjour {name} !",
     "searchApiPanels.welcomeBanner.header.greeting.defaultTitle": "👋 Bonjour",

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -5792,7 +5792,6 @@
     "searchApiPanels.pipeline.overview.extAndStandard.description": "ドキュメントから情報を解析し、標準化された形式に準拠していることを確認します。",
     "searchApiPanels.pipeline.overview.extAndStandard.title": "抽出と標準化",
     "searchApiPanels.welcomeBanner.codeBox.copyButtonLabel": "コピー",
-    "searchApiPanels.welcomeBanner.codeBox.selectAriaLabel": "プログラミング言語を選択",
     "searchApiPanels.welcomeBanner.header.description": "プログラミング言語のクライアントを設定し、データを取り込めば、数分で検索を開始できます。",
     "searchApiPanels.welcomeBanner.header.greeting.customTitle": "👋 こんにちは、{name}さん!",
     "searchApiPanels.welcomeBanner.header.greeting.defaultTitle": "👋 こんにちは",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -5821,7 +5821,6 @@
     "searchApiPanels.pipeline.overview.extAndStandard.description": "解析您文档中的信息以确保它们遵循标准化格式。",
     "searchApiPanels.pipeline.overview.extAndStandard.title": "提取并标准化",
     "searchApiPanels.welcomeBanner.codeBox.copyButtonLabel": "复制",
-    "searchApiPanels.welcomeBanner.codeBox.selectAriaLabel": "选择编程语言",
     "searchApiPanels.welcomeBanner.header.description": "设置您的编程语言客户端，采集一些数据，如此即可在数分钟内开始搜索。",
     "searchApiPanels.welcomeBanner.header.greeting.customTitle": "👋 {name} 您好！",
     "searchApiPanels.welcomeBanner.header.greeting.defaultTitle": "👋 您好",