I am facing an issue with getting the aria-label to display on my image. Despite checking my code, I cannot figure out why it is not working. Any ideas on what might be missing?
Here is the code from my NextJS app:
The svg in my public folder.
<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="122.875px" height="28.489px" viewBox="0 0 122.875 28.489" enable-background="new 0 0 122.875 28.489" xml:space="preserve"><g><path fill-rule="evenodd" clip-rule="evenodd" d="M108.993,0c7.683-0.059,13.898,6.12,13.882,13.805 c-0.018,7.682-6.26,13.958-13.942,14.018c-31.683,0.222-63.368,0.444-95.051,0.666C6.2,28.549-0.016,22.369,0,14.685 C0.018,7.002,6.261,0.726,13.943,0.667C45.626,0.445,77.311...
I then import the svg from my data folder.
import Minus from "public/minus-icon.svg";
export list = [
{ name: "One two and three and four and five till six and stop", icon: Minus }
]
Next, in my component:
<Image
priority
src={item.icon}
height={20}
width={20}
alt={item.name}
aria-labelledby={item.name}
/>
<title id={item.name}>{item.name}</title>
Although everything seems to be set up correctly (excluding unrelated code like
import Image from "next/image";