fix: resolve CSP and accessibility issues

- Allow inline styles in CSP for Angular component encapsulation
- Hide skip-to-main-content link using screen-reader-only pattern
- Add JavaScript handler for skip link to work across all routes
- Add eslint-disable comments for intentional design choices

apps/frontend-e2e/src/e2e/app.cy.ts

@@ -1,7 +1,7 @@
 /**
- * @copyright 2026 NHCarrigan
  * @copyright 2026 NHCarrigan
  * @license Naomi's Public License
+ * @author Naomi Carrigan
  */
 
 import { getGreeting } from "../support/app.po";

apps/frontend-e2e/src/support/app.po.ts

@@ -1,11 +1,12 @@
 /**
- * @copyright 2026 NHCarrigan
  * @copyright 2026 NHCarrigan
  * @license Naomi's Public License
+ * @author Naomi Carrigan
  */
 
 /**
- *
+ * Gets the greeting element from the page.
+ * @returns A Cypress chainable to the h1 element.
  */
 export const getGreeting = (): Cypress.Chainable => {
   return cy.get("h1");

apps/frontend-e2e/src/support/commands.ts

@@ -1,7 +1,7 @@
 /**
- * @copyright 2026 NHCarrigan
  * @copyright 2026 NHCarrigan
  * @license Naomi's Public License
+ * @author Naomi Carrigan
  */
 
 /// <reference types="cypress" />

apps/frontend-e2e/src/support/e2e.ts

@@ -3,6 +3,7 @@
  * @license Naomi's Public License
  * @author Naomi Carrigan
  */
+/* eslint-disable unicorn/prevent-abbreviations -- e2e is a standard Cypress filename */
 
 /**
  * This example support/e2e.ts is processed and

apps/frontend/src/app/app.html

@@ -1,4 +1,4 @@
-<a href="#main-content" class="skip-link">Skip to main content</a>
+<a href="#main-content" class="skip-link" (click)="skipToMainContent($event)">Skip to main content</a>
 <app-header></app-header>
 <main id="main-content" class="main-content" tabindex="-1">
   <router-outlet></router-outlet>

apps/frontend/src/app/app.scss

@@ -1,3 +1,35 @@
+// Skip to main content link - visually hidden but accessible to screen readers
+.skip-link {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+.skip-link:focus {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: auto !important;
+  height: auto !important;
+  padding: 0.75rem 1.5rem !important;
+  margin: 0 !important;
+  overflow: visible !important;
+  clip: auto !important;
+  white-space: normal !important;
+  background: var(--witch-rose) !important;
+  color: var(--witch-moon) !important;
+  text-decoration: none !important;
+  font-weight: 600 !important;
+  border-radius: 0 0 4px 0 !important;
+  z-index: 10000 !important;
+}
+
 .main-content {
   min-height: calc(100vh - 60px); // Assuming header is ~60px
   background-color: transparent; // Let the body background show through

apps/frontend/src/app/app.ts

@@ -18,4 +18,13 @@ export class App implements OnInit {
   ngOnInit(): void {
     this.analytics.initialise();
   }
+
+  skipToMainContent(event: Event): void {
+    event.preventDefault();
+    const mainContent = document.getElementById('main-content');
+    if (mainContent) {
+      mainContent.focus();
+      mainContent.scrollIntoView({ behavior: 'smooth' });
+    }
+  }
 }

apps/frontend/src/styles.scss

@@ -143,23 +143,36 @@ button {
   background: var(--witch-plum);
 }
 
-// Skip to main content link
+// Skip to main content link - visually hidden but accessible to screen readers
 .skip-link {
   position: absolute;
-  top: -40px;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.skip-link:focus {
+  position: fixed;
+  top: 0;
   left: 0;
+  width: auto;
+  height: auto;
+  padding: 0.75rem 1.5rem;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
   background: var(--witch-rose);
   color: var(--witch-moon);
-  padding: 0.75rem 1.5rem;
   text-decoration: none;
   font-weight: 600;
   border-radius: 0 0 4px 0;
   z-index: 10000;
-  transition: top 0.3s;
-}
-
-.skip-link:focus {
-  top: 0;
 }
 
 // Enhanced focus styles for keyboard navigation