OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Improve profile picture settings accessibility (#10470)

pull/28217/head
Michael Telatynski 2023-03-29 15:00:45 +01:00 committed by GitHub
parent 968b6fc5df
commit 1447829543
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/views/settings/AvatarSetting.tsx
View File

@ -43,7 +43,9 @@ const AvatarSetting: React.FC<IProps> = ({ avatarUrl, avatarAltText, avatarName,
element="div" element="div"
onClick={uploadAvatar ?? null} onClick={uploadAvatar ?? null}
className="mx_AvatarSetting_avatarPlaceholder" className="mx_AvatarSetting_avatarPlaceholder"
aria-labelledby={a11yId.current} aria-labelledby={uploadAvatar ? a11yId.current : undefined}
// Inhibit tab stop as we have explicit upload/remove buttons
tabIndex={-1}
{...hoveringProps} {...hoveringProps}
/> />
); );
@ -53,14 +55,15 @@ const AvatarSetting: React.FC<IProps> = ({ avatarUrl, avatarAltText, avatarName,
element="img" element="img"
src={avatarUrl} src={avatarUrl}
alt={avatarAltText} alt={avatarAltText}
aria-label={avatarAltText}
onClick={uploadAvatar ?? null} onClick={uploadAvatar ?? null}
// Inhibit tab stop as we have explicit upload/remove buttons
tabIndex={-1}
{...hoveringProps} {...hoveringProps}
/> />
); );
} }
let uploadAvatarBtn; let uploadAvatarBtn: JSX.Element | undefined;
if (uploadAvatar) { if (uploadAvatar) {
// insert an empty div to be the host for a css mask containing the upload.svg // insert an empty div to be the host for a css mask containing the upload.svg
uploadAvatarBtn = ( uploadAvatarBtn = (
@ -73,7 +76,7 @@ const AvatarSetting: React.FC<IProps> = ({ avatarUrl, avatarAltText, avatarName,
); );
} }
let removeAvatarBtn; let removeAvatarBtn: JSX.Element | undefined;
if (avatarUrl && removeAvatar) { if (avatarUrl && removeAvatar) {
removeAvatarBtn = ( removeAvatarBtn = (
<AccessibleButton onClick={removeAvatar} kind="link_sm"> <AccessibleButton onClick={removeAvatar} kind="link_sm">
@ -87,11 +90,11 @@ const AvatarSetting: React.FC<IProps> = ({ avatarUrl, avatarAltText, avatarName,
mx_AvatarSetting_avatar_hovering: isHovering && uploadAvatar, mx_AvatarSetting_avatar_hovering: isHovering && uploadAvatar,
}); });
return ( return (
<div className={avatarClasses}> <div className={avatarClasses} role="group" aria-label={avatarAltText}>
{avatarElement} {avatarElement}
<div className="mx_AvatarSetting_hover" aria-hidden="true"> <div className="mx_AvatarSetting_hover" aria-hidden="true">
<div className="mx_AvatarSetting_hoverBg" /> <div className="mx_AvatarSetting_hoverBg" />
<span id={a11yId.current}>{_t("Upload")}</span> {uploadAvatar && <span id={a11yId.current}>{_t("Upload")}</span>}
</div> </div>
{uploadAvatarBtn} {uploadAvatarBtn}
{removeAvatarBtn} {removeAvatarBtn}