fix: filter text node and color inherit for contrast checker

Author: peterpeterparker

studio/src/app/utils/editor/contrast.utils.tsx

@@ -3,7 +3,7 @@ import {extractRgb, extractRgba} from '@deckdeckgo/utils';
 export class ContrastUtils {
   static async calculateContrastRatio(bgColor: string | undefined, color: string | undefined): Promise<number> {
     const bgColorWithDefault: string = bgColor === undefined || bgColor === '' ? `rgb(255, 255, 255)` : bgColor;
-    const colorWithDefault: string = color === undefined || color === '' ? `rgb(0, 0, 0)` : color;
+    const colorWithDefault: string = color === undefined || color === '' || color === 'initial' ? `rgb(0, 0, 0)` : color;
 
     // The text color may or may not be semi-transparent, but that doesn't matter
     const bgRgba: number[] | undefined = extractRgba(bgColorWithDefault);

studio/src/app/utils/editor/node.utils.tsx

@@ -20,8 +20,12 @@ export class NodeUtils {
     return Array.from(elements).reduce((acc: HTMLElement[], slot: HTMLElement) => {
       const children: NodeListOf<HTMLElement> = slot.querySelectorAll('*');
 
-      if (children && children.length > 0) {
-        acc.push(...Array.from(children));
+      const filteredChildren: HTMLElement[] | undefined = Array.from(children).filter((child) =>
+        Array.from(child.childNodes).some((element) => element.nodeType === Node.TEXT_NODE)
+      );
+
+      if (filteredChildren && filteredChildren.length > 0) {
+        acc.push(...Array.from(filteredChildren));
       }
 
       return acc;
@@ -48,7 +52,8 @@ export class NodeUtils {
 
     const styleAttr: string = color === 'background' ? 'background-color' : 'color';
 
-    if (node.style[styleAttr] !== '' && node.style[styleAttr] !== 'initial') {
+    // initial act for background as inherit
+    if (node.style[styleAttr] !== '' && ((color === 'background' && node.style[styleAttr] !== 'initial') || color === 'color')) {
       return node.style[styleAttr];
     }