Message input field: Delete button on image thumbnail missing accessible name

[kangabell]

After adding an image to the chat it appears as a thumbnail with a small button with an "x" on it. This button has no accessible name and so it is read by the screen reader as just "button" with no information on what the button does.

WCAG Criteria

2.5.3 Label in Name - A

Test Environment

http://159.89.83.1/c/new

Testing Method

Manual - VO/Safari/MacOS

Screenshot

Rendered Code

<button type="button" class="absolute right-1 top-1 -translate-y-1/2 translate-x-1/2 rounded-full bg-surface-secondary p-0.5 transition-colors duration-200 hover:bg-surface-primary z-50"><span><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="icon-sm" xmlns="http://www.w3.org/2000/svg" width="32" height="32"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></span></button>

Action

Add button text or an aria-label that says "delete image" or similar.

Notes

This is an issue identified by Accessibility issues for screenreader users #5187