Skip to content

Commit

Permalink
fix(Message): Switch to alt='' for avatars
Browse files Browse the repository at this point in the history
Eric notes that these avatars would be noise if the chat goes on a long time. This is a more decorative element. With this change, screenreaders won't mention the avatars.
  • Loading branch information
rebeccaalpert committed Oct 14, 2024
1 parent a0c2270 commit 251ae95
Showing 1 changed file with 2 additions and 4 deletions.
6 changes: 2 additions & 4 deletions packages/module/src/Message/Message.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,6 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
name?: string;
/** Avatar src for the user */
avatar?: string;
/** Alt text placed on the avatar */
avatarAltText?: string;
/** Timestamp for the message */
timestamp?: string;
/** Set this to true if message is being loaded */
Expand Down Expand Up @@ -63,7 +61,6 @@ export const Message: React.FunctionComponent<MessageProps> = ({
onAttachmentClose,
actions,
sources,
avatarAltText,
...props
}: MessageProps) => {
// Configure default values
Expand All @@ -86,7 +83,8 @@ export const Message: React.FunctionComponent<MessageProps> = ({

return (
<div className={`pf-chatbot__message pf-chatbot__message--${role}`} {...props}>
<Avatar src={avatar ?? DEFAULTS[role].avatar} alt={avatarAltText || `Profile picture of ${role}`} />
{/* We are using an empty alt tag intentionally in order to reduce noise on screen readers */}
<Avatar src={avatar ?? DEFAULTS[role].avatar} alt="" />
<div className="pf-chatbot__message-contents">
<div className="pf-chatbot__message-meta">
<span className="pf-chatbot__message-name">{name}</span>
Expand Down

0 comments on commit 251ae95

Please sign in to comment.