[Dashboard] Pass in title to Charts (#122319)

* Pass title from dashboard panel to charts

* Fix lint

* Fix CI

* Fix CI

* Fix CI

* Add 'ariaLabel' in expressions

* Fix text

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

src/plugins/chart_expressions/expression_gauge/common/expression_functions/gauge_function.ts

@@ -93,14 +93,27 @@ export const gaugeFunction = (): GaugeExpressionFunctionDefinition => ({
       }),
       required: false,
     },
+    ariaLabel: {
+      types: ['string'],
+      help: i18n.translate('expressionGauge.functions.gaugeChart.config.ariaLabel.help', {
+        defaultMessage: 'Specifies the aria label of the gauge chart',
+      }),
+      required: false,
+    },
   },
-  fn(data, args) {
+  fn(data, args, handlers) {
     return {
       type: 'render',
       as: EXPRESSION_GAUGE_NAME,
       value: {
         data,
-        args,
+        args: {
+          ...args,
+          ariaLabel:
+            args.ariaLabel ??
+            (handlers.variables?.embeddableTitle as string) ??
+            handlers.getExecutionContext?.()?.description,
+        },
       },
     };
   },

src/plugins/chart_expressions/expression_gauge/common/types/expression_functions.ts

@@ -46,6 +46,7 @@ export type GaugeArguments = GaugeState & {
   shape: GaugeShape;
   colorMode: GaugeColorMode;
   palette?: PaletteOutput<CustomPaletteState>;
+  ariaLabel?: string;
 };
 
 export type GaugeInput = Datatable;

src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx

@@ -231,7 +231,12 @@ export const GaugeComponent: FC<GaugeRenderProps> = memo(
 
     return (
       <Chart>
-        <Settings debugState={window._echDebugStateFlag ?? false} theme={chartTheme} />
+        <Settings
+          debugState={window._echDebugStateFlag ?? false}
+          theme={chartTheme}
+          ariaLabel={args.ariaLabel}
+          ariaUseDefaultSummary={!args.ariaLabel}
+        />
         <Goal
           id="goal"
           subtype={subtype}

src/plugins/chart_expressions/expression_heatmap/common/expression_functions/heatmap_function.ts

@@ -141,6 +141,13 @@ export const heatmapFunction = (): HeatmapExpressionFunctionDefinition => ({
         defaultMessage: 'The id of the split column or the corresponding dimension',
       }),
     },
+    ariaLabel: {
+      types: ['string'],
+      help: i18n.translate('expressionHeatmap.functions.args.ariaLabelHelpText', {
+        defaultMessage: 'Specifies the aria label of the heat map',
+      }),
+      required: false,
+    },
   },
   fn(data, args, handlers) {
     if (handlers?.inspectorAdapters?.tables) {
@@ -203,7 +210,13 @@ export const heatmapFunction = (): HeatmapExpressionFunctionDefinition => ({
       as: EXPRESSION_HEATMAP_NAME,
       value: {
         data,
-        args,
+        args: {
+          ...args,
+          ariaLabel:
+            args.ariaLabel ??
+            (handlers.variables?.embeddableTitle as string) ??
+            handlers.getExecutionContext?.()?.description,
+        },
       },
     };
   },

src/plugins/chart_expressions/expression_heatmap/common/types/expression_functions.ts

@@ -77,6 +77,7 @@ export interface HeatmapArguments {
   splitColumnAccessor?: string | ExpressionValueVisDimension;
   legend: HeatmapLegendConfigResult;
   gridConfig: HeatmapGridConfigResult;
+  ariaLabel?: string;
 }
 
 export type HeatmapInput = Datatable;

src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx

@@ -521,6 +521,8 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
                     : NaN,
               }}
               onBrushEnd={interactive ? (onBrushEnd as BrushEndListener) : undefined}
+              ariaLabel={args.ariaLabel}
+              ariaUseDefaultSummary={!args.ariaLabel}
             />
             <Heatmap
               id="heatmap"

src/plugins/chart_expressions/expression_partition_vis/common/expression_functions/i18n.ts

@@ -93,6 +93,10 @@ export const strings = {
     i18n.translate('expressionPartitionVis.waffle.function.args.showValuesInLegendHelpText', {
       defaultMessage: 'Show values in legend',
     }),
+  getAriaLabelHelp: () =>
+    i18n.translate('expressionPartitionVis.reusable.functions.args.ariaLabelHelpText', {
+      defaultMessage: 'Specifies the aria label of the chart',
+    }),
 
   getSliceSizeHelp: () =>
     i18n.translate('expressionPartitionVis.reusable.function.dimension.metric', {

src/plugins/chart_expressions/expression_partition_vis/common/expression_functions/mosaic_vis_function.ts

@@ -82,6 +82,11 @@ export const mosaicVisFunction = (): MosaicVisExpressionFunctionDefinition => ({
       help: strings.getLabelsArgHelp(),
       default: `{${PARTITION_LABELS_FUNCTION}}`,
     },
+    ariaLabel: {
+      types: ['string'],
+      help: strings.getAriaLabelHelp(),
+      required: false,
+    },
   },
   fn(context, args, handlers) {
     const maxSupportedBuckets = 2;
@@ -95,6 +100,10 @@ export const mosaicVisFunction = (): MosaicVisExpressionFunctionDefinition => ({
 
     const visConfig: PartitionVisParams = {
       ...args,
+      ariaLabel:
+        args.ariaLabel ??
+        (handlers.variables?.embeddableTitle as string) ??
+        handlers.getExecutionContext?.()?.description,
       palette: args.palette,
       dimensions: {
         metric: args.metric,

src/plugins/chart_expressions/expression_partition_vis/common/expression_functions/pie_vis_function.ts

@@ -109,6 +109,11 @@ export const pieVisFunction = (): PieVisExpressionFunctionDefinition => ({
       help: strings.getStartFromSecondLargestSliceArgHelp(),
       default: true,
     },
+    ariaLabel: {
+      types: ['string'],
+      help: strings.getAriaLabelHelp(),
+      required: false,
+    },
   },
   fn(context, args, handlers) {
     if (args.splitColumn && args.splitRow) {
@@ -117,6 +122,10 @@ export const pieVisFunction = (): PieVisExpressionFunctionDefinition => ({
 
     const visConfig: PartitionVisParams = {
       ...args,
+      ariaLabel:
+        args.ariaLabel ??
+        (handlers.variables?.embeddableTitle as string) ??
+        handlers.getExecutionContext?.()?.description,
       palette: args.palette,
       dimensions: {
         metric: args.metric,

src/plugins/chart_expressions/expression_partition_vis/common/expression_functions/treemap_vis_function.ts

@@ -82,6 +82,11 @@ export const treemapVisFunction = (): TreemapVisExpressionFunctionDefinition =>
       help: strings.getLabelsArgHelp(),
       default: `{${PARTITION_LABELS_FUNCTION}}`,
     },
+    ariaLabel: {
+      types: ['string'],
+      help: strings.getAriaLabelHelp(),
+      required: false,
+    },
   },
   fn(context, args, handlers) {
     const maxSupportedBuckets = 2;
@@ -95,6 +100,10 @@ export const treemapVisFunction = (): TreemapVisExpressionFunctionDefinition =>
 
     const visConfig: PartitionVisParams = {
       ...args,
+      ariaLabel:
+        args.ariaLabel ??
+        (handlers.variables?.embeddableTitle as string) ??
+        handlers.getExecutionContext?.()?.description,
       palette: args.palette,
       dimensions: {
         metric: args.metric,

src/plugins/chart_expressions/expression_partition_vis/common/expression_functions/waffle_vis_function.ts

@@ -81,6 +81,11 @@ export const waffleVisFunction = (): WaffleVisExpressionFunctionDefinition => ({
       help: strings.getShowValuesInLegendArgHelp(),
       default: false,
     },
+    ariaLabel: {
+      types: ['string'],
+      help: strings.getAriaLabelHelp(),
+      required: false,
+    },
   },
   fn(context, args, handlers) {
     if (args.splitColumn && args.splitRow) {
@@ -90,6 +95,10 @@ export const waffleVisFunction = (): WaffleVisExpressionFunctionDefinition => ({
     const buckets = args.bucket ? [args.bucket] : [];
     const visConfig: PartitionVisParams = {
       ...args,
+      ariaLabel:
+        args.ariaLabel ??
+        (handlers.variables?.embeddableTitle as string) ??
+        handlers.getExecutionContext?.()?.description,
       palette: args.palette,
       dimensions: {
         metric: args.metric,

src/plugins/chart_expressions/expression_partition_vis/common/types/expression_renderers.ts

@@ -52,6 +52,7 @@ interface VisCommonParams {
   legendPosition: Position;
   truncateLegend: boolean;
   maxLegendLines: number;
+  ariaLabel?: string;
 }
 
 interface VisCommonConfig extends VisCommonParams {

src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx

@@ -402,6 +402,8 @@ const PartitionVisComponent = (props: PartitionVisComponentProps) => {
                 ]}
                 baseTheme={chartBaseTheme}
                 onRenderChange={onRenderChange}
+                ariaLabel={props.visParams.ariaLabel}
+                ariaUseDefaultSummary={!props.visParams.ariaLabel}
               />
               <Partition
                 id={visType}

src/plugins/chart_expressions/expression_tagcloud/common/expression_functions/tagcloud_function.ts

@@ -41,6 +41,9 @@ const strings = {
     bucket: i18n.translate('expressionTagcloud.functions.tagcloud.args.bucketHelpText', {
       defaultMessage: 'bucket dimension configuration',
     }),
+    ariaLabel: i18n.translate('expressionTagcloud.functions.tagcloud.args.ariaLabelHelpText', {
+      defaultMessage: 'Specifies the aria label of the tagcloud',
+    }),
   },
   dimension: {
     tags: i18n.translate('expressionTagcloud.functions.tagcloud.dimension.tags', {
@@ -123,6 +126,11 @@ export const tagcloudFunction: ExpressionTagcloudFunction = () => {
         types: ['vis_dimension'],
         help: argHelp.bucket,
       },
+      ariaLabel: {
+        types: ['string'],
+        help: argHelp.ariaLabel,
+        required: false,
+      },
     },
     fn(input, args, handlers) {
       const visParams: TagCloudRendererParams = {
@@ -136,6 +144,10 @@ export const tagcloudFunction: ExpressionTagcloudFunction = () => {
           bucket: args.bucket,
         }),
         palette: args.palette,
+        ariaLabel:
+          args.ariaLabel ??
+          (handlers.variables?.embeddableTitle as string) ??
+          handlers.getExecutionContext?.()?.description,
       };
 
       if (handlers?.inspectorAdapters?.tables) {

src/plugins/chart_expressions/expression_tagcloud/common/types/expression_functions.ts

@@ -20,6 +20,7 @@ interface TagCloudCommonParams {
   minFontSize: number;
   maxFontSize: number;
   showLabel: boolean;
+  ariaLabel?: string;
 }
 
 export interface TagCloudVisConfig extends TagCloudCommonParams {

src/plugins/chart_expressions/expression_tagcloud/public/components/tagcloud_component.tsx

@@ -191,7 +191,12 @@ export const TagCloudChart = ({
       {(resizeRef) => (
         <div className="tgcChart__wrapper" ref={resizeRef} data-test-subj="tagCloudVisualization">
           <Chart size="100%">
-            <Settings onElementClick={handleWordClick} onRenderChange={onRenderChange} />
+            <Settings
+              onElementClick={handleWordClick}
+              onRenderChange={onRenderChange}
+              ariaLabel={visParams.ariaLabel}
+              ariaUseDefaultSummary={!visParams.ariaLabel}
+            />
             <Wordcloud
               id="tagCloud"
               startAngle={0}