Alt text / labels

[magikmw]

Hi, I'm trying to figure out a way to add an alt attribute to icons for accessibility.

So far I've wrapped the icon into a div and added a label there, but I think it would be great if this lib would provide a way to add a label directly.

I'd be willing to try and tackle this myself if pointed in the right direction.

[marc2332]

That sounds like a cool idea! I'd do the following:

1. Add a new trait method in the codegen crate (

   dioxus-free-icons/packages/codegen/src/create_icon_file.rs

   Line 17 in b2ec5e0

   impl IconShape for {ICON_NAME} {

   ) where it returns a string with with the alt text, this alt text could be extracted perhaps from the icon name?
2. Adapt the Icon component so the svg element has the title element filled with the value returned by calling icon.alt() (https://github.com/dioxus-community/dioxus-free-icons/blob/main/packages/lib/src/icon_component.rs)

[marc2332]

Feel free to let me know if you have any issue/doubt! I can also take care of this if you want ✌️

[marc2332]

As a temporal solution, you could just pass the alt text to the title attribute in your app btw!

[magikmw]

Thanks for quick replies, I appreciate it.

That sounds like a cool idea! I'd do the following:

I'll take a look when I have a bit more time.
I did review docs in between your replies and found the title attribute which seems to be working just fine for the accessibility story.

I'll test bit further later on with a proper screen reader, but I think I might have been a bit too quick with creating an issue!

[marc2332]

Even though title prop exists, we could still implement a default value for it, so you get accessibility out of the box!