feat(legend): add keyboard navigation

.playground/playground.tsx

@@ -38,67 +38,28 @@
 
 import React from 'react';
 
-import {
-  AnnotationDomainTypes,
-  Axis,
-  BarSeries,
-  Chart,
-  LineAnnotation,
-  LineAnnotationDatum,
-  ScaleType,
-  Settings,
-} from '../src';
-import { Icon } from '../src/components/icons/icon';
+import { Axis, BarSeries, Chart, ScaleType, Settings } from '../src';
 import { Position } from '../src/utils/commons';
-import { arrayKnobs } from '../stories/utils/knobs';
-
-function generateAnnotationData(values: any[]): LineAnnotationDatum[] {
-  return values.map((value, index) => ({ dataValue: value, details: `detail-${index}` }));
-}
-const data = arrayKnobs('data values', [2.5, 7.2]);
-const dataValues = generateAnnotationData(data);
+import * as TestDatasets from '../src/utils/data_samples/test_dataset';
 
 export class Playground extends React.Component {
   render() {
     return (
       <div className="chart">
         <Chart className="story-chart">
-          <Settings showLegend showLegendExtra />
-          <LineAnnotation
-            id="annotation_1"
-            domainType={AnnotationDomainTypes.XDomain}
-            dataValues={dataValues}
-            marker={<Icon type="alert" />}
-          />
-          <LineAnnotation id="1" domainType={AnnotationDomainTypes.YDomain} dataValues={dataValues} />
-          <Axis id="horizontal" position={Position.Bottom} title="x-domain axis" />
-          <Axis id="left" title="y-domain axis left" position={Position.Left} />
-          <Axis id="right" title="y-domain axis right" position={Position.Right} />
+          <Settings showLegend showLegendExtra legendPosition={Position.Right} />
+          <Axis id="bottom" position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
+          <Axis id="left2" title="Left axis" position={Position.Left} tickFormat={(d) => Number(d).toFixed(2)} />
+
           <BarSeries
             id="bars"
-            groupId="group1"
-            xScaleType={ScaleType.Linear}
-            yScaleType={ScaleType.Linear}
-            xAccessor="x"
-            yAccessors={['y']}
-            data={[
-              { x: 0, y: 0 },
-              { x: 1, y: 5 },
-              { x: 3, y: 20 },
-            ]}
-          />
-          <BarSeries
-            id="bars1"
-            groupId="group2"
             xScaleType={ScaleType.Linear}
             yScaleType={ScaleType.Linear}
             xAccessor="x"
-            yAccessors={['y']}
-            data={[
-              { x: 0, y: 100 },
-              { x: 1, y: 50 },
-              { x: 3, y: 200 },
-            ]}
+            yAccessors={['y1', 'y2']}
+            splitSeriesAccessors={['g1', 'g2']}
+            data={TestDatasets.BARCHART_2Y2G}
+            hideInLegend={false}
           />
         </Chart>
       </div>

src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx

@@ -166,6 +166,7 @@ class XYChartComponent extends React.Component<XYChartProps> {
           width,
           height,
         }}
+        tabIndex={0}
       />
     );
   }

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

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Chart should render the legend name test 1`] = `"<div class=\\"echChart\\" style=\\"width: 100px; height: 100px;\\"><div class=\\"echChartBackground\\" style=\\"background-color: transparent;\\"></div><div class=\\"echChartStatus\\" data-ech-render-complete=\\"true\\" data-ech-render-count=\\"1\\"></div><div class=\\"echChartResizer\\"></div><div class=\\"echLegend echLegend--right echLegend--debug\\"><div style=\\"width: 50px; max-width: 50px; margin-left: 0px; margin-right: 0px;\\" class=\\"echLegendListContainer\\"><ul style=\\"padding-top: 10px; padding-bottom: 10px;\\" class=\\"echLegendList\\"><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"test\\"><div class=\\"echLegendItem__color\\" aria-label=\\"series color\\" title=\\"series color\\"><div><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"#1EA593\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div></div><div class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"test\\">test</div></li></ul></div></div><div class=\\"echContainer\\"><div class=\\"echChartPointerContainer\\" style=\\"cursor: default;\\"><div class=\\"echCrosshair\\"><div class=\\"echCrosshair__band\\" style=\\"top: -1px; left: -1px; width: 0px; height: 0px; background: rgb(245, 245, 245);\\"></div></div><canvas class=\\"echCanvasRenderer\\" width=\\"150\\" height=\\"200\\" style=\\"width: 150px; height: 200px;\\"></canvas><svg class=\\"echHighlighter\\"><defs><clipPath id=\\"echHighlighterClipPath__chart1\\"><rect x=\\"0\\" y=\\"0\\" width=\\"130\\" height=\\"180\\"></rect></clipPath></defs><g></g></svg></div></div></div>"`;
+exports[`Chart should render the legend name test 1`] = `"<div class=\\"echChart\\" style=\\"width: 100px; height: 100px;\\"><div class=\\"echChartBackground\\" style=\\"background-color: transparent;\\"></div><div class=\\"echChartStatus\\" data-ech-render-complete=\\"true\\" data-ech-render-count=\\"1\\"></div><div class=\\"echChartResizer\\"></div><div class=\\"echLegend echLegend--right echLegend--debug\\"><div style=\\"width: 50px; max-width: 50px; margin-left: 0px; margin-right: 0px;\\" class=\\"echLegendListContainer\\"><ul style=\\"padding-top: 10px; padding-bottom: 10px;\\" class=\\"echLegendList\\" role=\\"listbox\\"><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"test\\"><button type=\\"button\\" class=\\"echLegendItem__color\\" aria-label=\\"series color\\" title=\\"series color\\"><div><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"#1EA593\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"test \\" aria-label=\\"test \\">test</button></li></ul></div></div><div class=\\"echContainer\\"><div class=\\"echChartPointerContainer\\" style=\\"cursor: default;\\"><div class=\\"echCrosshair\\"><div class=\\"echCrosshair__band\\" style=\\"top: -1px; left: -1px; width: 0px; height: 0px; background: rgb(245, 245, 245);\\"></div></div><canvas class=\\"echCanvasRenderer\\" width=\\"150\\" height=\\"200\\" style=\\"width: 150px; height: 200px;\\" tabindex=\\"0\\"></canvas><svg class=\\"echHighlighter\\"><defs><clipPath id=\\"echHighlighterClipPath__chart1\\"><rect x=\\"0\\" y=\\"0\\" width=\\"130\\" height=\\"180\\"></rect></clipPath></defs><g></g></svg></div></div></div>"`;

