chore(docs): run a11y report, add menu for toggling reports

a11y-report-card/accessibility-report.md

@@ -2,6 +2,7 @@
 
 This report runs the [patternfly-a11y](https://github.com/patternfly/patternfly-a11y) tool, which is built using [axe-core](https://github.com/dequelabs/axe-core).
 It checks PatternFly.org's accessibility by running the automated testing on the following pages:
+
 - The home page at a desktop viewport width with the sidebar nav open
 - The home page at a desktop viewport width with the sidebar nav closed
 - The home page at a mobile viewport width with the sidebar nav open
@@ -10,37 +11,58 @@ It checks PatternFly.org's accessibility by running the automated testing on the
 - Crawls the multiple tabs under each component's documentation pages
 - The composable table, legacy table, and html table document pages a second time at a mobile viewport width
 
-## Original report run May 16, 2022
-[View full report](https://pf-a11y_5-16-22.surge.sh)
-### Summary
-- Tested URLs: 490
-- Pass: 118
-- Fail: 372
-- Pass rate: 24.08%
-- Accessibility issues: 1066
+## Original report run January 18, 2024
 
-## Report run on May 17th, 2022
-[View full report](https://pf-a11y_5-17-22.surge.sh)
-### Summary
-- Tested URLs: 491
-- Pass: 118
-- Fail: 373
-- Pass rate: 24.03%
-- Accessibility issues: 1053
+[View full report](https://pf-a11y_1-18-24.surge.sh/)
 
-Using the results from this report, [patternfly-org/issues/2920](https://github.com/patternfly/patternfly-org/issues/2920)
-was opened to track the accessibility issues reported.
+### Summary 1/18/24
+
+- Tested URLs: 534
+- Pass: 527
+- Fail: 7
+- Pass rate: 98.69%
+- Accessibility issues: 23
 
 ## Report run on June 3rd, 2022
+
 [View full report](https://pf-a11y_6-3-22.surge.sh)
 
-### Summary
+### Summary 6/3/22
+
 - Tested URLs: 491
 - Pass: 398
 - Fail: 93
 - Pass rate: 81.06%
 - Accessibility issues: 538
 
 Over 500 reported accessibility issues were resolved by closing the following two github issues:
+
 - [patternfly-org/issues/2969](https://github.com/patternfly/patternfly-org/issues/2969)
-- [patternfly-org/issues/2968](https://github.com/patternfly/patternfly-org/issues/2968)
+- [patternfly-org/issues/2968](https://github.com/patternfly/patternfly-org/issues/2968)
+
+## Report run on May 17th, 2022
+
+[View full report](https://pf-a11y_5-17-22.surge.sh)
+
+### Summary 5/17/22
+
+- Tested URLs: 491
+- Pass: 118
+- Fail: 373
+- Pass rate: 24.03%
+- Accessibility issues: 1053
+
+Using the results from this report, [patternfly-org/issues/2920](https://github.com/patternfly/patternfly-org/issues/2920)
+was opened to track the accessibility issues reported.
+
+## Original report run May 16, 2022
+
+[View full report](https://pf-a11y_5-16-22.surge.sh)
+
+### Summary 5/6/22
+
+- Tested URLs: 490
+- Pass: 118
+- Fail: 372
+- Pass rate: 24.08%
+- Accessibility issues: 1066

packages/documentation-site/patternfly-docs/content/developer-resources/a11y-scores.js

@@ -1,6 +1,79 @@
 import React from 'react';
 
 export const a11yScores = [
+  {
+    'Jan 18, 2024': [
+      {
+        criteria: 'Preliminary accessibility report generated using axe-core based tooling.',
+        status: '✅',
+        notes: (
+          <>
+            <a href="https://pf-a11y_5-16-22.surge.sh/">Initial report (May 16th, 2022)</a>
+            <p>1066 violations found</p>
+          </>
+        )
+      },
+      {
+        criteria: 'Manual keyboard and screen reader testing conducted.',
+        status: '--',
+        notes: ''
+      },
+      {
+        criteria: `Accessibility violations in product itemized and prioritized. Notes should indicate how violations 
+        were identified - i.e. via generated report and/or manual testing.`,
+        status: '✅',
+        notes: (
+          <>
+            <a href="https://github.com/patternfly/patternfly-org/issues/2920">patternfly/patternfly-org issue #2920</a>
+            <p>Will be updated once keyboard/screen reader testing conducted</p>
+          </>
+        )
+      },
+      {
+        criteria: 'Critical and major accessibility violations identified in item #3 resolved (%).',
+        status: '98%',
+        notes: (
+          <>
+            <a href="https://pf-a11y_1-18-24.surge.sh/">Latest generated report (Jan 18, 2024)</a>
+            <p>23 violations remaining</p>
+          </>
+        )
+      },
+      {
+        criteria: `Automated accessibility checks added to pull request or equivalent code acceptance criteria.`,
+        status: '--',
+        notes: ''
+      },
+      {
+        criteria: 'Manual keyboard and screen reader accessibility checks added to pull request or equivalent code acceptance criteria.',
+        status: '✅',
+        notes: `Accessibility devs identified and tagged on relevant PRs to manually review screen reader and keyboard interactions`
+      },
+      {
+        criteria: <>CI/CD Process established to track accessibility violations/regressions. CI/CD process could be wired up to use <a href="https://www.deque.com/axe/">https://www.deque.com/axe/</a> or the patternfly-a11y tool (also built using axe)</>,
+        status: '--',
+        notes: <>Report <a href="https://github.com/patternfly/patternfly-org/blob/main/packages/v4/patternfly-a11y.config.js">configuration</a> created, needs to be hooked into CI/CD</>
+      },
+      {
+        criteria: `Website built with PatternFly React components. Could note alternate design systems/component 
+        libraries along with reference to their accessibility docs.`,
+        status: '✅',
+        notes: ''
+      },
+      {
+        criteria: 'PatternFly React is up to date with the latest release',
+        status: '✅',
+        notes: `Current versions:
+        "@patternfly/patternfly": ">=5.1",
+        "@patternfly/react-core": ">=5.1"`
+      },
+      {
+        criteria: 'User testing conducted (Extra credit 🌟)',
+        status: '--',
+        notes: ''
+      }
+    ]
+  },
   {
     'Nov 21, 2022': [
       {

packages/documentation-site/patternfly-docs/content/developer-resources/accessibility-scorecard.js

@@ -1,38 +1,83 @@
 import React from 'react';
+import { Menu, MenuContainer, MenuToggle, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
 import { Table, Caption, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import { a11yScores } from './a11y-scores';
 import { capitalize } from '@patternfly/documentation-framework/helpers/capitalize';
 
 export const AccessibilityScorecard = () => {
   const columnNames = ['criteria', 'status', 'notes'];
+  const toggleRef = React.useRef(null);
+  const menuRef = React.useRef(null);
+  const reportDates = a11yScores.reduce((acc, cur) => [...acc, Object.keys(cur)[0]], []);
+  const [isToggleOpen, setIsToggleOpen] = React.useState(false);
+  const [selectedReportIndex, setSelectedReportIndex] = React.useState(0);
+  // Get selected report based on index above
+  const [reportDate, reportData] = Object.entries(a11yScores[selectedReportIndex])[0];
+
+  const onSelect = (_event, itemId) => {
+    setSelectedReportIndex(itemId);
+    setIsToggleOpen(false);
+  };
 
-  // Get latest report data
-  const latestReport = Object.entries(a11yScores[0])[0];
-  const [reportDate, reportData] = latestReport;
+  const onToggleClick = () => {
+    setIsToggleOpen(!isToggleOpen);
+  };
 
-  return (
-    <Table aria-label="PatternFly.org accessibility scorecard">
-      <Caption>Report generated {reportDate}</Caption>
-      <Thead>
-        <Tr>
-          {columnNames.map(columnName => (
-            <Th key={columnName}>
-              {capitalize(columnName)}
-            </Th>
+  const toggle = (
+    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isToggleOpen}>
+      Select report date
+    </MenuToggle>
+  )
+
+  const menu = (
+    <Menu ref={menuRef} role="listbox" onSelect={onSelect} selected={selectedReportIndex}>
+      <MenuContent>
+        <MenuList aria-label="Accessibility reports by date">
+          {reportDates.map((reportDate, idx) => (
+            <MenuItem itemId={idx}>{reportDate}</MenuItem> 
           ))}
-        </Tr>
-      </Thead>
-      <Tbody>
-        {reportData.map((row, idx) => (
-          <Tr key={`${reportDate}-row${idx}`}>
+        </MenuList>
+      </MenuContent>
+    </Menu>
+  );
+
+  return (
+    <>
+      <MenuContainer
+        isOpen={isToggleOpen}
+        onOpenChange={(isToggleOpen) => setIsToggleOpen(isToggleOpen)}
+        menu={menu}
+        menuRef={menuRef}
+        toggle={toggle}
+        toggleRef={toggleRef}
+      />
+      <Table aria-label="PatternFly.org accessibility scorecard">
+        <Caption>Report generated {reportDate}</Caption>
+        <Thead>
+          <Tr>
             {columnNames.map(columnName => (
-              <Td key={`${reportDate}-row${idx}-${columnName}`} dataLabel={columnName}>
-                {row[columnName]}
-              </Td>
+              <Th key={columnName}>
+                {capitalize(columnName)}
+              </Th>
             ))}
           </Tr>
-        ))}
-      </Tbody>
-    </Table>
+        </Thead>
+        <Tbody>
+          {reportData.map((row, idx) => (
+            <Tr key={`${reportDate}-row${idx}`}>
+              {columnNames.map(columnName => (
+                <Td key={`${reportDate}-row${idx}-${columnName}`} dataLabel={columnName}>
+                  {row[columnName]}
+                </Td>
+              ))}
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </>
   );
 };
+
+
+
+