diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx b/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx index 61ee4866516..0cc5921e63e 100644 --- a/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx +++ b/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( @@ -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(); - cy.findByTestId('os').children().should('have.length', 0); - cy.mount(); cy.findByTestId('os').children().should('have.length', 1); + cy.mount(); + cy.findByTestId('os').children().should('have.length', 2); cy.findByText('–').should('be.visible'); }); diff --git a/packages/main/src/components/ObjectStatus/index.tsx b/packages/main/src/components/ObjectStatus/index.tsx index ba38b5f5f66..e52c939672b 100644 --- a/packages/main/src/components/ObjectStatus/index.tsx +++ b/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((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} > + + {active ? i18nBundle.getText(ARIA_OBJ_STATUS_DESC) : i18nBundle.getText(ARIA_OBJ_STATUS_DESC_INACTIVE)} + {iconToRender && ( {iconToRender} diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties index 3e6e16f926d..9c6e25b9eba 100644 --- a/packages/main/src/i18n/messagebundle.properties +++ b/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