fix legend focus in ff

Author: pan-kot

src/core/components/core-application.tsx

@@ -1,9 +1,12 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
+import clsx from "clsx";
+
 import { useSelector } from "../../internal/utils/async-store";
 import { ChartAPI } from "../chart-api";
 
+import styles from "../styles.css.js";
 import testClasses from "../test-classes/styles.css.js";
 
 // An invisible component rendered before chart plot to capture focus for custom keyboard navigation.
@@ -26,7 +29,7 @@ export function ChartApplication({
         tabIndex={0}
         role="application"
         aria-label={ariaLabel}
-        className={testClasses.application}
+        className={clsx(testClasses.application, styles.application)}
       />
     </div>
   ) : null;

src/core/styles.scss

@@ -112,3 +112,8 @@ $side-legend-min-inline-size: max(20%, 150px);
   max-inline-size: $side-legend-max-inline-size;
   min-inline-size: $side-legend-min-inline-size;
 }
+
+.application {
+  // We hide the native focus outline to render a custom one around the chart plot instead.
+  outline: none;
+}

src/internal/components/chart-legend/index.tsx

@@ -252,6 +252,9 @@ export const ChartLegend = ({
         )}
 
         <div
+          // The list element is not focusable. However, the focus lands on it regardless, when testing in Firefox.
+          // Setting the tab index to -1 does fix the problem.
+          tabIndex={-1}
           className={clsx(styles.list, {
             [styles["list-bottom"]]: position === "bottom",
             [styles["list-side"]]: position === "side",