Title attribute on FontAwesomeIcon component not working?

[jmalatia]

The title attribute on the FontAwesomeIcon component is not showing any tooltip on hover. It's not adding a title element as a child of the svg element nor adding as an attribute on the svg element.

I see some old issues regarding it and a title prop was implemented... but nothing else really that I can find.

If this is not the purpose of the title prop is that documented anywhere? Is there another way to get a tooltip on the FontAwesomeIcon component's rendered svg element without wrapping it in another element like a span with a title attribue?

Versions used:

"@fortawesome/fontawesome-svg-core": "^7.0.0",
"@fortawesome/free-solid-svg-icons": "^7.0.0",
"@fortawesome/vue-fontawesome": "^3.1.1",
"vue": "^3.5.13"

sample codesandbox.io:
https://codesandbox.io/p/devbox/vue-forked-fdls6p?file=%2Fsrc%2FApp.vue

[robmadole]

Hi @jmalatia .

The title was intentionally removed. Here are a couple of docs that talk about it:

• https://docs.fontawesome.com/upgrade/whats-changed#simpler-accessibility
• https://docs.fontawesome.com/web/dig-deeper/accessibility#semantic-icons-in-content

If you still have questions after that, happy to discuss it but I'm going to close this issue for now.

[jmalatia]

@robmadole

I strongly disagree with the title being removed. The FontAwesomeIcon component renders a svg, so it should add the title element as a child of the svg if a title attribute is provided... otherwise there is no way for us to do it. In this scenario we are using it as a tooltip, not accessibility. However as stated in your link https://docs.fontawesome.com/web/dig-deeper/accessibility#semantic-icons-in-content using a title element in a svg is an option for accessability , but you have removed that ability for user to insert one!

There are multiple approaches to accessibility
Using aria attributes is just one way to help assistive technology understand what’s going on on the page. There are other options too, like using visually hidden text inside a or using the <title> tag in an SVG. These methods might be better suited if, for example, machine translations or copy-pastability is important.

Additionally, If you removed use of the title on the component, why does the fontawesome/svg-core dom.watch(), which performs i2svg still add the title element to the converted svg element? (my error... my setup was not pulling the new V7 source).

I don't agree with all the "opinionated" automatic aria labeling V6 did it if it found a title attribute. And I'm guessing that the FontAwesome team agreed and that is the reason it was removed in V7. In V6, if it found a title attribute it added a title.id, which is fine, but it also added an aria-labeledby which made it accessible (I just added a title nothing about accessibility).

In my option, the component and i2svg should render based only on the atrributes present:

• If a title attribute is present, it should add the title element with an auto-generated id attribute.
• If an aria-label attribute is present, it should apply the aria-label attribute.
• If an aria-hidden="false" attribute is present and no aria-label attribute is present, it should add an aria-labeledby="titleId" attribute with the title.id.

Doing these things, I believe still keeps your overall reasoning for making those changes in V7 (and probably only adds 10 lines of code), but also allows for accessibility if it's needed (and intended) as well as rendering what I think the "coder" would expect to happen.

As far as the component goes, a component is suppose to make things easier and it seems to be you are removing core functionality.

This following was a bug and was moved to a separate issue (FortAwesome/Font-Awesome#20772):

Also is there a reason v7 dom.watch() does not work on online ide's, where v6 seemed to work fine? They all share the same code in main.ts and App.vue:

• v6 codesandbox.io that dom.watch() works: https://codesandbox.io/p/devbox/fontawesome-v6-v398st
• v7 codesandbox.io that dom.watch() does not work: https://codesandbox.io/p/devbox/fontawesome-v7-hfnfj2
• v7 stackblitz.com that dom.watch() does not work: https://stackblitz.com/edit/vitejs-vite-vjjjs45n

[robmadole]

Okay, @jmalatia this is worth another look if you feel strongly. We'll get it on the list.

[jmalatia]

I just updated my last comment to be more specific after playing around and thinking through things more over the weekend.

To those looking for a quick fix...

Vue Component:

2 options:

1. Create your own wrapper component, and if a title attribute is passed, wrap the FontAwesomeIcon component in a <span>.
2. Make your own copy of the FontAwesomeIcon component source and change the below line:

//const vnode = computed(() => (renderedIcon.value ? convert(renderedIcon.value.abstract[0], {}, attrs) : null));

const vnode = computed(() => {
    // add a `title` element
    if (renderedIcon.value) {
        let r;
        if (props.title || attrs.title) {
            // TODO: add `aria-labeledby` functionality
            const a = renderedIcon.value.abstract[0];
            const c = { tag: "title", children: [props.title || attrs.title] /* , id: autoId */ };
            a.children.unshift(c);
            r = convert(a, {}, attrs);
        } else {
            r = convert(renderedIcon.value.abstract[0], {}, attrs);
        }
        return r;
    } else {
        return null;
    }
});

i2svg or dom.watch()

In your config add config.autoReplaceSvg = "nest"; and it will wrap all <i class="fa..." title="My Title"></i> in a <span> moving the title attribute to the <span>.

import { config, library, dom } from "@fortawesome/fontawesome-svg-core";
library.add(...);
config.autoReplaceSvg = "nest"; // true, false, 'nest'  // 'nest' wraps new svg element in a span
dom.watch();