fix(chart): allow all items to show focused style…

…when they are tabbed into using the keyboard.
This will also reduce the repetitive code, in the
compiled styles.

src/components/chart/chart.scss

@@ -82,8 +82,10 @@ table {
 }
 
 .item {
+    @include mixins.visualize-keyboard-focus;
     transition:
         background-color 0.2s ease,
+        box-shadow 0.2s ease,
         filter 0.2s ease,
         opacity 0.4s ease;
     cursor: help;

src/components/chart/partial-styles/_layout-for-charts-with-x-y-axises.scss

@@ -8,7 +8,6 @@
     }
 
     .item {
-        @include mixins.visualize-keyboard-focus;
         position: relative;
         mix-blend-mode: hard-light;
     }

src/components/chart/partial-styles/_nps.scss

@@ -72,7 +72,6 @@
                 var(--limel-chart-nps-gauge-angel)
         );
 
-        @include mixins.visualize-keyboard-focus;
         display: flex;
         align-items: flex-start;
         justify-content: center;

src/components/chart/partial-styles/_ring.scss

@@ -39,8 +39,6 @@
     }
 
     .item {
-        @include mixins.visualize-keyboard-focus;
-
         background: conic-gradient(
             var(--limel-chart-item-color, $default-item-color) 0
                 calc(

src/components/chart/partial-styles/_stacked-bar.scss

@@ -12,12 +12,11 @@
     }
 
     .item {
-        @include mixins.visualize-keyboard-focus;
         display: flex;
         border-radius: var(--chart-item-border-radius, 0);
         background: var(--limel-chart-item-color, $default-item-color);
 
-        &:last-of-type {
+        &:last-of-type:not(:focus-visible) {
             box-shadow: none !important;
         }
     }
@@ -31,8 +30,12 @@
     .item {
         min-height: 0.5rem;
         width: calc(var(--limel-chart-item-size) * 1%);
-        box-shadow: -1px 0 0 0
-            var(--chart-item-divider-color, rgb(var(--color-white), 0.6)) inset;
+
+        &:not(:focus-visible) {
+            box-shadow: -1px 0 0 0
+                var(--chart-item-divider-color, rgb(var(--color-white), 0.6))
+                inset;
+        }
     }
 }
 
@@ -44,6 +47,9 @@
     .item {
         min-width: 0.5rem;
         height: calc(var(--limel-chart-item-size) * 1%);
-        box-shadow: 0 -1px 0 0 rgb(var(--color-white), 0.6) inset;
+
+        &:not(:focus-visible) {
+            box-shadow: 0 -1px 0 0 rgb(var(--color-white), 0.6) inset;
+        }
     }
 }