From 7ddbc9f349a43fd139366d4106334d17a2625ab0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20S=C3=A1ros?= <balazs.saros@instructure.com>
Date: Wed, 13 Nov 2024 16:27:32 +0100
Subject: [PATCH] fix(ui-color-picker): make ColorPicker tooltip VoiceOver
 focusable

Closes: INSTUI-4259
---
 packages/ui-color-picker/src/ColorPicker/index.tsx | 2 +-
 packages/ui-svg-images/src/InlineSVG/index.tsx     | 7 +++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/ui-color-picker/src/ColorPicker/index.tsx b/packages/ui-color-picker/src/ColorPicker/index.tsx
index 7bcdba22ea..4fa4e24198 100644
--- a/packages/ui-color-picker/src/ColorPicker/index.tsx
+++ b/packages/ui-color-picker/src/ColorPicker/index.tsx
@@ -390,7 +390,7 @@ class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
         <span css={styles?.label}>{label}</span>
         <span>
           <Tooltip renderTip={tooltip}>
-            <IconInfoLine tabIndex={-1} />
+            <IconInfoLine tabIndex={0} />
           </Tooltip>
         </span>
       </span>
diff --git a/packages/ui-svg-images/src/InlineSVG/index.tsx b/packages/ui-svg-images/src/InlineSVG/index.tsx
index c889436ee9..0014a74f18 100644
--- a/packages/ui-svg-images/src/InlineSVG/index.tsx
+++ b/packages/ui-svg-images/src/InlineSVG/index.tsx
@@ -116,14 +116,14 @@ class InlineSVG extends Component<InlineSVGProps> {
   }
 
   get labelledBy() {
-    const ids = []
+    const ids: string[] = []
 
     if (this.props.title) {
-      ids.push(this.titleId)
+      ids.push(this.titleId as string)
     }
 
     if (this.props.description) {
-      ids.push(this.descId)
+      ids.push(this.descId as string)
     }
 
     return ids.length > 0 ? ids.join(' ') : undefined
@@ -150,7 +150,6 @@ class InlineSVG extends Component<InlineSVGProps> {
       title,
       description,
       focusable,
-      children,
       src,
       styles,
       ...props