Title conflicts about vue-material-design-icons

[gambolputty]

I fixed this myself by setting pointer-events: none inside the CSS class .material-design-icon (I'm using custom CSS)

[robcresswell]

@bradley-varol If you've a suggestion on what you'd prefer, please make it 😄 I have made a suggestion above, but nobody has replied. I don't use Vue much nowadays, so I don't have much drive to spend a weekend investigating fixes.

[robcresswell]

I'm going to close this; I've changed how titles work as of 5.0.0 and there hasn't been much activity

[robcresswell]

I'm very reluctant to start adding "magic" implicit titles over explicit ones, given you can assign the title to a variable in Vue to avoid the horrors of repetition. What do you imagine this would look like in code?

[gambolputty]

I stumbled upon a similar problem. The code rendered by Chrome is the following:

<button title="Outline" class="sidebar__tab">
  <span aria-label="Pound icon" role="img" class="material-design-icon pound-icon">
    <svg fill="currentColor" width="28" height="28" viewBox="0 0 24 24" class="material-design-icon__svg">
      <path d="...">
        <title>Pound icon</title>
      </path>
    </svg>
  </span>
</button>

This is just a button with an icon. When hovering with the mouse, the title changes: sometimes it's "Outline" (triggered by button atrribute) and sometimes "Pound icon" (triggered by <title> element inside svg). I could not find a way to change that behavior. Could you help?

Btw: thanks for making this project :)

[gambolputty]

Additionally: if I don't set a title to the wrapping element, "Pound icon" is still displayed and not very informative. I wish there was a way to disable these titles.

[krmax44]

That's a clever workaround, but bears some accessibility problems, unfortunately.

[robcresswell]

I can see how this is annoying... any suggestions of what this may look like in code? I was generally trying to balance a11y / performance against niceties in computed properties etc when designing this.

Would making the title <title>{{ props.title }}</title> conditional based on decorative solve this? i.e. <title v-if="!decorative">{{ props.title }}</title>

Unfortunately I've not done any frontend work for almost 2 years now; I mostly just keep this updated because the maintenance cost is low and people seem to be using it 😄

[bradley-varol]

I'd really like to be able to disable this. I've got buttons with titles containing icons and on icon hover, the title is wrong.

[robcresswell]

@bradley-varol @krmax44 @gambolputty Does the linked PR solve your problem?

As I've stated before, I don't do much Vue nowadays, but I'm happy to keep maintaining this. Would appreciate some others eyes on the PR though 😃