test: Add Background component rendering contract tests-#1414

.github/workflows/ci.yml

@@ -74,7 +74,9 @@ jobs:
         with:
           python-version: "3.11"
       - name: Install backend system dependencies
-        run: sudo apt-get update && sudo apt-get install -y libcairo2-dev pkg-config
+        run: |
+          sudo rm -f /etc/apt/sources.list.d/azure-cli.sources /etc/apt/sources.list.d/azure-cli.list /etc/apt/sources.list.d/microsoft-prod.sources /etc/apt/sources.list.d/microsoft-prod.list
+          sudo apt-get update && sudo apt-get install -y libcairo2-dev pkg-config
       - name: Install backend development dependencies
         run: |
           python -m pip install --upgrade pip
@@ -96,7 +98,9 @@ jobs:
         with:
           python-version: "3.11"
       - name: Install backend system dependencies
-        run: sudo apt-get update && sudo apt-get install -y libcairo2-dev pkg-config
+        run: |
+          sudo rm -f /etc/apt/sources.list.d/azure-cli.sources /etc/apt/sources.list.d/azure-cli.list /etc/apt/sources.list.d/microsoft-prod.sources /etc/apt/sources.list.d/microsoft-prod.list
+          sudo apt-get update && sudo apt-get install -y libcairo2-dev pkg-config
       - name: Install backend dependencies
         run: |
           python -m pip install --upgrade pip
@@ -118,7 +122,9 @@ jobs:
         with:
           python-version: "3.11"
       - name: Install backend system dependencies
-        run: sudo apt-get update && sudo apt-get install -y libcairo2-dev pkg-config
+        run: |
+          sudo rm -f /etc/apt/sources.list.d/azure-cli.sources /etc/apt/sources.list.d/azure-cli.list /etc/apt/sources.list.d/microsoft-prod.sources /etc/apt/sources.list.d/microsoft-prod.list
+          sudo apt-get update && sudo apt-get install -y libcairo2-dev pkg-config
       - name: Install backend dependencies
         run: |
           python -m pip install --upgrade pip
@@ -147,7 +153,9 @@ jobs:
         with:
           python-version: "3.11"
       - name: Install backend system dependencies
-        run: sudo apt-get update && sudo apt-get install -y libcairo2-dev pkg-config
+        run: |
+          sudo rm -f /etc/apt/sources.list.d/azure-cli.sources /etc/apt/sources.list.d/azure-cli.list /etc/apt/sources.list.d/microsoft-prod.sources /etc/apt/sources.list.d/microsoft-prod.list
+          sudo apt-get update && sudo apt-get install -y libcairo2-dev pkg-config
       - name: Install backend dependencies
         run: |
           python -m pip install --upgrade pip
@@ -178,7 +186,9 @@ jobs:
         with:
           python-version: "3.11"
       - name: Install backend system dependencies
-        run: sudo apt-get update && sudo apt-get install -y libcairo2-dev pkg-config
+        run: |
+          sudo rm -f /etc/apt/sources.list.d/azure-cli.sources /etc/apt/sources.list.d/azure-cli.list /etc/apt/sources.list.d/microsoft-prod.sources /etc/apt/sources.list.d/microsoft-prod.list
+          sudo apt-get update && sudo apt-get install -y libcairo2-dev pkg-config
       - name: Install backend dependencies
         run: |
           python -m pip install --upgrade pip
@@ -227,7 +237,9 @@ jobs:
         with:
           python-version: "3.11"
       - name: Install backend system dependencies
-        run: sudo apt-get update && sudo apt-get install -y libcairo2-dev pkg-config
+        run: |
+          sudo rm -f /etc/apt/sources.list.d/azure-cli.sources /etc/apt/sources.list.d/azure-cli.list /etc/apt/sources.list.d/microsoft-prod.sources /etc/apt/sources.list.d/microsoft-prod.list
+          sudo apt-get update && sudo apt-get install -y libcairo2-dev pkg-config
       - name: Install backend dependencies
         run: |
           python -m pip install --upgrade pip

frontend/src/components/Background.tsx

@@ -6,7 +6,7 @@ interface BackgroundProps {
 
 export default function Background({ state = 'idle' }: BackgroundProps) {
     return (
-        <div className={`background background--${state}`}>
+        <div className={`background background--${state}`} aria-hidden="true">
             <div className="background-grid" />
             <div className="background-scan" />
             <div className="background-lines" />

frontend/testing/unit/components/Background.test.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import Background from '../../../src/components/Background'
+
+describe('Background Component', () => {
+  it('renders without crashing with default props', () => {
+    const { container } = render(<Background />)
+    const wrapper = container.querySelector('.background')
+    expect(wrapper).toBeInTheDocument()
+    expect(wrapper).toHaveClass('background--idle')
+  })
+
+  it('renders with different state props', () => {
+    const { container: activeContainer } = render(<Background state="active" />)
+    expect(activeContainer.querySelector('.background')).toHaveClass('background--active')
+
+    const { container: errorContainer } = render(<Background state="error" />)
+    expect(errorContainer.querySelector('.background')).toHaveClass('background--error')
+  })
+
+  it('asserts decorative container and layers are aria-hidden', () => {
+    const { container } = render(<Background />)
+
+    // The main wrapper should be aria-hidden since it is decorative background
+    const wrapper = container.querySelector('.background')
+    expect(wrapper).toHaveAttribute('aria-hidden', 'true')
+
+    // Confirm that the decorative internal elements exist as well
+    expect(container.querySelector('.background-grid')).toBeInTheDocument()
+    expect(container.querySelector('.background-scan')).toBeInTheDocument()
+    expect(container.querySelector('.background-lines')).toBeInTheDocument()
+  })
+})