fix(legend): disable focus and keyboard navigation for legend in part…

…ition ch… (opensearch-project#952)
AMoo-Miki · Dec 16, 2020 · dfff3e2 · dfff3e2
1 parent ad59794
commit dfff3e2
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/...l-stories-sunburst-sunburst-with-three-layers-visually-looks-correct-1-snap.png b/...l-stories-sunburst-sunburst-with-three-layers-visually-looks-correct-1-snap.png
diff --git a/packages/osd-charts/src/components/legend/label.tsx b/packages/osd-charts/src/components/legend/label.tsx
@@ -23,17 +23,19 @@ import React, { MouseEventHandler } from 'react';
 interface LabelProps {
   label: string;
   isSeriesHidden?: boolean;
+  isToggleable?: boolean;
   onClick?: MouseEventHandler;
 }
 /**
  * Label component used to display text in legend item
  * @internal
  */
-export function Label({ label, onClick, isSeriesHidden }: LabelProps) {
+export function Label({ label, isToggleable, onClick, isSeriesHidden }: LabelProps) {
   const labelClassNames = classNames('echLegendItem__label', {
     'echLegendItem__label--clickable': Boolean(onClick),
   });
-  return (
+
+  return isToggleable ? (
     <button
       type="button"
       className={labelClassNames}
@@ -45,5 +47,9 @@ export function Label({ label, onClick, isSeriesHidden }: LabelProps) {
     >
       {label}
     </button>
+  ) : (
+    <div className={labelClassNames} title={label} onClick={onClick}>
+      {label}
+    </div>
   );
 }
diff --git a/packages/osd-charts/src/components/legend/legend_item.tsx b/packages/osd-charts/src/components/legend/legend_item.tsx
@@ -236,7 +236,12 @@ export class LegendListItem extends Component<LegendItemProps, LegendItemState>
             hasColorPicker={hasColorPicker}
             onClick={this.handleColorClick(hasColorPicker)}
           />
-          <ItemLabel label={label} onClick={this.handleLabelClick(seriesIdentifier)} isSeriesHidden={isSeriesHidden} />
+          <ItemLabel
+            label={label}
+            isToggleable={item.isToggleable}
+            onClick={this.handleLabelClick(seriesIdentifier)}
+            isSeriesHidden={isSeriesHidden}
+          />
           {showExtra && extra && renderExtra(extra, isSeriesHidden)}
           {Action && (
             <div className="echLegendItem__action">