nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Improve accessibility of the `<AvatarSetting> component (#30907)

Browse Source 
* Always use an accessible button with base avatar rendered inside it

* Rename avatarAltText to accessibleName

* Improve accessibility

* Fix tests
This commit is contained in:
R Midhun Suresh
2025-09-30 23:23:37 +05:30
committed by GitHub
parent b6046d2120
commit 2f8e2be09d
5 changed files with 40 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
test/unit-tests/components/views/settings/AvatarSetting-test.tsx
View File

@@ -25,18 +25,18 @@ describe("<AvatarSetting />", () => {
stubClient();
});
it("renders avatar with specified alt text", async () => {
const { queryByAltText } = render(
it("renders avatar with specified accessible name", async () => {
const { getByRole } = render(
<AvatarSetting
placeholderId="blee"
placeholderName="boo"
avatarAltText="Avatar of Peter Fox"
avatarAccessibleName="Avatar of Peter Fox"
avatar="mxc://example.org/my-avatar"
/>,
);
const imgElement = queryByAltText("Avatar of Peter Fox");
expect(imgElement).toBeInTheDocument();
const avatarButton = getByRole("button", { name: "Avatar of Peter Fox" });
expect(avatarButton).toBeInTheDocument();
});
it("renders a file as the avatar when supplied", async () => {
@@ -44,12 +44,13 @@ describe("<AvatarSetting />", () => {
<AvatarSetting
placeholderId="blee"
placeholderName="boo"
avatarAltText="Avatar of Peter Fox"
avatarAccessibleName="Avatar of Peter Fox"
avatar={AVATAR_FILE}
/>,
);
const imgElement = await screen.findByRole("button", { name: "Avatar of Peter Fox" });
const avatarButton = await screen.findByRole("button", { name: "Avatar of Peter Fox" });
const imgElement = avatarButton.querySelector("img");
expect(imgElement).toBeInTheDocument();
expect(imgElement).toHaveAttribute("src", "data:image/gif;base64," + BASE64_GIF);
});
@@ -63,7 +64,7 @@ describe("<AvatarSetting />", () => {
placeholderId="blee"
placeholderName="boo"
avatar="mxc://example.org/my-avatar"
avatarAltText="Avatar of Peter Fox"
avatarAccessibleName="Avatar of Peter Fox"
onChange={onChange}
/>,
);
@@ -82,7 +83,7 @@ describe("<AvatarSetting />", () => {
placeholderId="blee"
placeholderName="boo"
avatar="mxc://example.org/my-avatar"
avatarAltText="Avatar of Peter Fox"
avatarAccessibleName="Avatar of Peter Fox"
onChange={onChange}
/>,
);
@@ -102,7 +103,7 @@ describe("<AvatarSetting />", () => {
placeholderId="blee"
placeholderName="boo"
avatar="mxc://example.org/my-avatar"
avatarAltText="Avatar of Peter Fox"
avatarAccessibleName="Avatar of Peter Fox"
onChange={onChange}
/>,
);