fix(slds): fix text color issue for yellow background in edited cell varient of datatable (#5192)

Co-authored-by: Puneet Kulkarni <[email protected]>

Author: puneetk92

ui/components/data-tables/RELEASENOTES.md

@@ -6,6 +6,13 @@
 
 ## 2.22.0
 
+### Added
+
+- Added `font-weight` property in `.slds-is-edited` & `.slds-has-error` to provide secondary indicator for the text
+- Updated `Accessibility` section in `docs.mdx` documentation file for bold text
+
+## 2.22.0
+
 ### Changed
 
 - Removed `aria-label` from table header to prevent from reading twice headers.

ui/components/data-tables/docs.mdx

@@ -162,6 +162,8 @@ The Advanced Data Table and Inline Edit Data Table are based on the semantics, r
 
 The role of Grid comes with 2 distinct modes, Navigation mode and Actionable mode. Both come with very specific keyboard interaction modals. Navigation mode is the default mode of the Grid.
 
+Bold text for edited cell examples provide secondary indicators for text, along with yellow backgrounds, to indicate content is edited but unsaved.
+
 **Navigation Mode**
 
 - Tabbing into the grid focuses the first data cell in the table.

ui/components/data-tables/inline-edit/_index.scss

@@ -192,6 +192,7 @@
 
     &,
     &:hover {
+      font-weight: 700;
       background-color: var(--slds-g-color-palette-yellow-90, #{$color-background-highlight});
     }
   }
@@ -207,6 +208,7 @@
 
     &,
     &:hover {
+      font-weight: 700;
       background-color: var(--slds-g-color-palette-yellow-90, #{$color-background-highlight});
       box-shadow: var(--slds-g-color-error-base-40, #{$color-border-error}) 0 0 0 ($border-width-thick) inset;
     }
@@ -228,7 +230,7 @@
 
   &[disabled],
   &:disabled {
-   color: var(--slds-g-color-neutral-base-50, #{$color-text-icon-default});
+    color: var(--slds-g-color-neutral-base-50, #{$color-text-icon-default});
   }
 }