ariaLabel doesn't disable <title> tag on IonIcons 5

[Tasoril]

Perhaps I'm missing something, but I can't seem to get the <title> tag to stop appearing on ionicon v5 objects. When you mouseover them on desktop they give the icon name instead of the title/aria-label assigned to the ionicon object. I tried ariaLabel and aria-hidden, but neither seem to make any difference. Everything is working fine on v4.5.10_0.

[kim8823]

While I don't mind the title tag being there, I do mind the tooltip that browsers show. I do my own tooltips with bootstrap/popper on links containing the icons, so they're just additional clutter and even show wrong information (like "create" when I use that icon to edit something).
ion-icon { pointer-events: none; } helps with that, but it somehow messes up the z order (showing above the tooltips). .tooltip { z-index: 100000; } fixes that.

[klemensz]

The pointer-events: none; solution is a good workaround, but it has some downsides (you cannot bind a (click) event to the element any more). In our case we had to change more code to wrap everything in additional elements. Needs to be fixed in Ionic/Ionicons IMO.

[quinlo]

I am sure there is a better way, but this is a clunky workaround I am using:

function repion() {
  let ionicons = document.querySelectorAll('ion-icon');
  ionicons.forEach(icon => {
    let properTitle = icon.getAttribute('title');
    if (properTitle) {
      icon.shadowRoot.querySelector('.icon-inner svg title').innerHTML = properTitle
    }
  });
}

[klemensz]

@quinlo Thanks, looks good. When/where do you call this function?

[Peererxon]

you can made a directive and do this:
constructor(private el: ElementRef) { }
ngOnInit(){
const removeTitle = () => {
if(this.el.nativeElement && this.el.nativeElement.shadowRoot && this.el.nativeElement.shadowRoot.querySelector('.icon-inner
svg title') ) {
this.el.nativeElement.shadowRoot.querySelector('.icon-inner svg title').innerHTML = '';
} else {
setTimeout( () => {
removeTitle();
}, 500 );
}
}
removeTitle()
}

then, you can use it in your ion icon in this way

[klemensz]

I extended the directive so you can provide an alternative title:

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
    selector: '[ioniconRemoveTitle]',
})
export class IoniconsRemoveTitleDirective {

    @Input('iconTitle') iconTitle: string;

    constructor(private el: ElementRef) {
        // Doing nothing.
    }

    ngOnInit(): void {
        const removeTitle = () => {
            if (
                this.el.nativeElement &&
                this.el.nativeElement.shadowRoot &&
                this.el.nativeElement.shadowRoot.querySelector('.icon-inner svg title')
            ) {
                this.el.nativeElement.shadowRoot.querySelector('.icon-inner svg title').innerHTML =
                    this.iconTitle || '';
            } else {
                setTimeout(() => {
                    removeTitle();
                }, 500);
            }
        };
        removeTitle();
    }
}

Use it like this ([iconTitle] is optional):

<ion-icon name="close-circle" ioniconRemoveTitle [iconTitle]="'New title for close button'"></ion-icon>

[ariscol]

+1 for workaround, but I'd like to cast my vote for some built-in functionality to remove and edit the tooltip. There are 2 or 3 other issues looking for the same thing.

[dakotaJang]

I think it makes more sense to populate the <title> tag at runtime instead of at build time, or just not have it all together.
If there is a [title] attribute on <ion-icon>, then don't add <title> tag to svg, otherwise add <title> with default English label.

Having it hard coded like this at build time makes it hard to customizing the title that appears on :hover.
Another use case for this is for internationalization.
If the <title> tag is pre-populated at build time in English, then all other languages needs to find a work around to remove/replace the title tag or something.

I found a line of code that seems to adds the <title> of at build but not sure where to do it during runtime.

ionicons/scripts/build.ts

Lines 169 to 172 in 8c2a507

	const optimizedCode = optimizedSvg.data.replace(
	/<svg (.*?)>/,
	`<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>${svgData.title}</title>`,
	);

[godenji]

Yup, not ideal that this functionality isnt supported out of the box.

Since displaying the icon name on icon hover event is actually often worse than displaying nothing at all (e.g. "Create" is displayed when operation is an Edit), probably better to just disable displaying icon title via pointer-events: none until ionicons supports this functionality; that, or go with one of the above hacks.

[dkniffin]

+1 for a built-in fix for this. As @ariscol mentioned, there are several other issues on this repo talking about the same thing:

#915
#1065
#1059
#1049
#949

@liamdebeasi Is this something we can get changed? I'm sure someone here could make a PR with this change. Would that be considered for merging?

[oyedejioyewole]

@quinlo your solution is awesome, but it didn't work for me. I am stuck at the icon.shadowRoot.querySelector() function which returns null and undefined

[chenasraf]

This CSS-only solution fixed it for me and works great and very simple, however, I would love to see this properly implemented in a future version.

#949 (comment)

[liamdebeasi]

Hi everyone,

Wanted to provide a quick update. We plan on removing the default <title> and default aria-label values in Ionicons. This is a breaking change, so it will need to happen in the next major release of Ionicons.

[oyedejioyewole]

Just as an idea when would the next major release roll out? Thanks

[liamdebeasi]

We do not have a time estimate at the moment, but I will update this thread when I have more to share.

[oyedejioyewole]

Okay, hope it'll be soon. I'm loving the simplicity of ionicons 😀

[joezappie]

I see that ionicons has published 6.1.0-0 to NPM. Trying it out the title tag still shows up causing the tooltip. Is this supposed to be removed in 6.1 and if so is there an ETA on when that will be included? This is what I'm looking forward to most in the next update is removing these tooltips.

[liamdebeasi]

Thanks for the report. This has been resolved via #1166 and a fix will be available in Ionicons 6.1. In this release, the <title> element inside of each SVG has been removed. Developers can provide a title to create a tooltip that appears when hovering the icon. They can also provide aria-label to customize what assistive technology announces when selecting the icon.

[Marius-Romanus]

Hello @liamdebeasi Will there be an update of the library in ionic-framework soon, or in the next patch version?

Thanks!

[liamdebeasi]

Yes, we plan on updating the dependency in an upcoming minor release of Ionic Framework: ionic-team/ionic-framework#26617

Note: This PR only updates the dependency for icons that are used internally (such as the icon for ion-back-button). Developers consuming Ionicons in their own apps should still manually update their Ionicons dependency.