fix(ui-color-picker): make ColorPicker tooltip VoiceOver focusable

Closes: INSTUI-4259
instructure · Nov 22, 2024 · 7ddbc9f · 7ddbc9f
1 parent 1209b0d
commit 7ddbc9f
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 5 deletions.
diff --git 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
@@ -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