New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(avatar): add label prop for alternative text & aria-label #6910
feat(avatar): add label prop for alternative text & aria-label #6910
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for taking a look so fast! 🐎 A few recommendations below for support of aria-label
and doc considerations.
src/components/avatar/avatar.tsx
Outdated
@@ -77,7 +80,7 @@ export class Avatar { | |||
const initials = this.generateInitials(); | |||
const backgroundColor = this.generateFillColor(); | |||
return ( | |||
<span class="background" style={{ backgroundColor }}> | |||
<span aria-label={this.label || this.fullName} class="background" style={{ backgroundColor }}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
To ensure the aria-label
is supported, we'll need to add a role to the span
element. It seems like the figure role is the best fit.
src/components/avatar/avatar.tsx
Outdated
@@ -39,6 +39,9 @@ export class Avatar { | |||
/** Specifies the unique id of the user. */ | |||
@Prop({ reflect: true }) userId: string; | |||
|
|||
/** When `thumbnail` is defined, specifies alternate text for the image. Otherwise specifies accessible label for the component.*/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since this could also apply to a non-image, how about the following?:
Accessible name for the component. Specifies alternative text when
thumbnail
is defined, otherwise specifies an accessible label.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For line 33, can it reflect the support for non-images?
Specifies the full name of the user. When
label
andthumbnail
are not defined, specifies the accessible name for the component.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🏆 Sounds great in JAWS 🦈 and NVDA 🟣
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀
👀🖥👀👀👀🖥👀🖥🖥🖥👀👀🖥🖥🖥👀🖥🖥🖥🖥👀🖥👀
👀🖥🖥👀👀🖥👀👀🖥👀👀🖥👀👀👀👀🖥👀👀👀👀🖥👀
👀🖥👀🖥👀🖥👀👀🖥👀👀🖥👀👀👀👀🖥🖥🖥👀👀🖥👀
👀🖥👀👀🖥🖥👀👀🖥👀👀🖥👀👀👀👀🖥👀👀👀👀👀👀
👀🖥👀👀👀🖥👀🖥🖥🖥👀👀🖥🖥🖥👀🖥🖥🖥🖥👀🖥👀
👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀
Related Issue: #5564
Summary
This PR will add a
label
property incalcite-avatar
which is used to provide context for Assistive Technology users.