From 105c6a08d0c94317703c39c1e577e9d38b3e931a Mon Sep 17 00:00:00 2001
From: hannahwestra25 <hannahwestra@microsoft.com>
Date: Mon, 8 Jun 2026 11:28:49 -0400
Subject: [PATCH 1/2] Fix low-contrast link in target config dialogs

Replace raw <a> tags with Fluent UI Link component in
CreateTargetDialog and TargetConfig so the .pyrit_conf_example
link meets contrast requirements in dark theme.

Add test verifying the link renders with the correct role and href.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 frontend/package-lock.json                        |  4 ++--
 .../components/Config/CreateTargetDialog.test.tsx | 15 +++++++++++++++
 .../src/components/Config/CreateTargetDialog.tsx  |  5 +++--
 frontend/src/components/Config/TargetConfig.tsx   |  5 +++--
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 0452eef9db..b2f0086e1e 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "pyrit-frontend",
-  "version": "0.14.0-dev.0",
+  "version": "0.15.0-dev.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pyrit-frontend",
-      "version": "0.14.0-dev.0",
+      "version": "0.15.0-dev.0",
       "dependencies": {
         "@azure/msal-browser": "^5.11.0",
         "@azure/msal-react": "^5.4.2",
diff --git a/frontend/src/components/Config/CreateTargetDialog.test.tsx b/frontend/src/components/Config/CreateTargetDialog.test.tsx
index 21741f6987..69b7b65ab2 100644
--- a/frontend/src/components/Config/CreateTargetDialog.test.tsx
+++ b/frontend/src/components/Config/CreateTargetDialog.test.tsx
@@ -322,6 +322,21 @@ describe("CreateTargetDialog", () => {
     ).toBeInTheDocument();
   });
 
+  it("should render .pyrit_conf_example as an accessible link", () => {
+    render(
+      <TestWrapper>
+        <CreateTargetDialog {...defaultProps} />
+      </TestWrapper>
+    );
+
+    const link = screen.getByRole("link", { name: ".pyrit_conf_example" });
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute(
+      "href",
+      "https://github.com/microsoft/PyRIT/blob/main/.pyrit_conf_example"
+    );
+  });
+
   it("should show field validation errors when submitting form without endpoint", async () => {
     const user = userEvent.setup();
 
diff --git a/frontend/src/components/Config/CreateTargetDialog.tsx b/frontend/src/components/Config/CreateTargetDialog.tsx
index 02f94bb9c4..7cd1e66363 100644
--- a/frontend/src/components/Config/CreateTargetDialog.tsx
+++ b/frontend/src/components/Config/CreateTargetDialog.tsx
@@ -9,6 +9,7 @@ import {
   Button,
   Input,
   Label,
+  Link,
   Radio,
   RadioGroup,
   Select,
@@ -348,9 +349,9 @@ export default function CreateTargetDialog({ open, onClose, onCreated }: CreateT
                 Targets can also be auto-populated by adding an initializer (e.g. <code>airt</code>) to your{' '}
                 <code>~/.pyrit/.pyrit_conf</code> file, which reads endpoints from your <code>.env</code> and{' '}
                 <code>.env.local</code> files. See{' '}
-                <a href="https://github.com/microsoft/PyRIT/blob/main/.pyrit_conf_example" target="_blank" rel="noopener noreferrer">
+                <Link href="https://github.com/microsoft/PyRIT/blob/main/.pyrit_conf_example" target="_blank" inline>
                   .pyrit_conf_example
-                </a>.
+                </Link>.
               </Label>
             </form>
           </DialogContent>
diff --git a/frontend/src/components/Config/TargetConfig.tsx b/frontend/src/components/Config/TargetConfig.tsx
index 1b28a34f69..80e3419c84 100644
--- a/frontend/src/components/Config/TargetConfig.tsx
+++ b/frontend/src/components/Config/TargetConfig.tsx
@@ -3,6 +3,7 @@ import {
   tokens,
   Text,
   Button,
+  Link,
   Spinner,
 } from '@fluentui/react-components'
 import { AddRegular, ArrowSyncRegular } from '@fluentui/react-icons'
@@ -107,9 +108,9 @@ export default function TargetConfig({ activeTarget, onSetActiveTarget }: Target
             to auto-populate targets from your <code>.env</code> and <code>.env.local</code> files.
             For example, add <code>airt</code> to the <code>initializers</code> list to register
             Azure OpenAI targets automatically. See the{' '}
-            <a href="https://github.com/microsoft/PyRIT/blob/main/.pyrit_conf_example" target="_blank" rel="noopener noreferrer">
+            <Link href="https://github.com/microsoft/PyRIT/blob/main/.pyrit_conf_example" target="_blank" inline>
               .pyrit_conf_example
-            </a>{' '}
+            </Link>{' '}
             for details.
           </Text>
           <Button

From 306decc82d3c92822c95f2f1e5f64b07492464e3 Mon Sep 17 00:00:00 2001
From: hannahwestra25 <hannahwestra@microsoft.com>
Date: Mon, 8 Jun 2026 11:41:09 -0400
Subject: [PATCH 2/2] Revert unintended package-lock.json changes

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 frontend/package-lock.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b2f0086e1e..0452eef9db 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "pyrit-frontend",
-  "version": "0.15.0-dev.0",
+  "version": "0.14.0-dev.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pyrit-frontend",
-      "version": "0.15.0-dev.0",
+      "version": "0.14.0-dev.0",
       "dependencies": {
         "@azure/msal-browser": "^5.11.0",
         "@azure/msal-react": "^5.4.2",