feat(legend): add keyboard navigation

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

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

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,32 +33,34 @@ 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 (
-        <button type="button" 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" />
-        </button>
+          <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--changable"
+          title="change series color"
+          ref={ref}
+        >
+          <Icon type="dot" color={color} aria-label="change series color" />
+        </button>
+      );
+    }
 
     return (
-      <button
-        type="button"
-        onClick={hasColorPicker ? onClick : undefined}
-        className={colorClasses}
-        aria-label={hasColorPicker ? 'change series color' : 'series color'}
-        title={hasColorPicker ? 'change series color' : 'series color'}
-      >
-        <div ref={ref}>
-          <Icon type="dot" color={color} />
-        </div>
-      </button>
+      <div className="echLegendItem__color" title="series color">
+        <Icon type="dot" color={color} aria-label={hasColorPicker ? 'change series color' : 'series color'} />
+      </div>
     );
   }),
 );

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}`} aria-label={`${extra}`}>
+    <div className={extraClassNames} title={`${extra}`}>
       {extra}
     </div>
   );

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" role="listbox">
+        <ul style={legendListStyle} className="echLegendList">
           {items.map((item, index) => renderLegendItem(item, itemProps, items.length, index))}
         </ul>
       </div>

src/components/legend/legend_item.tsx

@@ -111,7 +111,7 @@ interface LegendItemState {
 export class LegendListItem extends Component<LegendItemProps, LegendItemState> {
   static displayName = 'LegendItem';
 
-  colorRef = createRef<HTMLDivElement>();
+  colorRef = createRef<HTMLButtonElement>();
   state: LegendItemState = {
     isOpen: false,
     actionActive: false,

stories/legend/11_legend_actions.tsx

@@ -126,6 +126,7 @@ const getAction = (hideActions: boolean, anchorPosition: PopoverAnchorPosition):
       panelPaddingSize="none"
       withTitle
       anchorPosition={anchorPosition}
+      ownFocus
     >
       <EuiContextMenu initialPanelId={0} panels={getPanels(series as XYChartSeriesIdentifier)} />
     </EuiPopover>