[terra-avatar] Changed fallback to initials from user icon for avatar #2621
Conversation
packages/terra-avatar/CHANGELOG.md
Outdated
| @@ -3,6 +3,8 @@ ChangeLog | |||
|
|
|||
| Unreleased | |||
| ---------- | |||
| ### Changed | |||
| * Changed generateImage function to Fallback to Initials if Provided. | |||
There was a problem hiding this comment.
Maybe saying 'Changed the load behavior such that if the image fails to load and initials are provided, the avatar falls back to the initials display.' is more clear to a consumer.
| avatarContent = generateImage(image, alt, isAriaHidden, AVATAR_VARIANTS.USER, this.handleFallback); | ||
| } else if (initials && (initials.length === 1 || initials.length === 2)) { | ||
| avatarContent = generateImage(image, alt, isAriaHidden, AVATAR_VARIANTS.USER, this.handleFallback, initials); | ||
| } else if (initials && initials.length <= 2) { |
There was a problem hiding this comment.
Just curious, could these redundant checks be probably avoided if the default value of initials is set to an empty string instead of undefined and if the length of the initials prop is custom-validated during datatype validation?
There was a problem hiding this comment.
Redundant checks have been removed and validating this only at generateImagePlaceholder function : here
|
I think that the docs need to be updated. For instance, [1] https://github.com/cerner/terra-core/blob/master/packages/terra-avatar/docs/avatar.md |
|
During functional verification the initials fallback is working fine, but on JAWS on Chrome and on VO in iOS, the screen reader reads initials only and not the name, which should be available to the screen reader. VO on Safari desktop reads the avatar name correctly. |
Updated Doc files |
| const generateImage = (image, alt, isAriaHidden, variant, handleFallback) => { | ||
| const icon = generateImagePlaceholder(alt, isAriaHidden, variant); | ||
| return <TerraImage className={cx('image')} src={image} placeholder={icon} alt={alt} onError={handleFallback} fit="cover" />; | ||
| const generateImage = (avatarParams) => { |
|
Functional verification completed. The avatar fallback is working as designed. Confirmed that using the VO commands: control + option + R/L arrow, will enable VoiceOver on desktop Safari to read out the name of the avatar image. Some accessibility issues remain, however. VoiceOver on iOS navigation still skips over the avatar. Also, we need to determine user expectations regarding when the VO commands are needed. Most page elements are accessible by using the arrow keys only. These accessibility issues will be addressed separately. |
Co-Authored-By: Matt Henkes <mjhenkes@gmail.com>
There was a problem hiding this comment.
Tested: PR #2621
Resolves: Issue #2559
Reviewed:
- Follows pattern considerations documented in the current Cerner Design Standards: Avatar - User Experience - Cerner Wiki
- Follows UX defined design implementation for Avatar - Implementation Wireframe
- Follows defined theme designs: terra-theme
Verified by @jeremyfuksa, Marking as Verified, Ready for Release.
| Pass |
|---|
| UX Review |
# Conflicts: # packages/terra-avatar/docs/avatar.md # packages/terra-avatar/tests/jest/__snapshots__/Avatar.test.jsx.snap
Summary
Resolves #2559
Additional Details
generateImage has been modified to fallback to initials when provided for invalid image.
Deployment Links
https://terra-core-deployed-pr-2621.herokuapp.com/components/terra-avatar/avatar/avatar
https://terra-core-deployed-pr-2621.herokuapp.com/raw/tests/terra-avatar/avatar/avatar/invalid-image-avatar-with-initials