fix: a11y scorecard update after PF6 (#4375)

packages/documentation-framework/components/sectionGallery/sectionGalleryLayout.js

@@ -36,55 +36,59 @@ export const SectionGalleryLayout = ({
           isDemo,
           title,
           galleryItemsData,
-        }) => (
-          <GalleryItem span={4} key={idx}>
-            <Card id={id} key={idx} isClickable>
-              <CardHeader
-                selectableActions={{
-                  onClickAction: (e) => {
-                    e.preventDefault();
-                    document.getElementById('ws-page-main').scrollIntoView();
-                    navigate(slug);
-                  },
-                  selectableActionId: `${id}-input`,
-                  selectableActionAriaLabelledby: id,
-                  name: `clickable-card-${idx}`,
-                }}
-              >
-                <CardTitle>{title}</CardTitle>
-              </CardHeader>
-              {(hasGridImages || hasGridText) && (
-                <CardBody>
-                  {hasGridImages && illustration && (
-                    <img src={illustration} alt={`${itemName} illustration`} />
-                  )}
-                  {hasGridText && (
-                    <TextSummary id={id} itemsData={galleryItemsData} />
-                  )}
-                </CardBody>
-              )}
-              {(isBeta || isDeprecated || isDemo) && (
-                <CardFooter>
-                  {isBeta && (
-                    <Label color="blue" isCompact>
-                      Beta
-                    </Label>
-                  )}
-                  {!isBeta && isDeprecated && (
-                    <Label color="grey" isCompact>
-                      Deprecated
-                    </Label>
-                  )}
-                  {!isBeta && !isDeprecated && isDemo && (
-                    <Label color="purple" isCompact>
-                      Demo
-                    </Label>
-                  )}
-                </CardFooter>
-              )}
-            </Card>
-          </GalleryItem>
-        )
+        }) => {
+          const stripped_id = id.replace(/\s+/g, '-');
+
+          return (
+            <GalleryItem span={4} key={idx}>
+              <Card id={stripped_id} key={idx} isClickable>
+                <CardHeader
+                  selectableActions={{
+                    onClickAction: (e) => {
+                      e.preventDefault();
+                      document.getElementById('ws-page-main').scrollIntoView();
+                      navigate(slug);
+                    },
+                    selectableActionId: `${stripped_id}-input`,
+                    selectableActionAriaLabelledby: stripped_id,
+                    name: `clickable-card-${idx}`,
+                  }}
+                >
+                  <CardTitle>{title}</CardTitle>
+                </CardHeader>
+                {(hasGridImages || hasGridText) && (
+                  <CardBody>
+                    {hasGridImages && illustration && (
+                      <img src={illustration} alt={`${itemName} illustration`} />
+                    )}
+                    {hasGridText && (
+                      <TextSummary id={id} itemsData={galleryItemsData} />
+                    )}
+                  </CardBody>
+                )}
+                {(isBeta || isDeprecated || isDemo) && (
+                  <CardFooter>
+                    {isBeta && (
+                      <Label color="blue" isCompact>
+                        Beta
+                      </Label>
+                    )}
+                    {!isBeta && isDeprecated && (
+                      <Label color="grey" isCompact>
+                        Deprecated
+                      </Label>
+                    )}
+                    {!isBeta && !isDeprecated && isDemo && (
+                      <Label color="purple" isCompact>
+                        Demo
+                      </Label>
+                    )}
+                  </CardFooter>
+                )}
+              </Card>
+            </GalleryItem>
+          )
+        }
       )}
     </Gallery>
   );

packages/documentation-framework/pages/404/index.js

@@ -107,7 +107,7 @@ const Page404 = () => {
           body="Visualize your facts and figures by designing the right charts for your data."
           link={{
             text: 'View charts',
-            to: '/charts/about',
+            to: '/charts/about-charts',
           }}
         />
       </Grid>

packages/documentation-site/package.json

@@ -17,7 +17,7 @@
     "screenshots": "pf-docs-framework screenshots"
   },
   "dependencies": {
-    "@patternfly/documentation-framework": "6.0.1",
+    "@patternfly/documentation-framework": "6.0.6",
     "@patternfly/react-catalog-view-extension": "6.0.0",
     "@patternfly/react-console": "6.0.0",
     "@patternfly/react-docs": "7.0.0",
@@ -34,12 +34,24 @@
     "showdown": "^2.1.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly-a11y": "4.3.1",
+    "@patternfly/patternfly-a11y": "5.0.0",
     "fs-extra": "^11.1.0",
     "glob": "^8.1.0",
     "react-jss": "^10.9.2",
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
-    "classnames": "^2.2.5"
+    "classnames": "^2.2.5",
+    "victory-core": "^37.1.1",
+    "victory-scatter": "^37.1.1",
+    "victory-pie": "^37.1.1",
+    "victory-stack": "^37.1.1",
+    "victory-legend": "^37.1.1",
+    "victory-line": "^37.1.1",
+    "victory-group": "^37.1.1",
+    "victory-voronoi-container": "^37.1.1",
+    "victory-create-container": "^37.1.1",
+    "victory-cursor-container": "^37.1.1",
+    "victory-tooltip": "^37.1.1",
+    "victory-bar": "^37.1.1"
   }
 }

