fix(MessageViewButton): adjust default tooltip (#7162)

Author: Lukas742

packages/main/src/components/MessageViewButton/MessageViewButton.cy.tsx

@@ -1,20 +1,24 @@
 import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
 import { MessageViewButton } from './index.js';
 
+const testCases: [ValueState | undefined, string, string, string][] = [
+  [ValueState.Negative, 'error', 'Error Type', 'Error'],
+  [ValueState.Positive, 'sys-enter-2', 'Success Type', 'Success'],
+  [ValueState.Critical, 'alert', 'Warning Type', 'Warning'],
+  [ValueState.Information, 'information', 'Information Type', 'Information'],
+  [ValueState.None, 'information', 'Information Type', 'Information'],
+  [undefined, 'error', 'Error Type', 'Error']
+];
+
 describe('MessageViewButton', () => {
-  [
-    [ValueState.Negative, 'error'],
-    [ValueState.Positive, 'sys-enter-2'],
-    [ValueState.Critical, 'alert'],
-    [ValueState.Information, 'information'],
-    [ValueState.None, 'information'],
-    [undefined, 'error']
-  ].forEach(([type, icon]: [ValueState, string]) => {
+  testCases.forEach(([type, icon, label, tooltip]) => {
     it(`type ${type}`, () => {
       cy.mount(<MessageViewButton type={type} data-testid={type ?? 'undefined'} />);
       cy.findByTestId(type ?? 'undefined')
         .should('have.attr', 'icon', icon)
-        .should('be.visible');
+        .and('have.attr', 'accessible-name', label)
+        .and('have.attr', 'tooltip', tooltip)
+        .and('be.visible');
     });
   });
   it('counter', () => {

packages/main/src/components/MessageViewButton/index.tsx

@@ -8,7 +8,16 @@ import sysEnter2Icon from '@ui5/webcomponents-icons/dist/sys-enter-2.js';
 import { useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
-import { ERROR_TYPE, WARNING_TYPE, INFORMATION_TYPE, SUCCESS_TYPE } from '../../i18n/i18n-defaults.js';
+import {
+  ERROR_TYPE,
+  WARNING_TYPE,
+  INFORMATION_TYPE,
+  SUCCESS_TYPE,
+  ERROR,
+  SUCCESS,
+  WARNING,
+  INFORMATION
+} from '../../i18n/i18n-defaults.js';
 import type { ButtonDomRef, ButtonPropTypes } from '../../webComponents/index.js';
 import { Button } from '../../webComponents/index.js';
 import { classNames, styleData } from './MessageViewButton.module.css.js';
@@ -32,18 +41,19 @@ export interface MessageViewButtonProptypes
 interface Types {
   icon: string;
   i18nLabel: { key: string; defaultText: string };
+  tooltip: { key: string; defaultText: string };
 }
 
 const getTypes = (type: MessageViewButtonProptypes['type']): Types => {
   switch (type) {
     case ValueState.Negative:
-      return { icon: errorIcon, i18nLabel: ERROR_TYPE };
+      return { icon: errorIcon, i18nLabel: ERROR_TYPE, tooltip: ERROR };
     case ValueState.Positive:
-      return { icon: sysEnter2Icon, i18nLabel: SUCCESS_TYPE };
+      return { icon: sysEnter2Icon, i18nLabel: SUCCESS_TYPE, tooltip: SUCCESS };
     case ValueState.Critical:
-      return { icon: alertIcon, i18nLabel: WARNING_TYPE };
+      return { icon: alertIcon, i18nLabel: WARNING_TYPE, tooltip: WARNING };
     default:
-      return { icon: informationIcon, i18nLabel: INFORMATION_TYPE };
+      return { icon: informationIcon, i18nLabel: INFORMATION_TYPE, tooltip: INFORMATION };
   }
 };
 
@@ -54,7 +64,7 @@ const MessageViewButton = forwardRef<ButtonDomRef, MessageViewButtonProptypes>((
   const { type = ValueState.Negative, counter, className, tooltip, accessibleName, ...rest } = props;
   useStylesheet(styleData, MessageViewButton.displayName);
   const classes = clsx(classNames.btn, className);
-  const { icon, i18nLabel } = getTypes(type);
+  const { icon, i18nLabel, tooltip: title } = getTypes(type);
 
   const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
   const label = i18nBundle.getText(i18nLabel);
@@ -65,7 +75,7 @@ const MessageViewButton = forwardRef<ButtonDomRef, MessageViewButtonProptypes>((
       icon={icon}
       {...rest}
       data-type={type}
-      tooltip={tooltip ?? label}
+      tooltip={tooltip ?? i18nBundle.getText(title)}
       accessibleName={accessibleName ?? label}
     >
       {counter > 1 && counter}