feat(legend): Improve interactions legend labels (#2418)

* ✨ First draft

* ✨ Offer new api for interaction labels

* 🔧 Tweak story

* 🔧 Fix checks

* test(vrt): update screenshots [skip ci]

* ✅ Fix test

* 🐛 Fix issue

* ✅ Add test

* 📸 Update snapshots

* 🔥 Remove  api for labels

* 🔥 Remove prop fro Settings

* 🔥 Update doc

* 📸 Update snapshots

* ✨ Make label aware of outer context

* 📸 Update snapshots

* ✅ Add test to check interactive title on various scenarios

---------

Co-authored-by: elastic-datavis[bot] <98618603+elastic-datavis[bot]@users.noreply.github.com>

e2e/tests/legend_stories.test.ts

@@ -182,12 +182,56 @@ test.describe('Legend stories', () => {
         Array.from(document.getElementsByClassName('echLegendItem'), (e) => e.outerHTML),
       );
       (await labels).forEach((label, index) => {
-        if (label.includes('Activate to show series')) {
+        const ariaInteractionLabel = label.split('; ')[1];
+        if (ariaInteractionLabel && /show/.test(ariaInteractionLabel)) {
           hiddenResults.push(index);
         }
       });
       expect(hiddenResults).toEqual([1]);
     });
+
+    test('title interactive help should change according to the legend context for the item', async ({ page }) => {
+      await common.loadElementFromURL(page)(
+        'http://localhost:9001/?path=/story/legend--positioning&knob-position=right',
+        '.echLegendItem__label',
+      );
+
+      // check that the first item has a "isolate" title as second line
+      const initialLabels = await page.evaluate(() =>
+        Array.from(document.getElementsByClassName('echLegendItem__label'), (e) => e.getAttribute('title')),
+      );
+
+      expect(initialLabels.map((label) => (label ? label.split('\n')[1] : ''))).toEqual(
+        new Array(initialLabels.length).fill('Click: isolate series'),
+      );
+
+      // click on the first item
+      await page.keyboard.press('Tab');
+      await page.keyboard.press(`Enter`);
+
+      // now check that it has a "show all" title this time
+      // check that all the other items (hidden) have a "show" title
+      const secondRoundLabels = await page.evaluate(() =>
+        Array.from(document.getElementsByClassName('echLegendItem__label'), (e) => e.getAttribute('title')),
+      );
+      expect(secondRoundLabels.map((label) => (label ? label.split('\n')[1] : ''))).toEqual(
+        ['Click: show all series'].concat(new Array(secondRoundLabels.length - 1).fill('Click: show series')),
+      );
+
+      // now click on the second item (hidden)
+      await page.keyboard.press('Tab');
+      await page.keyboard.press(`Enter`);
+
+      // check that the first two items have a "hide" title and the rest have a "show" title
+      const thirdRoundLabels = await page.evaluate(() =>
+        Array.from(document.getElementsByClassName('echLegendItem__label'), (e) => e.getAttribute('title')),
+      );
+      expect(thirdRoundLabels.map((label) => (label ? label.split('\n')[1] : ''))).toEqual(
+        ['Click: hide series', 'Click: hide series'].concat(
+          new Array(secondRoundLabels.length - 2).fill('Click: show series'),
+        ),
+      );
+    });
   });
 
   test.describe('Extra values', () => {

packages/charts/src/components/__snapshots__/chart.test.tsx.snap

@@ -26,7 +26,7 @@ exports[`Chart should render the legend name test 1`] = `
             <div className="echLegend echLegend--debug echLegend--vertical echLegend--right echLegend--top" style={{...}} dir="ltr">
               <div style={{...}} className="echLegendListContainer">
                 <ul style={{...}} className="echLegendList">
-                  <LegendItem item={{...}} positionConfig={{...}} isMostlyRTL={false} totalItems={1} extraValues={{...}} legendValues={{...}} onMouseOut={[undefined]} onMouseOver={[undefined]} onClick={[undefined]} clearTemporaryColorsAction={[Function (anonymous)]} setPersistedColorAction={[Function (anonymous)]} setTemporaryColorAction={[Function (anonymous)]} mouseOutAction={[Function (anonymous)]} mouseOverAction={[Function (anonymous)]} toggleDeselectSeriesAction={[Function (anonymous)]} colorPicker={[undefined]} action={[undefined]} labelOptions={{...}} flatLegend={false}>
+                  <LegendItem item={{...}} positionConfig={{...}} isMostlyRTL={false} totalItems={1} hiddenItems={0} extraValues={{...}} legendValues={{...}} onMouseOut={[undefined]} onMouseOver={[undefined]} onClick={[undefined]} clearTemporaryColorsAction={[Function (anonymous)]} setPersistedColorAction={[Function (anonymous)]} setTemporaryColorAction={[Function (anonymous)]} mouseOutAction={[Function (anonymous)]} mouseOverAction={[Function (anonymous)]} toggleDeselectSeriesAction={[Function (anonymous)]} colorPicker={[undefined]} action={[undefined]} labelOptions={{...}} flatLegend={false}>
                     <li className="echLegendItem echLegendItem--vertical" onMouseEnter={[Function (anonymous)]} onMouseLeave={[Function (anonymous)]} style={{...}} dir="ltr" data-ech-series-name="test">
                       <div className="background" />
                       <div className="colorWrapper">
@@ -42,7 +42,7 @@ exports[`Chart should render the legend name test 1`] = `
                           </div>
                         </ForwardRef>
                       </div>
-                      <Label label="test" options={{...}} isToggleable={false} onToggle={[undefined]} isSeriesHidden={false}>
+                      <Label label="test" options={{...}} isToggleable={false} onToggle={[undefined]} isSeriesHidden={false} totalSeriesCount={1} hiddenSeriesCount={0}>
                         <div dir="ltr" className="echLegendItem__label echLegendItem__label--singleline" title="test" style={{...}}>
                           test
                         </div>