feat: add screenreader data and tag style fixes

src/components/A11yStatus/A11yStatus.js

@@ -66,11 +66,31 @@ class A11yStatus extends React.Component {
                     .replace(' ', '-')}/usage`;
                 }
 
+                const screenReaderAVT =
+                  componentList.components[component].testing.screenreader;
+                let screenReaderAVTTag;
+                switch (screenReaderAVT) {
+                  case 'manual':
+                    screenReaderAVTTag = ManuallyTestedTag;
+                    break;
+                  case 'partial':
+                    screenReaderAVTTag = PartiallyTestedTag;
+                    break;
+                  case 'nottested':
+                    screenReaderAVTTag = NotTestedTag;
+                    break;
+                  default:
+                    screenReaderAVTTag = NotTestedTag;
+                }
+
                 let hasDefaultAVT = false;
-                let hasComplexAVT = false;
+                // let hasDefaultAVTPartial = false;
+
+                let hasAdvancedAVT = false;
+                // let hasAdvancedAVTPartial = false;
+
                 let hasKeyboardNavAVT = false;
-                let hasDefaultAVTManual = false;
-                let hasDefaultAVTPartial = false;
+                // let hasKeyboardNavA VTPartial = false;
 
                 if (componentTestData) {
                   // Iterate through all specs in the suite, and all tags in
@@ -85,7 +105,7 @@ class A11yStatus extends React.Component {
                     });
                   });
 
-                  hasComplexAVT = componentTestData.suites.some((suite) => {
+                  hasAdvancedAVT = componentTestData.suites.some((suite) => {
                     return suite.specs.some((spec) => {
                       return spec.tags.some((tag) => {
                         return tag.includes('avt-advanced-states');
@@ -102,32 +122,22 @@ class A11yStatus extends React.Component {
                   });
                 }
 
-                console.log('hasDefaultAVT', hasDefaultAVT);
-
                 return (
                   <>
                     <tr key={`avt-tests-${componentName}`}>
                       <td>
                         <a href={componentUrl}>{componentName}</a>
                       </td>
                       <td>Default state</td>
-                      <td>
-                        {hasDefaultAVT
-                          ? TestedTag
-                          : hasDefaultAVTManual
-                          ? ManuallyTestedTag
-                          : hasDefaultAVTPartial
-                          ? PartiallyTestedTag
-                          : NotTestedTag}
-                      </td>
+                      <td>{hasDefaultAVT ? TestedTag : NotTestedTag}</td>
                       <td>
                         <a href={githubUrl}>Github link</a>
                       </td>
                     </tr>
                     <tr>
                       <td></td>
                       <td>Advanced states</td>
-                      <td>{hasComplexAVT ? TestedTag : NotTestedTag}</td>
+                      <td>{hasAdvancedAVT ? TestedTag : NotTestedTag}</td>
                       <td></td>
                     </tr>
                     <tr>
@@ -139,7 +149,7 @@ class A11yStatus extends React.Component {
                     <tr>
                       <td></td>
                       <td>Screen reader</td>
-                      <td></td>
+                      <td>{screenReaderAVTTag}</td>
                       <td></td>
                     </tr>
                   </>

src/components/A11yStatus/a11y-status.module.scss

@@ -4,4 +4,10 @@
 
 :global(.page-table .cds--tag) {
   margin-left: 0;
+  white-space: nowrap;
+
+  span {
+    //override to fix alignment issue with variable font
+    padding-top: 2px;
+  }
 }

src/data/components.json

@@ -1,124 +1,244 @@
 {
   "components": [
     {
-      "component": "Accordion"
+      "component": "Accordion",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Breadcrumb"
+      "component": "Breadcrumb",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Button"
+      "component": "Button",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Checkbox"
+      "component": "Checkbox",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Code snippet"
+      "component": "Code snippet",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Contained list"
+      "component": "Contained list",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Content switcher"
+      "component": "Content switcher",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Data table"
+      "component": "Data table",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Date picker"
+      "component": "Date picker",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Dropdown"
+      "component": "Dropdown",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "File uploader"
+      "component": "File uploader",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Form"
+      "component": "Form",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Inline loading"
+      "component": "Inline loading",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Link"
+      "component": "Link",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "List"
+      "component": "List",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Loading"
+      "component": "Loading",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Menu"
+      "component": "Menu",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Menu buttons"
+      "component": "Menu buttons",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Modal"
+      "component": "Modal",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Multiselect"
+      "component": "Multiselect",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Notification"
+      "component": "Notification",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Number input"
+      "component": "Number input",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Pagination"
+      "component": "Pagination",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Popover"
+      "component": "Popover",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Progress bar"
+      "component": "Progress bar",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Progress indicator"
+      "component": "Progress indicator",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Radio button"
+      "component": "Radio button",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Search"
+      "component": "Search",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Select"
+      "component": "Select",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Slider"
+      "component": "Slider",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Structured list"
+      "component": "Structured list",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Tabs"
+      "component": "Tabs",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Tag"
+      "component": "Tag",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Text input"
+      "component": "Text input",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Tile"
+      "component": "Tile",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Toggle"
+      "component": "Toggle",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Toggletip"
+      "component": "Toggletip",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Tooltip"
+      "component": "Tooltip",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "Treeview"
+      "component": "Treeview",
+      "testing": {
+        "screenreader": "manual"
+      }
     },
     {
-      "component": "UI shell"
+      "component": "UI shell",
+      "testing": {
+        "screenreader": "manual"
+      }
     }
   ]
 }