search

dioxus-community / dioxus-free-icons

Use free svg icons in your Dioxus projects easily with dioxus-free-icons.
Other
67 stars 15 forks source link

Alt text / labels #42

Open magikmw opened 2 months ago

magikmw commented 2 months ago

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 commented 2 months ago

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

  1. Add a new trait method in the codegen crate (https://github.com/dioxus-community/dioxus-free-icons/blob/b2ec5e00121560b332034178f42016e8061b9d34/packages/codegen/src/create_icon_file.rs#L17) 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 commented 2 months ago

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

marc2332 commented 2 months ago

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

magikmw commented 2 months ago

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 commented 2 months ago

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