add tooltip to PronounsInput
flag=none fixes VICE-771 test plan: - visit /accounts/self/settings - scroll down and enable personal pronouns - hover over info icon - verify tooltip shows 'These pronouns will be available to Canvas users in your account to choose from.' Change-Id: Ie46b06eb306930161eec8fab5cec57c1b7c7137a Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/249634 Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com> Reviewed-by: Davis Hyer <dhyer@instructure.com> QA-Review: Davis Hyer <dhyer@instructure.com> Product-Review: Davis Hyer <dhyer@instructure.com>
This commit is contained in:
parent
2a9a7a0ac4
commit
723ec9c6bf
|
@ -22,6 +22,8 @@ import {Text} from '@instructure/ui-text'
|
|||
import {TextInput} from '@instructure/ui-text-input'
|
||||
import {nanoid} from 'nanoid'
|
||||
import {IconInfoLine} from '@instructure/ui-icons'
|
||||
import {ScreenReaderContent} from '@instructure/ui-a11y'
|
||||
import {Tooltip} from '@instructure/ui-tooltip'
|
||||
import I18n from 'i18n!PronounsInput'
|
||||
|
||||
export default class PronounsInput extends React.Component {
|
||||
|
@ -65,6 +67,9 @@ export default class PronounsInput extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
const infoToolTip = I18n.t(
|
||||
'These pronouns will be available to Canvas users in your account to choose from.'
|
||||
)
|
||||
return (
|
||||
<TextInput
|
||||
id={`${this.state.input_id}`}
|
||||
|
@ -86,9 +91,16 @@ export default class PronounsInput extends React.Component {
|
|||
label={
|
||||
<>
|
||||
<Text>{I18n.t('Available Pronouns')}</Text>
|
||||
<span style={{margin: '0 10px 0 10px'}}>
|
||||
<IconInfoLine />
|
||||
</span>
|
||||
<Tooltip tip={infoToolTip} on={['hover', 'focus']} variant="inverse">
|
||||
<span
|
||||
style={{margin: '0 10px 0 10px'}}
|
||||
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
||||
tabIndex="0"
|
||||
>
|
||||
<IconInfoLine data-testid="pronoun_info" />
|
||||
<ScreenReaderContent>{infoToolTip}</ScreenReaderContent>
|
||||
</span>
|
||||
</Tooltip>
|
||||
</>
|
||||
}
|
||||
size="medium"
|
||||
|
|
|
@ -25,6 +25,17 @@ describe('render available pronouns input', () => {
|
|||
ENV.PRONOUNS_LIST = ['She/Her', 'He/Him', 'They/Them']
|
||||
})
|
||||
|
||||
it('renders tooltip when focused', () => {
|
||||
const {getAllByText, getByTestId} = render(<PronounInput />)
|
||||
const icon = getByTestId('pronoun_info')
|
||||
fireEvent.focus(icon)
|
||||
expect(
|
||||
getAllByText(
|
||||
'These pronouns will be available to Canvas users in your account to choose from.'
|
||||
)[0]
|
||||
).toBeVisible()
|
||||
})
|
||||
|
||||
it('with defaults in view', () => {
|
||||
const {getByText} = render(<PronounInput />)
|
||||
expect(getByText('She/Her')).toBeVisible()
|
||||
|
|
Loading…
Reference in New Issue