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>

app/jsx/account_settings/PronounsInput.js

@@ -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'}}>
+            <Tooltip tip={infoToolTip} on={['hover', 'focus']} variant="inverse">
-              <IconInfoLine />
+              <span
-            </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"

app/jsx/account_settings/__tests__/pronoun_input.test.js

@@ -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()