src/components/legend/_legend.scss

@@ -7,7 +7,6 @@
       grid-row-gap: $echLegendRowGap;
       margin-top: $echLegendRowGap;
       margin-bottom: $echLegendRowGap;
-
       @include internetExplorerOnly {
         display: flex;
         flex-direction: row;
@@ -38,10 +37,17 @@
     position: relative;
   }
 
+  :focus {
+    box-shadow: inset 0 0 0 $euiSizeXS / 4 $euiFocusRingColor;
+  }
+
   .echLegendListContainer {
     @include euiYScrollWithShadows;
     width: 100%;
     overflow-y: auto;
-    overflow-x: hidden;
+  }
+
+  &:focus {
+    box-shadow: inset 0 0 0 $euiSizeXS / 4 $euiFocusRingColor;
   }
 }

src/components/legend/_legend_item.scss

@@ -8,6 +8,10 @@ $legendItemVerticalPadding: $echLegendRowGap / 2;
   align-items: center;
   width: 100%;
 
+  &:focus {
+    box-shadow: inset 0 0 0 $euiSizeXS / 4 $euiFocusRingColor;
+  }
+
   &:not(&--hidden) {
     .echLegendItem__color--changable {
       cursor: pointer;
@@ -49,6 +53,10 @@ $legendItemVerticalPadding: $echLegendRowGap / 2;
     @include euiFontSizeXS;
     @include euiTextTruncate;
     flex: 1 1 auto;
+    width: 100%;
+    text-align: left;
+    overflow-x: scroll;
+    overflow: hidden;
 
     &--clickable {
       &:hover {
@@ -61,9 +69,9 @@ $legendItemVerticalPadding: $echLegendRowGap / 2;
   &__extra {
     @include euiFontSizeXS;
     text-align: right;
-    flex: 0 0 auto;
     margin-left: $euiSizeXS;
     font-feature-settings: 'tnum';
+    flex: 0 0 auto;
 
     &--hidden {
       display: none;

src/components/legend/color.tsx

@@ -37,10 +37,10 @@ export const Color = memo(
   forwardRef<HTMLDivElement, ColorProps>(({ color, isSeriesHidden = false, hasColorPicker, onClick }, ref) => {
     if (isSeriesHidden) {
       return (
-        <div className="echLegendItem__color" aria-label="series hidden" title="series hidden">
+        <button type="button" className="echLegendItem__color" aria-label="series hidden" title="series hidden">
           {/* changing the default viewBox for the eyeClosed icon to keep the same dimensions */}
           <Icon type="eyeClosed" viewBox="-3 -3 22 22" />
-        </div>
+        </button>
       );
     }
 
@@ -49,16 +49,17 @@ export const Color = memo(
     });
 
     return (
-      <div
+      <button
+        type="button"
         onClick={hasColorPicker ? onClick : undefined}
         className={colorClasses}
-        aria-label="series color"
+        aria-label={hasColorPicker ? 'change series color' : 'series color'}
         title={hasColorPicker ? 'change series color' : 'series color'}
       >
         <div ref={ref}>
           <Icon type="dot" color={color} />
         </div>
-      </div>
+      </button>
     );
   }),
 );

src/components/legend/extra.tsx

@@ -30,7 +30,7 @@ export function renderExtra(extra: string | number, isSeriesHidden?: boolean) {
     'echLegendItem__extra--hidden': isSeriesHidden,
   });
   return (
-    <div className={extraClassNames} title={`${extra}`}>
+    <div className={extraClassNames} title={`${extra}`} aria-label={`${extra}`}>
       {extra}
     </div>
   );

src/components/legend/label.tsx

@@ -22,19 +22,37 @@ import React, { MouseEventHandler } from 'react';
 
 interface LabelProps {
   label: string;
+  extra: string | number | undefined;
   onClick?: MouseEventHandler;
 }
 /**
  * Label component used to display text in legend item
  * @internal
  */
-export function Label({ label, onClick }: LabelProps) {
+export function Label({ label, extra, onClick }: LabelProps) {
   const labelClassNames = classNames('echLegendItem__label', {
     'echLegendItem__label--clickable': Boolean(onClick),
   });
+  const labelWithExtra = getExtra(label, extra);
   return (
-    <div className={labelClassNames} title={label} onClick={onClick}>
+    <button
+      type="button"
+      className={labelClassNames}
+      title={labelWithExtra}
+      onClick={onClick}
+      aria-label={labelWithExtra}
+    >
       {label}
-    </div>
+    </button>
   );
 }
+
+/**
+ * @internal
+ */
+function getExtra(label: string, extra: string | number | undefined) {
+  if (extra !== undefined) {
+    return `${label} ${extra}`;
+  }
+  return `${label}`;
+}

src/components/legend/legend.tsx

@@ -107,7 +107,7 @@ function LegendComponent(props: LegendStateProps & LegendDispatchProps) {
   return (
     <div className={legendClasses}>
       <div style={legendContainerStyle} className="echLegendListContainer">
-        <ul style={legendListStyle} className="echLegendList">
+        <ul style={legendListStyle} className="echLegendList" role="listbox">
           {items.map((item, index) => renderLegendItem(item, itemProps, items.length, index))}
         </ul>
       </div>

src/components/legend/legend_item.tsx

@@ -230,7 +230,7 @@ export class LegendListItem extends Component<LegendItemProps, LegendItemState>
             hasColorPicker={hasColorPicker}
             onClick={this.handleColorClick(hasColorPicker)}
           />
-          <ItemLabel label={label} onClick={this.handleLabelClick(seriesIdentifier)} />
+          <ItemLabel label={label} onClick={this.handleLabelClick(seriesIdentifier)} extra={extra} />
           {showExtra && extra != null && renderExtra(extra, isSeriesHidden)}
           {Action && (
             <div className="echLegendItem__action">

stories/legend/11_legend_actions.tsx

@@ -101,7 +101,8 @@ const getAction = (hideActions: boolean, anchorPosition: PopoverAnchorPosition):
   ];
 
   const Button = (
-    <div
+    <button
+      type="button"
       style={{
         display: 'flex',
         justifyContent: 'center',
@@ -113,7 +114,7 @@ const getAction = (hideActions: boolean, anchorPosition: PopoverAnchorPosition):
       onClick={() => setPopoverOpen(!popoverOpen)}
     >
       <EuiIcon size="s" type="pencil" />
-    </div>
+    </button>
   );
 
   return (