Button icon name overrides button's own title on mouse over

[iongion]

Bug report

• core 2.0.1, icons 2.0.0
• any

Steps to reproduce

For this code

<Button title="My title" icon="play">stuf</Button>

Actual behavior

<button type="button" class="pt-button" title="My title">
  <svg class="pt-icon" data-icon="play" width="16" height="16" viewBox="0 0 16 16">
    <title>play</title>
    <path d="M12 8c0-.35-.19-.64-.46-.82l.01-.02-6-4-.01.02A.969.969 0 0 0 5 3c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1 .21 0 .39-.08.54-.18l.01.02 6-4-.01-.02c.27-.18.46-.47.46-.82z" fill-rule="evenodd"></path> 
  </svg>
</button>

Expected behavior

<button type="button" class="pt-button" title="My title">
  <svg class="pt-icon" data-icon="play" width="16" height="16" viewBox="0 0 16 16">
    <path d="M12 8c0-.35-.19-.64-.46-.82l.01-.02-6-4-.01.02A.969.969 0 0 0 5 3c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1 .21 0 .39-.08.54-.18l.01.02 6-4-.01-.02c.27-.18.46-.47.46-.82z" fill-rule="evenodd"></path> 
  </svg>
</button>

Shouldn't there be a way to disable the <title> for the svg icon as it overrides the intended title that comes from the button itself ?

Now, when one hovers with the mouse over an area of the icon, the name of the icon appears as tooltip, so in this case, one can see "play"

[iongion]

I mitigate it by using CSS:

button > svg,
button > svg > path,
button > svg > title {
  pointer-events: none;
}

[giladgray]

<Icon title="">

[giladgray]

ooh just discovered the <desc> SVG element, which seems to work like title a11y-wise but without the browser tooltip behavior: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/desc

[ghost]

@giladgray I'm using:

<InputGroup rightElement={lockButton} />

with:

const lockButton = (
  <Button
    icon={showPassword ? "unlock" : "lock"} // it shows title from svg
    title="Show / Hide" // this doesn't work
  />
);

Maybe it should take title prop? Am I wrong?

[joffrey-bion]

My current workaround is to create the <Icon> element myself with title={false}, and set it on the button, but this makes the syntax a bit heavy:

const icon = <Icon icon='arrow-right' title={false} />;
return <Button minimal icon={icon} title='Next' />;

It'd be nice if the <Icon>'s title was deactivated by default (I don't see any scenario where we actually want the icon name as title). At least, I believe the icon's title should be deactivated when a title is specified on the <Button> itself.

[awjreynolds]

Came here to raise this same issue. To overcome this I've had to do the following:
<Button icon={<Icon icon={IconNames.FOLDER_OPEN} title={false} />} disabled={noFilesFound} text={text} title="Select project found on local hard disk." />