fix(ObjectStatus): screen readers announce "button" only once (#7047)

Fixes #7039

Author: Lukas742

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

@@ -238,7 +238,7 @@ describe('ObjectStatus', () => {
     cy.findByText('Object Status').should('exist').and('have.css', 'font-size', '0px');
 
     cy.mount(
-      <ObjectStatus onClick={click} interactive>
+      <ObjectStatus onClick={click} interactive data-testid="os">
         Content
       </ObjectStatus>
     );
@@ -249,7 +249,7 @@ describe('ObjectStatus', () => {
     cy.get('@clickSpy').should('have.been.calledTwice');
     cy.findByText('Content').realPress('Space');
     cy.get('@clickSpy').should('have.been.calledThrice');
-    cy.findByText('Object Status Button').should('exist').and('have.css', 'font-size', '0px');
+    cy.findByTestId('os').should('have.attr', 'aria-roledescription', 'Object Status Button');
   });
 
   it('emptyIndicator', () => {

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

@@ -170,6 +170,7 @@ const ObjectStatus = forwardRef<HTMLDivElement | HTMLButtonElement, ObjectStatus
     emptyIndicator,
     stateAnnouncementText,
     large,
+    'aria-roledescription': ariaRoleDescription,
     ...rest
   } = props;
   const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
@@ -214,6 +215,7 @@ const ObjectStatus = forwardRef<HTMLDivElement | HTMLButtonElement, ObjectStatus
   );
 
   const TagName = interactive ? 'button' : 'div';
+  const roleDesc = `${ariaRoleDescription ? `${ariaRoleDescription} ` : ''}${interactive ? i18nBundle.getText(ARIA_OBJ_STATUS_DESC) : ''}`;
 
   return (
     <TagName
@@ -225,12 +227,18 @@ const ObjectStatus = forwardRef<HTMLDivElement | HTMLButtonElement, ObjectStatus
       onClick={interactive ? onClick : undefined}
       tabIndex={interactive ? 0 : undefined}
       data-icon-only={!children}
-      role={interactive ? 'button' : 'group'}
+      role={interactive ? undefined : 'group'}
+      aria-roledescription={roleDesc || undefined}
       {...rest}
     >
-      <span className={classNames.pseudoInvisibleText} data-component-name="ObjectStatusInvisibleDescriptionContainer">
-        {interactive ? i18nBundle.getText(ARIA_OBJ_STATUS_DESC) : i18nBundle.getText(ARIA_OBJ_STATUS_DESC_INACTIVE)}
-      </span>
+      {!interactive && (
+        <span
+          className={classNames.pseudoInvisibleText}
+          data-component-name="ObjectStatusInvisibleDescriptionContainer"
+        >
+          {i18nBundle.getText(ARIA_OBJ_STATUS_DESC_INACTIVE)}
+        </span>
+      )}
       {iconToRender && (
         <span className={classNames.icon} data-icon-only={!children} data-component-name="ObjectStatusIconContainer">
           {iconToRender}