fix(ObjectStatus): apply latest available specs (#4939)

Fixes #4934
SAP · Aug 4, 2023 · 03835db · 03835db
1 parent 6c1a882
commit 03835db
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 15 deletions.
diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.jss.ts b/packages/main/src/components/ObjectStatus/ObjectStatus.jss.ts
@@ -1,6 +1,7 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
 
 const createInvertedValueStateStyles = (baseColor: string) => ({
+  textShadow: ThemingParameters.sapContent_ContrastTextShadow,
   background: ThemingParameters[`${baseColor}_Background`],
   color: ThemingParameters[`${baseColor}_TextColor`],
   '& [ui5-icon]': {
@@ -23,6 +24,7 @@ const createInvertedValueStateStyles = (baseColor: string) => ({
 });
 
 const createInvertedIndicationStyles = (baseColor: string) => ({
+  textShadow: ThemingParameters.sapContent_ContrastTextShadow,
   color: ThemingParameters[`${baseColor}_TextColor`],
   backgroundColor: ThemingParameters[`${baseColor}`],
   '& [ui5-icon]': {
@@ -44,7 +46,32 @@ const styles = {
     position: 'relative',
     display: 'inline-block',
     verticalAlign: 'top',
-    width: 'fit-content'
+    width: 'fit-content',
+    textShadow: ThemingParameters.sapContent_TextShadow
+  },
+
+  active: {
+    cursor: 'pointer',
+    '&:not($inverted)': {
+      '& $text': {
+        textDecoration: 'underline'
+      },
+      '&:hover, &:active': {
+        '& $text': {
+          textDecoration: 'none'
+        }
+      },
+      '&:focus': {
+        textShadow: 'none',
+        background: ThemingParameters.sapContent_FocusColor,
+        color: ThemingParameters.sapContent_ContrastTextColor,
+        borderRadius: '0.125rem',
+        outline: `0.125rem ${ThemingParameters.sapContent_FocusColor}`,
+        '& [ui5-icon]': {
+          color: ThemingParameters.sapContent_ContrastTextColor
+        }
+      }
+    }
   },
 
   icon: {
@@ -147,28 +174,28 @@ const styles = {
     }
   },
 
-  active: {
-    '&:hover, &:active': {
-      cursor: 'pointer',
-      '&:not($inverted) $text, $icon:only-child': {
-        textDecoration: 'underline'
-      }
-    }
-  },
-
   inverted: {
     height: 'auto',
     minHeight: '1rem',
-    minWidth: '1.25rem',
-    padding: '0.0625rem 0.25rem',
-    borderRadius: ThemingParameters.sapElement_BorderCornerRadius,
+    minWidth: '1.375rem',
+    padding: '0.1875rem 0.25rem',
+    borderRadius: ThemingParameters.sapButton_BorderCornerRadius,
     fontFamily: ThemingParameters.sapFontBoldFamily,
     fontSize: ThemingParameters.sapFontSmallSize,
     '& [ui5-icon]': {
-      paddingTop: '0.125rem',
+      paddingBlockStart: '0.125rem',
       width: ThemingParameters.sapFontSmallSize,
       height: ThemingParameters.sapFontSmallSize
     },
+    '&[data-icon-only="true"]': {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '0.1875rem 0.313rem'
+    },
+    '$active&:focus': {
+      outline: `${ThemingParameters.sapContent_FocusColor} ${ThemingParameters.sapContent_FocusStyle} ${ThemingParameters.sapContent_FocusWidth}`
+    },
     '&$error': createInvertedValueStateStyles('sapButton_Negative'),
     '&$warning': createInvertedValueStateStyles('sapButton_Critical'),
     '&$success': createInvertedValueStateStyles('sapButton_Success'),

diff --git a/packages/main/src/components/ObjectStatus/index.tsx b/packages/main/src/components/ObjectStatus/index.tsx
@@ -107,7 +107,15 @@ const ObjectStatus = forwardRef<HTMLDivElement, ObjectStatusPropTypes>((props, r
   );
 
   return (
-    <div ref={ref} className={objStatusClasses} style={style} onClick={active ? onClick : undefined} {...rest}>
+    <div
+      ref={ref}
+      className={objStatusClasses}
+      style={style}
+      onClick={active ? onClick : undefined}
+      tabIndex={active ? 0 : undefined}
+      data-icon-only={!children}
+      {...rest}
+    >
       {iconToRender && <span className={classes.icon}>{iconToRender}</span>}
       {children && <span className={classes.text}>{children}</span>}
     </div>