Skip to content

Commit 610c0d8

Browse files
committed
fix(ui-color-picker): make ColorPicker tooltip VoiceOver focusable
Closes: INSTUI-4259
1 parent c871244 commit 610c0d8

File tree

2 files changed

+17
-8
lines changed

2 files changed

+17
-8
lines changed

packages/ui-color-picker/src/ColorPicker/index.tsx

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
/** @jsxFrag React.Fragment */
2727
import React, { Component } from 'react'
2828

29-
import { withStyle, jsx } from '@instructure/emotion'
29+
import { withStyle, jsx, InstUISettingsProvider } from '@instructure/emotion'
3030
import { warn, error } from '@instructure/console'
3131
import { omitProps } from '@instructure/ui-react-utils'
3232
import { testable } from '@instructure/ui-testable'
@@ -389,9 +389,19 @@ class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
389389
<span>
390390
<span css={styles?.label}>{label}</span>
391391
<span>
392-
<Tooltip renderTip={tooltip}>
393-
<IconInfoLine tabIndex={-1} />
394-
</Tooltip>
392+
<InstUISettingsProvider
393+
theme={{
394+
componentOverrides: {
395+
BaseButton: {
396+
smallHeight: 'auto'
397+
}
398+
}
399+
}}
400+
>
401+
<Tooltip renderTip={<span aria-hidden={true}>{tooltip}</span>}>
402+
<IconButton withBackground={false} withBorder={false} screenReaderLabel={tooltip} size="small" shape="circle" width="auto" renderIcon={IconInfoLine}/>
403+
</Tooltip>
404+
</InstUISettingsProvider>
395405
</span>
396406
</span>
397407
) : (

packages/ui-svg-images/src/InlineSVG/index.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -116,14 +116,14 @@ class InlineSVG extends Component<InlineSVGProps> {
116116
}
117117

118118
get labelledBy() {
119-
const ids = []
119+
const ids: string[] = []
120120

121121
if (this.props.title) {
122-
ids.push(this.titleId)
122+
ids.push(this.titleId as string)
123123
}
124124

125125
if (this.props.description) {
126-
ids.push(this.descId)
126+
ids.push(this.descId as string)
127127
}
128128

129129
return ids.length > 0 ? ids.join(' ') : undefined
@@ -150,7 +150,6 @@ class InlineSVG extends Component<InlineSVGProps> {
150150
title,
151151
description,
152152
focusable,
153-
children,
154153
src,
155154
styles,
156155
...props

0 commit comments

Comments
 (0)