fix: Red failure color in overlays

src/content/test/headings/no-missing-headings.tsx

@@ -25,9 +25,9 @@ export const infoAndExamples = create(({ Markup, Link }) => (
         <h2>Example</h2>
         <Markup.PassFail
             failText={<p>This element looks like a heading, but it isn't coded as a heading.</p>}
-            failExample={`[<p style="font-size:2em; font-weight:700;] color:#cc0000">About Accessibility Insights for Web</p>`}
+            failExample={`[<p style="font-size:2em; font-weight:700;] color:#e81123">About Accessibility Insights for Web</p>`}
             passText={<p>The element is coded as a heading.</p>}
-            passExample={`[<h1 ]style="color:#cc0000">About Accessibility Insights for Web[</h1>]`}
+            passExample={`[<h1 ]style="color:#e81123">About Accessibility Insights for Web[</h1>]`}
         />
         <h2>More examples</h2>
         <h3>WCAG success criteria</h3>

src/injected/visualization/failure-instance-formatter.ts

@@ -9,7 +9,7 @@ import { FailureBoxConfig, Formatter } from './formatter';
 
 export abstract class FailureInstanceFormatter implements Formatter {
     public static failureBoxConfig: FailureBoxConfig = {
-        background: '#CC0000',
+        background: '#E81123',
         fontColor: '#FFFFFF',
         text: '!',
         boxWidth: '20px',

src/injected/visualization/issues-formatter.ts

@@ -42,7 +42,7 @@ export class IssuesFormatter implements Formatter {
     }
 
     public static style: HeadingStyleConfiguration = {
-        borderColor: '#CC0000',
+        borderColor: '#E81123',
         fontColor: '#FFFFFF',
     };
 

src/tests/end-to-end/tests/content/__snapshots__/guidance-content.test.ts.snap

@@ -12104,7 +12104,7 @@ exports[`Guidance Content pages test/headings/noMissingHeadings/infoAndExamples
                 >
                   <p style="font-size:2em; font-weight:700;
                 </span>
-                 color:#cc0000"&gt;About Accessibility Insights for Web&lt;/p&gt;
+                 color:#e81123"&gt;About Accessibility Insights for Web&lt;/p&gt;
               </div>
             </div>
           </div>
@@ -12165,7 +12165,7 @@ exports[`Guidance Content pages test/headings/noMissingHeadings/infoAndExamples
                 >
                   &lt;h1 
                 </span>
-                style="color:#cc0000"&gt;About Accessibility Insights for Web
+                style="color:#e81123"&gt;About Accessibility Insights for Web
                 <span
                   class="highlight"
                 >

src/tests/unit/tests/injected/visualization/heading-formatter.test.ts

@@ -238,7 +238,7 @@ describe('HeadingFormatterTests', () => {
     function verifyFailureBoxStyle(config: DrawerConfiguration): void {
         const failureBoxConfig = config.failureBoxConfig;
         const expected = {
-            background: '#CC0000',
+            background: '#E81123',
             fontColor: '#FFFFFF',
             text: '!',
             boxWidth: '20px',

src/tests/unit/tests/injected/visualization/highlight-box-formatter.test.ts

@@ -17,7 +17,7 @@ describe('HighlightBoxFormatterTests', () => {
 
         expect(config.showVisualization).toBe(true);
         expect(config.failureBoxConfig).toBeNull();
-        expect(config.borderColor).toEqual('#CC0000');
+        expect(config.borderColor).toEqual('#e81123');
         expect(config.textAlign).toEqual('center');
     });