Avatar: add alt and src (#1416)

* add alt and src + update tests

* Improve copy for alt text

Co-authored-by: Cole Bemis <colebemis@github.com>

Co-authored-by: Siddharth Kshetrapal <sid@Siddharths-MacBook-Pro.local>
Co-authored-by: Cole Bemis <colebemis@github.com>

Author: 3 people

src/Avatar.tsx

@@ -8,6 +8,10 @@ type StyledAvatarProps = {
   size?: number
   /** Sets the shape of the avatar to a square if true. If false, the avatar will be circular. */
   square?: boolean
+  /** URL of the avatar image. */
+  src: string
+  /** Provide alt text when the Avatar is used without the user's name next to it. */
+  alt?: string
 } & SystemCommonProps &
   SxProp
 

src/__tests__/Avatar.tsx

@@ -16,21 +16,21 @@ describe('Avatar', () => {
   })
 
   it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Avatar />)
+    const {container} = HTMLRender(<Avatar src="primer.png" />)
     const results = await axe(container)
     expect(results).toHaveNoViolations()
     cleanup()
   })
 
   it('renders small by default', () => {
     const size = 20
-    const result = render(<Avatar alt="" />)
+    const result = render(<Avatar src="primer.png" />)
     expect(result.props.width).toEqual(size)
     expect(result.props.height).toEqual(size)
   })
 
   it('respects the size prop', () => {
-    const result = render(<Avatar size={40} alt="github" />)
+    const result = render(<Avatar size={40} src="primer.png" alt="github" />)
     expect(result.props.width).toEqual(40)
     expect(result.props.height).toEqual(40)
   })
@@ -40,6 +40,6 @@ describe('Avatar', () => {
   })
 
   it('respects margin props', () => {
-    expect(render(<Avatar m={2} alt="" />)).toHaveStyleRule('margin', px(theme.space[2]))
+    expect(render(<Avatar m={2} src="primer.png" alt="" />)).toHaveStyleRule('margin', px(theme.space[2]))
   })
 })