From e23e1b3f7b5cd4ef269ff77f9f6ac6b64556bae2 Mon Sep 17 00:00:00 2001
From: Ariella Gilmore <ariellalgilmore@gmail.com>
Date: Tue, 10 Sep 2024 08:02:35 -0600
Subject: [PATCH] feat(ai-label): add overview image & accessibility table
 (#4247)

* feat(ai-label): add overview image & accessibility table

* fix(ai-label): move accessibility section

* fix(ai-label) add to usage
---
 .../ComponentOverview/images/AI label.svg           |  5 +++++
 src/data/components.json                            | 13 ++++++-------
 src/pages/components/ai-label/accessibility.mdx     |  4 ++++
 src/pages/components/ai-label/usage.mdx             |  2 ++
 4 files changed, 17 insertions(+), 7 deletions(-)
 create mode 100644 src/components/ComponentOverview/images/AI label.svg

diff --git a/src/components/ComponentOverview/images/AI label.svg b/src/components/ComponentOverview/images/AI label.svg
new file mode 100644
index 00000000000..de42354e723
--- /dev/null
+++ b/src/components/ComponentOverview/images/AI label.svg	
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="640" height="640">
+<path d="M0 0 C42.24 0 84.48 0 128 0 C128 42.24 128 84.48 128 128 C85.76 128 43.52 128 0 128 C0 85.76 0 43.52 0 0 Z M2 2 C2 42.92 2 83.84 2 126 C42.92 126 83.84 126 126 126 C126 85.08 126 44.16 126 2 C85.08 2 44.16 2 2 2 Z " fill="#161616" transform="translate(256,256)"/>
+<path d="M0 0 C2.64 0 5.28 0 8 0 C10.97 9.24 13.94 18.48 17 28 C14.69 28 12.38 28 10 28 C9.34 25.69 8.68 23.38 8 21 C5.03 21 2.06 21 -1 21 C-1.66 23.31 -2.32 25.62 -3 28 C-4.98 28 -6.96 28 -9 28 C-7.6893114 21.668171 -6.01923958 15.61859223 -3.9375 9.5 C-3.5343457 8.28570312 -3.5343457 8.28570312 -3.12304688 7.046875 C-1.13384956 1.13384956 -1.13384956 1.13384956 0 0 Z M3 6 C1.68373308 9.61973402 1 12.09567131 1 16 C2.65 16 4.3 16 6 16 C5.34 12.7 4.68 9.4 4 6 C3.67 6 3.34 6 3 6 Z " fill="#161616" transform="translate(308,306)"/>
+<path d="M0 0 C4.29 0 8.58 0 13 0 C13 1.65 13 3.3 13 5 C11.68 5 10.36 5 9 5 C9 10.94 9 16.88 9 23 C10.32 23 11.64 23 13 23 C13 24.65 13 26.3 13 28 C8.71 28 4.42 28 0 28 C0 26.35 0 24.7 0 23 C0.99 23 1.98 23 3 23 C3 17.06 3 11.12 3 5 C2.01 5 1.02 5 0 5 C0 3.35 0 1.7 0 0 Z " fill="#161616" transform="translate(327,306)"/>
+</svg>
\ No newline at end of file
diff --git a/src/data/components.json b/src/data/components.json
index 78f11a99359..fa77794755d 100644
--- a/src/data/components.json
+++ b/src/data/components.json
@@ -6,6 +6,12 @@
         "screenreader": "manual"
       }
     },
+    {
+      "component": "AI label",
+      "testing": {
+        "screenreader": "manual"
+      }
+    },
     {
       "component": "Aspect ratio",
       "overview": false,
@@ -400,13 +406,6 @@
         "screenreader": "manual"
       }
     },
-    {
-      "component": "Slug",
-      "overview": false,
-      "testing": {
-        "screenreader": false
-      }
-    },
     {
       "component": "Structured list",
       "testing": {
diff --git a/src/pages/components/ai-label/accessibility.mdx b/src/pages/components/ai-label/accessibility.mdx
index 346c6748267..0f1d5a2583d 100755
--- a/src/pages/components/ai-label/accessibility.mdx
+++ b/src/pages/components/ai-label/accessibility.mdx
@@ -4,6 +4,8 @@ description: The AI label indicates an instance of AI in the UI.
 tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
+import A11yStatus from 'components/A11yStatus';
+
 <PageDescription>
 
 No accessibility annotations are needed for AI labels, but keep these
@@ -89,3 +91,5 @@ custom component.
 - The icon button has `aria-label="AI - Show information"`.
 - The button uses `aria-expanded` to set toggletip visibility and
   `aria-controls` to handle navigation to the content.
+
+<A11yStatus layout="table" components="AI label" />
diff --git a/src/pages/components/ai-label/usage.mdx b/src/pages/components/ai-label/usage.mdx
index 885d4c97d50..784df01643d 100755
--- a/src/pages/components/ai-label/usage.mdx
+++ b/src/pages/components/ai-label/usage.mdx
@@ -53,6 +53,8 @@ been changed to better reflect its usage.
   ]}
 />
 
+<A11yStatus layout="cards" components="AI label" />
+
 ## Overview
 
 The AI label is more than just an indicator of AI instances in the UI. It’s also