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

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": {

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" />

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