diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx b/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx
index 08491c51f13..f85fc9d0b41 100644
--- a/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx
+++ b/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx
@@ -231,6 +231,7 @@ describe('ObjectStatus', () => {
Content
);
+ cy.get('button').should('not.exist');
cy.findByText('Content').click();
cy.get('@clickSpy').should('not.be.called');
cy.findByRole('button').should('not.exist');
@@ -241,8 +242,13 @@ describe('ObjectStatus', () => {
Content
);
+ cy.get('button').should('be.visible');
cy.findByText('Content').click();
cy.get('@clickSpy').should('have.been.calledOnce');
+ cy.findByText('Content').realPress('Enter');
+ 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('not.be.visible');
});
diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.jss.ts b/packages/main/src/components/ObjectStatus/ObjectStatus.jss.ts
index 2d5c68dd8d5..96e68cc3c45 100644
--- a/packages/main/src/components/ObjectStatus/ObjectStatus.jss.ts
+++ b/packages/main/src/components/ObjectStatus/ObjectStatus.jss.ts
@@ -46,6 +46,9 @@ const createInvertedIndicationStyles = (baseColor: string) => ({
});
const styles = {
+ normalizeCSS: {
+ all: 'unset'
+ },
objectStatus: {
fontFamily: ThemingParameters.sapFontFamily,
fontSize: ThemingParameters.sapFontSize,
diff --git a/packages/main/src/components/ObjectStatus/index.tsx b/packages/main/src/components/ObjectStatus/index.tsx
index e52c939672b..21e7d075f1d 100644
--- a/packages/main/src/components/ObjectStatus/index.tsx
+++ b/packages/main/src/components/ObjectStatus/index.tsx
@@ -29,16 +29,18 @@ import styles from './ObjectStatus.jss.js';
export interface ObjectStatusPropTypes extends CommonProps {
/**
- * Indicates if the ObjectStatus text and icon can be clicked/tapped by the user.
+ * Indicates if the ObjectStatus is rendered as inactive `div` or interactive `button` and therefore can be clicked/tapped by the user or not.
+ *
+ * **Note:** If this prop is set to `true`, you should also set the `children` or `icon` prop.
*
- * **Note:** If you set this property to true, you have to also set the `children` or `icon` prop.
*
* @since 0.16.6
*/
active?: boolean;
/**
- * Defines the icon in front of the `ObjectStatus` text.
+ * Defines the icon in front of the `ObjectStatus` text.
+ *
* __Note:__ Although this slot accepts HTML Elements, it is strongly recommended that you only use `Icon` in order to preserve the intended design.
*/
icon?: ReactNode;
@@ -58,10 +60,11 @@ export interface ObjectStatusPropTypes extends CommonProps {
large?: boolean;
/**
- * Defines the text of the `ObjectStatus`.
+ * Defines the text of the `ObjectStatus`.
+ *
* __Note:__ Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
*/
- children?: string | number | ReactNode;
+ children?: ReactNode;
/**
* Defines the value state of the ObjectStatus
.
Available options are:
None
Error
Warning
Success
Information