packages/documentation-site/patternfly-a11y.config.js

@@ -54,7 +54,7 @@ module.exports = {
       viewportDimensions: {width: 400, height: 900},
     },
     {
-      url: '/components/table/react-legacy',
+      url: '/components/table/react-deprecated',
       crawl: false,
       label: 'legacy table content on mobile screen',
       viewportDimensions: {width: 400, height: 900},
@@ -67,5 +67,5 @@ module.exports = {
     }
   ],
   ignoreIncomplete: true,
-  skip: '(mailto)|(/(react|react-next|react-demos|react-deprecated|html|html-demos)/.+)|(/react$)'
+  skip: '(mailto)|(/(react|react-next|react-demos|react-deprecated|react-templates|html|html-demos)/.+)|(/react$)'
 };

packages/documentation-site/patternfly-docs/content/accessibility/alert/alert.md

@@ -9,7 +9,7 @@ import { Checkbox, List, ListItem } from '@patternfly/react-core';
 
 To implement an accessible PatternFly **alert** and **alert group**:
 
-- Add an [alert group](/components/alert-group) for an alert to be rendered inside of if you intend or expect the alert to dynamically appear or update, such as a toast alert. Be sure to read the [alert group accessibility](/components/alert-group/accessibility) documentation to use it and the alert component together in an accessible manner.
+- Add an [alert group](/components/alert#alert-group-examples) for an alert to be rendered inside of if you intend or expect the alert to dynamically appear or update, such as a toast alert. Be sure to read the [alert group accessibility](/components/alert/accessibility) documentation to use it and the alert component together in an accessible manner.
 - Ensure the alert group exists in the DOM on page load when one is intended or expected to be rendered.
 - If the alert does not contain a description below the alert's title, then the alert's title should be a non-heading element such as a `span` or `div`.
 - If the alert contains a description below the alert's title, then the alert's title should be a heading element. Headings should be ordered by their level and heading levels should not be skipped. For example, a heading of an `h2` level should not be followed directly by an `h4`.
@@ -66,7 +66,7 @@ The following React props have been provided for more fine-tuned control over ac
 |---|---|---|
 | `isLiveRegion` | `AlertGroup` | Makes the alert group a live region by setting `aria-live="polite"` and `aria-atomic="false"`. Instead of passing this prop in, you can manually set `aria-live` and `aria-atomic` by passing them in individually. Pass this prop in if you intend or expect the contents of the alert group to be dynamically updated. |
 | `isToast` | `AlertGroup` | Adds styling to position alerts in the top-right corner of the viewport. When passing this prop in, the `isLiveRegion` prop must also be passed in. For more information about accessibility with toast alerts, read the [toast alerts](/components/alert/accessibility#toast-alerts) section of the alert accessibility tab. |
-| `overflowMessage="[text to display for the overflow message]"` | `AlertGroup` | When functionality is added for overflowing alerts, this prop adds a custom message for the hidden overflow. When passing this prop in, the message should include how many alerts are currently within the overflow and should update as alerts are added or removed. This will allow users of assistive technologies to be notified when an alert is added to the overflow, as otherwise the addition of the alert and the alert contents itself will not be announced to them. <br/><br/> When passing this prop in, the `isLiveRegion` prop must also be passed in. For more information about alert overflow, read [alert group - managing overflow](/components/alert-group). |
+| `overflowMessage="[text to display for the overflow message]"` | `AlertGroup` | When functionality is added for overflowing alerts, this prop adds a custom message for the hidden overflow. When passing this prop in, the message should include how many alerts are currently within the overflow and should update as alerts are added or removed. This will allow users of assistive technologies to be notified when an alert is added to the overflow, as otherwise the addition of the alert and the alert contents itself will not be announced to them. <br/><br/> When passing this prop in, the `isLiveRegion` prop must also be passed in. For more information about alert overflow, read [alert group - managing overflow](/components/alert#alert-group-examples). |
 
 ## HTML/CSS customization
 

packages/documentation-site/patternfly-docs/content/accessibility/card/card.md

@@ -35,7 +35,7 @@ At a minimum, a card should meet the following criteria:
     <Checkbox id="card-a11y-checkbox-5" label={<span>If there's no surrounding context, a card list container has its own accessible name via the <code className="ws-code">aria-label</code> attribute.</span>} description="An example of surrounding context would be a heading element that directly precedes the group of cards." />
   </ListItem>
   <ListItem>
-    <Checkbox id="card-a11y-checkbox-6" label={<span>If building a single-selectable card for a <Link href="/demos/primary-detail">primary detail view</Link>, the card has an associated hidden checkbox input.</span>} description={<span>This notifies users navigating via screen readers and similar assistive technologies that a checkbox can be selected and of its current selected status. See the <Link href="/components/card#selectable-card-accessibility-features">React selectable card accessibility features example</Link> or <Link href="/components/card/html#selectable-with-a-hidden-input-for-improved-screen-reader-accessibility">HTML selectable with hidden input example</Link> for implementation information.</span>} />
+    <Checkbox id="card-a11y-checkbox-6" label={<span>If building a single-selectable card for a <Link href="/patterns/primary-detail">primary detail view</Link>, the card has an associated hidden checkbox input.</span>} description={<span>This notifies users navigating via screen readers and similar assistive technologies that a checkbox can be selected and of its current selected status. See the <Link href="/components/card#selectable-card-accessibility-features">React selectable card accessibility features example</Link> or <Link href="/components/card/html#selectable-with-a-hidden-input-for-improved-screen-reader-accessibility">HTML selectable with hidden input example</Link> for implementation information.</span>} />
   </ListItem>
 </List>
 
@@ -47,7 +47,7 @@ The following React props have been provided for more fine-tuned control over ac
 |---|---|---|
 | `aria-label="[text that labels the card]"` or `aria-labelledby="[id of the element that labels the card]"` | `Card` | Adds an accessible name to the card. If the card has a `CardTitle`, the `aria-labelledby` prop should be passed in with a value of the `CardTitle`'s `id` prop. Otherwise the `aria-label` prop should be passed in to act as a title for the card. |
 | `component="[element tag]"` | `Card` | Sets the base element for the sub-component (`div` element by default). <br/><br/> When using `div` as the component, the `aria-label` and `aria-labelledby` props should be omitted as these props are not well supported on `div` elements without a `role`. |
-| `hasSelectableInput` | `Card` | Adds a visually hidden input that notifies users navigating via assistive technologies that a card is selectable. This prop should only be passed in when only one card within a set of cards should be selectable at a time, such as for a [primary-detail view](/demos/primary-detail). <br/><br/> When this prop is passed in, either a `CardTitle` sub-component must exist in the card, or the `selectableInputAriaLabel` prop must be passed in. The hidden input will automatically be given an accessible name when a `CardTitle` exists within the card, otherwise the value given to the `selectableInputAriaLabel` prop will add an accessible name to the input. |
+| `hasSelectableInput` | `Card` | Adds a visually hidden input that notifies users navigating via assistive technologies that a card is selectable. This prop should only be passed in when only one card within a set of cards should be selectable at a time, such as for a [primary-detail view](/patterns/primary-detail). <br/><br/> When this prop is passed in, either a `CardTitle` sub-component must exist in the card, or the `selectableInputAriaLabel` prop must be passed in. The hidden input will automatically be given an accessible name when a `CardTitle` exists within the card, otherwise the value given to the `selectableInputAriaLabel` prop will add an accessible name to the input. |
 | `isDisabledRaised` | `Card` | Adds styling to visually indicate that a selectable card is disabled. When the `hasSelectableInput` prop is passed in, this prop will also set the selectable input's `disabled` attribute. |
 | `isExpanded` | `Card` | Adds styling to a card toggle to visually indicate whether the expandable content is expanded or collapsed. When this prop is passed in, `onExpand` and `toggleButtonsProps` must be passed into the `CardHeader` sub-component. |
 | `isSelectable` or `isSelectableRaised` | `Card` | Adds styling on hover or focus to visually indicate that a card is selectable, and adds the `tabindex="0"` attribute so that the card can be navigated to with standard keyboard navigation. |

packages/documentation-site/patternfly-docs/content/design-guidelines/components/button/button.md

@@ -255,7 +255,7 @@ When writing button labels:
 
 ### Writing link labels
 
-Use specific, action-focused labels that match what the user will see when they arrive at their location. For example, if you are sending a user to a dashboard, your link label might read _View dashboard_. For a link directing a user to a support forum, the label might read _Get help in the support forum_. See [PatternFly's content guidelines](/ux-writing/about) for additional guidance.
+Use specific, action-focused labels that match what the user will see when they arrive at their location. For example, if you are sending a user to a dashboard, your link label might read _View dashboard_. For a link directing a user to a support forum, the label might read _Get help in the support forum_. See [PatternFly's content guidelines](/ux-writing/about-ux-writing) for additional guidance.
 
 ## Accessibility 
 

packages/documentation-site/patternfly-docs/content/design-guidelines/components/checkbox/checkbox.md

@@ -15,7 +15,7 @@ You can also use a single checkbox to allow a user to enable or disable a featur
 
 ### When to use
 
-* Use checkboxes if you’re presenting 5 or fewer options to the user. If you’re presenting more than 5 options, use a [select list](/components/select/design-guidelines) instead.
+* Use checkboxes if you’re presenting 5 or fewer options to the user. If you’re presenting more than 5 options, use a [select list](/components/menus/select/design-guidelines) instead.
 * Use checkboxes if the user can select multiple options. If the user can only select 1 option, then use radio buttons. 
 
 

packages/documentation-site/patternfly-docs/content/design-guidelines/components/drawer/drawer.md

@@ -7,7 +7,7 @@ section: components
 
 Drawers can be used to store and show more information than immediately presented on a page. A drawer with more information is usually prompted by a user click. Upon the click, the drawer comes out and shows more information, which is usually relevant to a whole page.
 
-Drawers appear as a sliding panel that can be attached to the bottom or right edge of a window. They’re commonly used in a [primary-detail](/demos/primary-detail), which is a layout that uses a drawer for details and spans the height of the primary content. The primary content can be placed in any container, and the details drawer will span the height of that container. The drawer component is used for the details because it's common for the "detail" in primary-detail to be toggled open/close, while the primary content should always be present on the screen. For a primary-detail in a card, the details section is still built with a drawer component even when it's not collapsible.
+Drawers appear as a sliding panel that can be attached to the bottom or right edge of a window. They’re commonly used in a [primary-detail](/patterns/primary-detail), which is a layout that uses a drawer for details and spans the height of the primary content. The primary content can be placed in any container, and the details drawer will span the height of that container. The drawer component is used for the details because it's common for the "detail" in primary-detail to be toggled open/close, while the primary content should always be present on the screen. For a primary-detail in a card, the details section is still built with a drawer component even when it's not collapsible.
 
 In addition to primary-details, the drawer component is frequently used in [notification drawers](/components/notification-drawer) or terminal windows.
 

packages/documentation-site/patternfly-docs/content/design-guidelines/components/dropdown/dropdown.md

@@ -12,7 +12,7 @@ A basic dropdown consists of a toggle control to open and close a menu of action
 
 1. **Toggle:** The toggle is used to open and close the menu. It takes on all of the behaviors of a button. The toggle label is used to name the menu and should be descriptive of the actions that it contains. If no more descriptive name makes sense, use “Actions” as a default name.
 
-2. **Menu:** The menu contains a list of actions or links. Menus should optimally contain seven (7) or less items for easy scanning by the user. For longer menus, items may be grouped. See the [menu component guidelines](/components/menu/design-guidelines) for more information about supported options, including use of icons, grouping, and descriptions. The Dropdown component includes many common built-in menu variants. It’s also possible to attach a custom menu by using the [basic panel variant](/components/dropdown#basic-panel).
+2. **Menu:** The menu contains a list of actions or links. Menus should optimally contain seven (7) or less items for easy scanning by the user. For longer menus, items may be grouped. See the [menu component guidelines](/components/menus/menu/design-guidelines) for more information about supported options, including use of icons, grouping, and descriptions. The Dropdown component includes many common built-in menu variants. It’s also possible to attach a custom menu by using the [basic panel variant](/components/menus/dropdown#basic-panel).
 
 ## Variations
 In addition to the basic dropdown shown above, you may apply the following variants to the dropdown toggle element.

packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/forms.md

@@ -83,7 +83,7 @@ Use [checkboxes](/components/forms/checkbox/design-guidelines) to enable users t
 
 #### Select lists
 
-Use a [select list](/components/select/design-guidelines) to enable users to select 1 or more options from a list of more than 5 items.
+Use a [select list](/components/menus/select/design-guidelines) to enable users to select 1 or more options from a list of more than 5 items.
 
 #### Data input arrangement