[SF][a11y][ui5-button]: Button title attribute while using icon does not change the title hover title.

[lormanlau1]

Bug Description

While using a icon for the button the title changes for the outer tag (ui5-button) but the inner shadow-root button stays as the title set by the icon. Hover displays the wrong title.

Affected Component

ui5-button

Expected Behaviour

Button is expected to show the correct hover title.

Isolated Example

https://stackblitz.com/edit/js-njw4bl?file=index.html

Steps to Reproduce

1. Import @ui5/webcomponent-icons
2. Create a button using the icon and add a title attribute.
3. Observe that the hover does not show the correct title

Log Output, Stack Trace or Screenshots

Priority

Medium

UI5 Web Components Version

1.24.0

Browser

Chrome

Operating System

MacOS

Additional Context

No response

Organization

SAP SuccessFactors

Declaration

• [X] I’m not disclosing any internal or sensitive information.

[PetyaMarkovaBogdanova]

Hi colleagues, can you, please, look at this problem with ui5-button? It is also reproducible(provided stackblitz), if you add text to the button, but the icon remains. Best regards, Petya Markova. (UI5 Dispatcher)

[unazko]

Hello @lormanlau1,

I see from the provided screenshot that title attribute is used for the ui5-button instead of a tooltip attribute. Please refer to the API reference: https://sap.github.io/ui5-webcomponents/components/Button/#tooltip and checkout the following sample: https://stackblitz.com/edit/js-mhnaa2?file=index.js,index.html,package.json

Best regards, Boyan