PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Improve profile picture settings accessibility (#10470)

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