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/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\\"><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"test\\"><div class=\\"echLegendItem__color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"#1EA593\\" focusable=\\"false\\" aria-label=\\"series color: #1EA593\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"test\\" aria-label=\\"test; Activate to hide series in graph\\">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;\\"></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

@@ -2,12 +2,11 @@
   &--top,
   &--bottom {
     .echLegendList {
-      display: grid;
+      display: flex;
       grid-column-gap: $echLegendColumnGap;
       grid-row-gap: $echLegendRowGap;
       margin-top: $echLegendRowGap;
       margin-bottom: $echLegendRowGap;
-
       @include internetExplorerOnly {
         display: flex;
         flex-direction: row;
@@ -20,6 +19,7 @@
   &--right {
     .echLegendList {
       flex-direction: column;
+      width: 100%;
     }
   }
 
@@ -42,6 +42,12 @@
     @include euiYScrollWithShadows;
     width: 100%;
     overflow-y: auto;
-    overflow-x: hidden;
+
+    :focus {
+      @include euiFocusRing;
+      background-color: $euiFocusBackgroundColor;
+      border-radius: $euiBorderRadius / 2;
+      margin-right: $euiSizeXS;
+    }
   }
 }

src/components/legend/_legend_item.scss

@@ -31,6 +31,7 @@ $legendItemVerticalPadding: $echLegendRowGap / 2;
 
   &__color {
     margin-right: $euiSizeXS;
+    margin-left: $euiSizeXS;
 
     .euiPopover {
       vertical-align: inherit; // prevents color dot from shifting
@@ -49,6 +50,9 @@ $legendItemVerticalPadding: $echLegendRowGap / 2;
     @include euiFontSizeXS;
     @include euiTextTruncate;
     flex: 1 1 auto;
+    text-align: left;
+    overflow-x: scroll;
+    overflow: hidden;
 
     &--clickable {
       &:hover {
@@ -61,9 +65,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

@@ -17,7 +17,6 @@
  * under the License.
  */
 
-import classNames from 'classnames';
 import React, { MouseEventHandler, forwardRef, memo } from 'react';
 
 import { Icon } from '../icons/icon';
@@ -34,30 +33,33 @@ interface ColorProps {
  * @internal
  */
 export const Color = memo(
-  forwardRef<HTMLDivElement, ColorProps>(({ color, isSeriesHidden = false, hasColorPicker, onClick }, ref) => {
+  forwardRef<HTMLButtonElement, ColorProps>(({ color, isSeriesHidden = false, hasColorPicker, onClick }, ref) => {
     if (isSeriesHidden) {
       return (
-        <div className="echLegendItem__color" aria-label="series hidden" title="series hidden">
+        <div className="echLegendItem__color" title="series hidden">
           {/* changing the default viewBox for the eyeClosed icon to keep the same dimensions */}
-          <Icon type="eyeClosed" viewBox="-3 -3 22 22" />
+          <Icon type="eyeClosed" viewBox="-3 -3 22 22" aria-label="series color is hidden" />
         </div>
       );
     }
 
-    const colorClasses = classNames('echLegendItem__color', {
-      'echLegendItem__color--changable': hasColorPicker,
-    });
+    if (hasColorPicker) {
+      return (
+        <button
+          type="button"
+          onClick={onClick}
+          className="echLegendItem__color echLegendItem__color--changable"
+          title="change series color"
+          ref={ref}
+        >
+          <Icon type="dot" color={color} aria-label="change series color" />
+        </button>
+      );
+    }
 
     return (
-      <div
-        onClick={hasColorPicker ? onClick : undefined}
-        className={colorClasses}
-        aria-label="series color"
-        title={hasColorPicker ? 'change series color' : 'series color'}
-      >
-        <div ref={ref}>
-          <Icon type="dot" color={color} />
-        </div>
+      <div className="echLegendItem__color" title="series color">
+        <Icon type="dot" color={color} aria-label={`series color: ${color}`} />
       </div>
     );
   }),

src/components/legend/label.tsx

@@ -22,19 +22,28 @@ import React, { MouseEventHandler } from 'react';
 
 interface LabelProps {
   label: string;
+  isSeriesHidden?: boolean;
   onClick?: MouseEventHandler;
 }
 /**
  * Label component used to display text in legend item
  * @internal
  */
-export function Label({ label, onClick }: LabelProps) {
+export function Label({ label, onClick, isSeriesHidden }: LabelProps) {
   const labelClassNames = classNames('echLegendItem__label', {
     'echLegendItem__label--clickable': Boolean(onClick),
   });
   return (
-    <div className={labelClassNames} title={label} onClick={onClick}>
+    <button
+      type="button"
+      className={labelClassNames}
+      title={label}
+      onClick={onClick}
+      aria-label={
+        isSeriesHidden ? `${label}; Activate to show series in graph` : `${label}; Activate to hide series in graph`
+      }
+    >
       {label}
-    </div>
+    </button>
   );
 }

src/components/legend/legend_item.tsx

@@ -112,7 +112,7 @@ export class LegendListItem extends Component<LegendItemProps, LegendItemState>
   static displayName = 'LegendItem';
   shouldClearPersistedColor = false;
 
-  colorRef = createRef<HTMLDivElement>();
+  colorRef = createRef<HTMLButtonElement>();
   state: LegendItemState = {
     isOpen: false,
     actionActive: false,
@@ -235,7 +235,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)} isSeriesHidden={isSeriesHidden} />
           {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 (
@@ -125,6 +126,7 @@ const getAction = (hideActions: boolean, anchorPosition: PopoverAnchorPosition):
       panelPaddingSize="none"
       withTitle
       anchorPosition={anchorPosition}
+      ownFocus
     >
       <EuiContextMenu initialPanelId={0} panels={getPanels(series as XYChartSeriesIdentifier)} />
     </EuiPopover>
@@ -137,7 +139,7 @@ const renderColorPicker = (anchorPosition: PopoverAnchorPosition): LegendColorPi
   onClose,
   onChange,
 }) => (
-  <EuiWrappingPopover isOpen button={anchor} closePopover={onClose} anchorPosition={anchorPosition}>
+  <EuiWrappingPopover isOpen button={anchor} closePopover={onClose} anchorPosition={anchorPosition} ownFocus>
     <EuiColorPicker display="inline" color={color} onChange={onChange} />
     <EuiSpacer size="m" />
     <EuiButton fullWidth size="s" onClick={onClose}>

stories/legend/9_color_picker.tsx

@@ -46,7 +46,7 @@ export const Example = () => {
       onChangeAction(c);
     };
     return (
-      <EuiWrappingPopover isOpen button={anchor} closePopover={handleClose} anchorPosition="leftCenter">
+      <EuiWrappingPopover isOpen button={anchor} closePopover={handleClose} anchorPosition="leftCenter" ownFocus>
         <EuiColorPicker display="inline" color={color} onChange={handleChange} />
         <EuiSpacer size="m" />
         <EuiFlexItem grow={false}>