[Visualizations] Make the icon buttons labels more descriptive (#82585)

* [Visualizations] Make the icon buttons labels more descriptive on the Vis Editor * Fix jest test Co-authored-by: Kibana Machine <[email protected]>
elastic · Nov 10, 2020 · af5f299 · af5f299
1 parent 0503f87
commit af5f299
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 23 deletions.
diff --git a/src/plugins/vis_default_editor/public/components/__snapshots__/agg.test.tsx.snap b/src/plugins/vis_default_editor/public/components/__snapshots__/agg.test.tsx.snap
diff --git a/src/plugins/vis_default_editor/public/components/agg.tsx b/src/plugins/vis_default_editor/public/components/agg.tsx
@@ -78,6 +78,7 @@ function DefaultEditorAgg({
   const showDescription = !isEditorOpen && validState;
   const showError = !isEditorOpen && !validState;
   const aggName = agg.type?.name;
+  const schemaTitle = getSchemaByName(schemas, agg.schema).title;
   let disabledParams;
   let aggError;
   // When a Parent Pipeline agg is selected and this agg is the last bucket.
@@ -163,14 +164,16 @@ function DefaultEditorAgg({
 
   const renderAggButtons = () => {
     const actionIcons = [];
+    const aggTitle = agg.type?.title?.toLowerCase();
 
     if (showError) {
       actionIcons.push({
         id: 'hasErrors',
         color: 'danger',
         type: 'alert',
         tooltip: i18n.translate('visDefaultEditor.agg.errorsAriaLabel', {
-          defaultMessage: 'Aggregation has errors',
+          defaultMessage: '{schemaTitle} {aggTitle} aggregation has errors',
+          values: { aggTitle, schemaTitle },
         }),
         dataTestSubj: 'hasErrorsAggregationIcon',
       });
@@ -184,7 +187,8 @@ function DefaultEditorAgg({
         type: 'eye',
         onClick: () => onToggleEnableAgg(agg.id, false),
         tooltip: i18n.translate('visDefaultEditor.agg.disableAggButtonTooltip', {
-          defaultMessage: 'Disable aggregation',
+          defaultMessage: 'Disable {schemaTitle} {aggTitle} aggregation',
+          values: { aggTitle, schemaTitle },
         }),
         dataTestSubj: 'toggleDisableAggregationBtn disable',
       });
@@ -196,7 +200,8 @@ function DefaultEditorAgg({
         type: 'eyeClosed',
         onClick: () => onToggleEnableAgg(agg.id, true),
         tooltip: i18n.translate('visDefaultEditor.agg.enableAggButtonTooltip', {
-          defaultMessage: 'Enable aggregation',
+          defaultMessage: 'Enable {schemaTitle} {aggTitle} aggregation',
+          values: { aggTitle, schemaTitle },
         }),
         dataTestSubj: 'toggleDisableAggregationBtn enable',
       });
@@ -206,7 +211,8 @@ function DefaultEditorAgg({
         id: 'dragHandle',
         type: 'grab',
         tooltip: i18n.translate('visDefaultEditor.agg.modifyPriorityButtonTooltip', {
-          defaultMessage: 'Modify priority by dragging',
+          defaultMessage: 'Modify priority of {schemaTitle} {aggTitle} by dragging',
+          values: { aggTitle, schemaTitle },
         }),
         dataTestSubj: 'dragHandleBtn',
       });
@@ -218,7 +224,8 @@ function DefaultEditorAgg({
         type: 'cross',
         onClick: () => removeAgg(agg.id),
         tooltip: i18n.translate('visDefaultEditor.agg.removeDimensionButtonTooltip', {
-          defaultMessage: 'Remove dimension',
+          defaultMessage: 'Remove {schemaTitle} {aggTitle} aggregation',
+          values: { aggTitle, schemaTitle },
         }),
         dataTestSubj: 'removeDimensionBtn',
       });
@@ -257,7 +264,7 @@ function DefaultEditorAgg({
       </div>
     );
   };
-  const schemaTitle = getSchemaByName(schemas, agg.schema).title;
+
   const buttonContent = (
     <>
       {schemaTitle || agg.schema} {showDescription && <span>{aggDescription}</span>}

diff --git a/src/plugins/vis_default_editor/public/components/agg_add.tsx b/src/plugins/vis_default_editor/public/components/agg_add.tsx
@@ -56,22 +56,26 @@ function DefaultEditorAggAdd({
     addSchema(schema);
   };
 
+  const groupNameLabel =
+    groupName === AggGroupNames.Buckets
+      ? i18n.translate('visDefaultEditor.aggAdd.bucketLabel', { defaultMessage: 'bucket' })
+      : i18n.translate('visDefaultEditor.aggAdd.metricLabel', { defaultMessage: 'metric' });
+
   const addButton = (
     <EuiButtonEmpty
       size="xs"
       iconType="plusInCircleFilled"
       data-test-subj={`visEditorAdd_${groupName}`}
       onClick={() => setIsPopoverOpen(!isPopoverOpen)}
+      aria-label={i18n.translate('visDefaultEditor.aggAdd.addGroupButtonLabel', {
+        defaultMessage: 'Add {groupNameLabel}',
+        values: { groupNameLabel },
+      })}
     >
       <FormattedMessage id="visDefaultEditor.aggAdd.addButtonLabel" defaultMessage="Add" />
     </EuiButtonEmpty>
   );
 
-  const groupNameLabel =
-    groupName === AggGroupNames.Buckets
-      ? i18n.translate('visDefaultEditor.aggAdd.bucketLabel', { defaultMessage: 'bucket' })
-      : i18n.translate('visDefaultEditor.aggAdd.metricLabel', { defaultMessage: 'metric' });
-
   const isSchemaDisabled = (schema: Schema): boolean => {
     const count = group.filter((agg) => agg.schema === schema.name).length;
     return count >= schema.max;

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -3542,11 +3542,6 @@
     "uiActions.triggers.valueClickTitle": "シングルクリック",
     "usageCollection.stats.notReadyMessage": "まだ統計が準備できていません。しばらくたってから再試行してください。",
     "visDefaultEditor.advancedToggle.advancedLinkLabel": "高度な設定",
-    "visDefaultEditor.agg.disableAggButtonTooltip": "集約を無効にする",
-    "visDefaultEditor.agg.enableAggButtonTooltip": "集約を有効にする",
-    "visDefaultEditor.agg.errorsAriaLabel": "集約にエラーがあります",
-    "visDefaultEditor.agg.modifyPriorityButtonTooltip": "ドラッグして優先順位を変更します",
-    "visDefaultEditor.agg.removeDimensionButtonTooltip": "次元を削除",
     "visDefaultEditor.agg.toggleEditorButtonAriaLabel": "{schema} エディターを切り替える",
     "visDefaultEditor.aggAdd.addButtonLabel": "追加",
     "visDefaultEditor.aggAdd.addGroupButtonLabel": "{groupNameLabel} を追加",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -3543,11 +3543,6 @@
     "uiActions.triggers.valueClickTitle": "单击",
     "usageCollection.stats.notReadyMessage": "统计信息尚未准备就绪。请稍后重试。",
     "visDefaultEditor.advancedToggle.advancedLinkLabel": "高级",
-    "visDefaultEditor.agg.disableAggButtonTooltip": "禁用聚合",
-    "visDefaultEditor.agg.enableAggButtonTooltip": "启用聚合",
-    "visDefaultEditor.agg.errorsAriaLabel": "聚合有错误",
-    "visDefaultEditor.agg.modifyPriorityButtonTooltip": "通过拖动来修改优先级",
-    "visDefaultEditor.agg.removeDimensionButtonTooltip": "移除维度",
     "visDefaultEditor.agg.toggleEditorButtonAriaLabel": "切换 {schema} 编辑器",
     "visDefaultEditor.aggAdd.addButtonLabel": "添加",
     "visDefaultEditor.aggAdd.addGroupButtonLabel": "添加{groupNameLabel}",