Title conflicts

[krmax44]

Let's look at the following snippet:

<button title="My title">
  <settings-icon />
</button>

What happens once the user hovers over the button is that the default icon overrides the button title. The current workarounds are

<button title="Open settings">
  <settings-icon title="Open settings" /> <!-- oof, very repetetive, or -->
  <settings-icon :title="false" /> <--! oof, very strange -->
</button>

...both aren't that great. Two alternative ways would be:

• a global way to disable titles
• title inheritance by traversing through the DOM parents

[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