fix(ObjectStatus): add screen reader announcement for inactive state (#5204)

Author: Lukas742

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

@@ -234,7 +234,7 @@ describe('ObjectStatus', () => {
     cy.findByText('Content').click();
     cy.get('@clickSpy').should('not.be.called');
     cy.findByRole('button').should('not.exist');
-    cy.findByTestId('os').should('not.have.attr', 'aria-roledescription');
+    cy.findByText('Object Status').should('exist').and('not.be.visible');
 
     cy.mount(
       <ObjectStatus onClick={click} active>
@@ -243,14 +243,14 @@ describe('ObjectStatus', () => {
     );
     cy.findByText('Content').click();
     cy.get('@clickSpy').should('have.been.calledOnce');
-    cy.findByRole('button').should('have.attr', 'aria-roledescription', 'Object Status Button');
+    cy.findByText('Object Status Button').should('exist').and('not.be.visible');
   });
 
   it('emptyIndicator', () => {
     cy.mount(<ObjectStatus data-testid="os" />);
-    cy.findByTestId('os').children().should('have.length', 0);
-    cy.mount(<ObjectStatus data-testid="os" emptyIndicator />);
     cy.findByTestId('os').children().should('have.length', 1);
+    cy.mount(<ObjectStatus data-testid="os" emptyIndicator />);
+    cy.findByTestId('os').children().should('have.length', 2);
     cy.findByText('–').should('be.visible');
   });
 

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

@@ -17,7 +17,12 @@ import React, { forwardRef } from 'react';
 import { createUseStyles } from 'react-jss';
 import type { IndicationColor } from '../../enums/index.js';
 import { ValueState } from '../../enums/index.js';
-import { ARIA_OBJ_STATUS_DESC, EMPTY_VALUE, INDICATION_COLOR } from '../../i18n/i18n-defaults.js';
+import {
+  ARIA_OBJ_STATUS_DESC,
+  ARIA_OBJ_STATUS_DESC_INACTIVE,
+  EMPTY_VALUE,
+  INDICATION_COLOR
+} from '../../i18n/i18n-defaults.js';
 import type { CommonProps } from '../../interfaces/index.js';
 import { Icon } from '../../webComponents/Icon/index.js';
 import styles from './ObjectStatus.jss.js';
@@ -210,10 +215,12 @@ const ObjectStatus = forwardRef<HTMLDivElement, ObjectStatusPropTypes>((props, r
       onClick={active ? onClick : undefined}
       tabIndex={active ? 0 : undefined}
       data-icon-only={!children}
-      role={active ? 'button' : undefined}
-      aria-roledescription={active ? i18nBundle.getText(ARIA_OBJ_STATUS_DESC) : undefined}
+      role={active ? 'button' : 'group'}
       {...rest}
     >
+      <span className={classes.pseudoInvisibleText} data-component-name="ObjectStatusInvisibleDescriptionContainer">
+        {active ? i18nBundle.getText(ARIA_OBJ_STATUS_DESC) : i18nBundle.getText(ARIA_OBJ_STATUS_DESC_INACTIVE)}
+      </span>
       {iconToRender && (
         <span className={classes.icon} data-icon-only={!children} data-component-name="ObjectStatusIconContainer">
           {iconToRender}

packages/main/src/i18n/messagebundle.properties

@@ -273,9 +273,12 @@ NUMERICCONTENT_DEVIATION_UP=Ascending
 #XTOL: Tooltip Numeric Content Deviation Down
 NUMERICCONTENT_DEVIATION_DOWN=Descending
 
-#XACT: Aria role description for ObjectStatus component
+#XACT: Aria role description for active ObjectStatus component
 ARIA_OBJ_STATUS_DESC=Object Status Button
 
+#XACT: Aria role description for inactive ObjectStatus component
+ARIA_OBJ_STATUS_DESC_INACTIVE=Object Status
+
 #XACT: Invisible text for ObjectStatus indication color
 INDICATION_COLOR=Indication Color