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

Closes: INSTUI-4259
instructure · Nov 29, 2024 · 610c0d8 · 610c0d8
1 parent c871244
commit 610c0d8
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/packages/ui-color-picker/src/ColorPicker/index.tsx b/packages/ui-color-picker/src/ColorPicker/index.tsx
@@ -26,7 +26,7 @@
 /** @jsxFrag React.Fragment */
 import React, { Component } from 'react'
 
-import { withStyle, jsx } from '@instructure/emotion'
+import { withStyle, jsx, InstUISettingsProvider } from '@instructure/emotion'
 import { warn, error } from '@instructure/console'
 import { omitProps } from '@instructure/ui-react-utils'
 import { testable } from '@instructure/ui-testable'
@@ -389,9 +389,19 @@ class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
       <span>
         <span css={styles?.label}>{label}</span>
         <span>
-          <Tooltip renderTip={tooltip}>
-            <IconInfoLine tabIndex={-1} />
-          </Tooltip>
+          <InstUISettingsProvider
+            theme={{
+              componentOverrides: {
+                BaseButton: {
+                  smallHeight: 'auto'
+                }
+              }
+            }}
+          >
+            <Tooltip renderTip={<span aria-hidden={true}>{tooltip}</span>}>
+              <IconButton withBackground={false} withBorder={false} screenReaderLabel={tooltip} size="small" shape="circle" width="auto" renderIcon={IconInfoLine}/>
+            </Tooltip>
+          </InstUISettingsProvider>
         </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