ROX-25655: Fix accessibility issue of contrast in SimulationFrame (st…

…ackrox#12318)
shireenf-ibm · Aug 8, 2024 · 3c9b409 · 3c9b409
1 parent 127dad7
commit 3c9b409
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/ui/apps/platform/src/Containers/NetworkGraph/simulation/CodeCompareIcon.tsx b/ui/apps/platform/src/Containers/NetworkGraph/simulation/CodeCompareIcon.tsx
@@ -9,6 +9,7 @@ function CodeCompareIcon() {
             width="1em"
             viewBox="0 0 512 512"
             role="img"
+            aria-hidden="true"
             style={{ verticalAlign: '-0.125em' }}
         >
             {/* <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --> */}

diff --git a/ui/apps/platform/src/Containers/NetworkGraph/simulation/SimulationFrame.tsx b/ui/apps/platform/src/Containers/NetworkGraph/simulation/SimulationFrame.tsx
@@ -11,31 +11,33 @@ type SimulationFrameProps = {
 function SimulationFrame({ isSimulating, children }: SimulationFrameProps) {
     let style = {};
     if (isSimulating) {
-        style = { position: 'relative', border: '5px solid rgb(115,188,247)' };
+        style = { position: 'relative', border: '5px solid var(--pf-v5-global--info-color--100' };
     } else {
         style = {};
     }
+    // Simulation frame and rectangle at upper left have same colors as inline info alert:
+    // border and icon have same color
+    // background color
+    // text has same (ordinary) color as title or body for sufficient color contrast
     return (
         <div className="pf-ri__topology-section" style={style}>
             {children}
             {isSimulating && (
                 <Flex
-                    className="pf-v5-u-p-sm"
+                    className="pf-v5-u-p-sm pf-v5-u-background-color-info"
                     style={{
-                        backgroundColor: 'rgb(224,233,242)',
                         position: 'absolute',
                         left: '0',
                         top: '0',
                         zIndex: 100,
                     }}
                     alignItems={{ default: 'alignItemsCenter' }}
+                    spaceItems={{ default: 'spaceItemsSm' }}
                 >
                     <FlexItem>
                         <ScreenIcon className="pf-v5-u-info-color-100" />
                     </FlexItem>
-                    <FlexItem>
-                        <div className="pf-v5-u-info-color-100">Simulated view</div>
-                    </FlexItem>
+                    <FlexItem>Simulated view</FlexItem>
                 </Flex>
             )}
         </div>