fix(MessageViewButton): add default tooltip & aria-label (#6595)

Fixes #6594

Author: Lukas742

.storybook/mockData/generateMessageItems.tsx

@@ -1,5 +1,5 @@
-import { MessageItem, Text } from '@ui5/webcomponents-react';
 import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
+import { MessageItem, Text } from '@ui5/webcomponents-react';
 
 const LoremIpsum = (
   <Text>
@@ -25,22 +25,6 @@ const informationMessageItems = (count) => {
   ));
 };
 
-const successMessageItems = (count) => {
-  if (!count) {
-    return [];
-  }
-  return new Array(count).fill('').map((_, index) => (
-    <MessageItem
-      key={`SuccessMessage${index}`}
-      titleText={'Success Message'}
-      type={ValueState.Positive}
-      groupName={`Group${index}`}
-    >
-      {LoremIpsum}
-    </MessageItem>
-  ));
-};
-
 const warningMessageItems = (count) => {
   if (!count) {
     return [];
@@ -76,6 +60,5 @@ const errorMessageItems = (count) => {
 export const generateMessageItems = (numberOfMessageTypes) => [
   ...informationMessageItems(numberOfMessageTypes.information),
   ...warningMessageItems(numberOfMessageTypes.warning),
-  ...successMessageItems(numberOfMessageTypes.success),
   ...errorMessageItems(numberOfMessageTypes.error)
 ];

packages/main/src/components/MessageView/MessageView.stories.tsx

@@ -9,7 +9,6 @@ import { FlexBoxAlignItems, FlexBoxJustifyContent } from '../../enums/index.js';
 import { Bar } from '../../webComponents/Bar/index.js';
 import { Button } from '../../webComponents/Button/index.js';
 import { Dialog } from '../../webComponents/Dialog/index.js';
-import { Link } from '../../webComponents/Link/index.js';
 import { ResponsivePopover } from '../../webComponents/ResponsivePopover/index.js';
 import { Title } from '../../webComponents/Title/index.js';
 import { FlexBox } from '../FlexBox/index.js';
@@ -46,16 +45,6 @@ const meta = {
       >
         First Error Message Description.
       </MessageItem>,
-      <MessageItem
-        key={2}
-        titleText={'Success Message Type'}
-        subtitleText={'You can also use subtitles'}
-        type={ValueState.Positive}
-        counter={2}
-      >
-        This is a success message! You can even use{' '}
-        <Link href={'https://github.com/SAP/ui5-webcomponents-react'}>links here</Link>.
-      </MessageItem>,
       <MessageItem
         key={3}
         titleText={'Warning Message Type'}

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

@@ -5,9 +5,10 @@ import alertIcon from '@ui5/webcomponents-icons/dist/alert.js';
 import errorIcon from '@ui5/webcomponents-icons/dist/error.js';
 import informationIcon from '@ui5/webcomponents-icons/dist/information.js';
 import sysEnter2Icon from '@ui5/webcomponents-icons/dist/sys-enter-2.js';
-import { useStylesheet } from '@ui5/webcomponents-react-base';
+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 type { ButtonDomRef, ButtonPropTypes } from '../../webComponents/index.js';
 import { Button } from '../../webComponents/index.js';
 import { classNames, styleData } from './MessageViewButton.module.css.js';
@@ -28,30 +29,45 @@ export interface MessageViewButtonProptypes
   counter?: number;
 }
 
-const getIcon = (type) => {
+interface Types {
+  icon: string;
+  i18nLabel: { key: string; defaultText: string };
+}
+
+const getTypes = (type: MessageViewButtonProptypes['type']): Types => {
   switch (type) {
     case ValueState.Negative:
-      return errorIcon;
+      return { icon: errorIcon, i18nLabel: ERROR_TYPE };
     case ValueState.Positive:
-      return sysEnter2Icon;
+      return { icon: sysEnter2Icon, i18nLabel: WARNING_TYPE };
     case ValueState.Critical:
-      return alertIcon;
+      return { icon: alertIcon, i18nLabel: INFORMATION_TYPE };
     default:
-      return informationIcon;
+      return { icon: informationIcon, i18nLabel: SUCCESS_TYPE };
   }
 };
 
 /**
  * The `MessageViewButton` can be used for opening a `Popover` containing the `MessageView` component. It should always reflect the message `type` with the highest severity.
  */
 const MessageViewButton = forwardRef<ButtonDomRef, MessageViewButtonProptypes>((props, ref) => {
-  const { type = ValueState.Negative, counter, className, ...rest } = props;
+  const { type = ValueState.Negative, counter, className, tooltip, accessibleName, ...rest } = props;
   useStylesheet(styleData, MessageViewButton.displayName);
   const classes = clsx(classNames.btn, className);
-  const icon = getIcon(type);
+  const { icon, i18nLabel } = getTypes(type);
 
+  const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
+  const label = i18nBundle.getText(i18nLabel);
   return (
-    <Button ref={ref} className={classes} icon={icon} {...rest} data-type={type}>
+    <Button
+      ref={ref}
+      className={classes}
+      icon={icon}
+      {...rest}
+      data-type={type}
+      tooltip={tooltip ?? label}
+      accessibleName={accessibleName ?? label}
+    >
       {counter > 1 && counter}
     </Button>
   );

packages/main/src/i18n/messagebundle.properties

@@ -339,3 +339,15 @@ NO_DATA_FILTERED=No data found. Try adjusting the filter settings.
 #XACT: Number of items in a pseudo list
 WITH_X_ITEMS=with {0} items
 
+#XACT: Message View error button label
+ERROR_TYPE=Error Type
+
+#XACT: Message View warning button label
+WARNING_TYPE=Warning Type
+
+#XACT: Message View information button label
+INFORMATION_TYPE=Information Type
+
+#XACT: Message View success button label
+SUCCESS_TYPE=Success Type
+