[a11y] SVG element has no accessible name #713
Description
We are improving our a11y currently. For testing the accessibility we are using the IBM Equal Access Accessibility Checker.
Problem:
The IBM checker fails for us when the test runs while the toast is shown (see logs below).
Possible Solution:
We suspect that the SVG from the Close toast button is missing either an aria-label, an aria-describedby or an aria-hidden (see img).
DOM:
**IBM Equal Access Accessibility Checker Logs: **
Error: [✖] The SVG element has no accessible name (violation)
XPath: /html[1]/body[1]/div[5]/main[1]/section[1]/ol[1]/li[1]/button[1]/svg[1]
Snippet: <svg stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" fill="none" viewBox="0 0 24 24" height="12" width="12" xmlns="http://www.w3.org/2000/svg">
Help: https://able.ibm.com/rules/archives/2025.02.10/doc/en-US/svg_graphics_labelled.html#%7B%22message%22%3A%22The%20SVG%20element%20has%20no%20accessible%20name%22%2C%22snippet%22%3A%22%3Csvg%20stroke-linejoin%3D%5C%22round%5C%22%20stroke-linecap%3D%5C%22round%5C%22%20stroke-width%3D%5C%221.5%5C%22%20stroke%3D%5C%22currentColor%5C%22%20fill%3D%5C%22none%5C%22%20viewBox%3D%5C%220%200%2024%2024%5C%22%20height%3D%5C%2212%5C%22%20width%3D%5C%2212%5C%22%20xmlns%3D%5C%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%5C%22%3E%22%2C%22value%22%3A%5B%22VIOLATION%22%2C%22FAIL%22%5D%2C%22reasonId%22%3A%22fail_acc_name%22%2C%22ruleId%22%3A%22svg_graphics_labelled%22%2C%22msgArgs%22%3A%5B%5D%7D
Summary:✖ 1 violation