[Lens] (Accessibility) add aria-label to chart type icon

elastic · Nov 30, 2020 · 6e61e3b · 6e61e3b
1 parent cb55898
commit 6e61e3b
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 8 deletions.
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_settings.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_settings.tsx
@@ -26,10 +26,21 @@ export function LayerSettings({
     return null;
   }
 
-  const a11yText = i18n.translate('xpack.lens.editLayerSettings', {
-    defaultMessage: 'Edit layer settings',
-  });
+  const a11yText = (chartType?: string) => {
+    if (chartType) {
+      return i18n.translate('xpack.lens.editLayerSettingsChartType', {
+        defaultMessage: 'Edit layer settings, {chartType}',
+        values: {
+          chartType,
+        },
+      });
+    }
+    return i18n.translate('xpack.lens.editLayerSettings', {
+      defaultMessage: 'Edit layer settings',
+    });
+  };
 
+  const contextMenuIcon = activeVisualization.getLayerContextMenuIcon?.(layerConfigProps);
   return (
     <EuiPopover
       id={`lnsLayerPopover_${layerId}`}
@@ -43,9 +54,9 @@ export function LayerSettings({
         >
           <ToolbarButton
             size="s"
-            iconType={activeVisualization.getLayerContextMenuIcon?.(layerConfigProps) || 'gear'}
-            aria-label={a11yText}
-            title={a11yText}
+            iconType={contextMenuIcon?.icon || 'gear'}
+            aria-label={a11yText(contextMenuIcon?.label || '')}
+            title={a11yText(contextMenuIcon?.label || '')}
             onClick={() => setIsOpen(!isOpen)}
             data-test-subj="lns_layer_settings"
           />

diff --git a/x-pack/plugins/lens/public/types.ts b/x-pack/plugins/lens/public/types.ts
@@ -540,7 +540,10 @@ export interface Visualization<T = unknown> {
    * Visualizations can provide a custom icon which will open a layer-specific popover
    * If no icon is provided, gear icon is default
    */
-  getLayerContextMenuIcon?: (opts: { state: T; layerId: string }) => IconType | undefined;
+  getLayerContextMenuIcon?: (opts: {
+    state: T;
+    layerId: string;
+  }) => { icon: IconType | 'gear'; label: string } | undefined;
 
   /**
    * The frame is telling the visualization to update or set a dimension based on user interaction

diff --git a/x-pack/plugins/lens/public/xy_visualization/visualization.tsx b/x-pack/plugins/lens/public/xy_visualization/visualization.tsx
@@ -300,7 +300,11 @@ export const getXyVisualization = ({
 
   getLayerContextMenuIcon({ state, layerId }) {
     const layer = state.layers.find((l) => l.layerId === layerId);
-    return visualizationTypes.find((t) => t.id === layer?.seriesType)?.icon;
+    const visualizationType = visualizationTypes.find((t) => t.id === layer?.seriesType);
+    return {
+      icon: visualizationType?.icon || 'gear',
+      label: visualizationType?.label || '',
+    };
   },
 
   renderLayerContextMenu(domElement, props) {