chore(docs): updated standards to wcag 22 (#4762)

* chore(docs): updated standards to wcag 22

* Added new guidelines from wcag 22

* Added missing cells

* Verbiage updates from Erin

---------

Co-authored-by: Eric Olkowski <[email protected]>

Author: thatblindgeye

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

@@ -145,4 +145,4 @@ You can further customize the way assistive technologies announce the contents o
 To read more about accessibility with alerts and alert groups, refer to the following resources:
 
 - [ARIA Authoring Practices Guide - Alerts](https://www.w3.org/WAI/ARIA/apg/patterns/alert/)
-- [WCAG 2.0 success criterion 2.2.3 - no timing](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-no-exceptions.html), if intending to use alerts that automatically get dismissed
+- [Understanding Success Criterion 2.2.3: No Timing (Level AAA)](https://www.w3.org/WAI/WCAG22/Understanding/no-timing.html), if intending to use alerts that automatically get dismissed

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

@@ -49,5 +49,5 @@ The following HTML attributes and PatternFly classes can be used for more fine-t
 
 To read more about accessibility with a brand, refer to the following resources:
 
-- [WCAG 1.1: Text Alternatives](https://www.w3.org/TR/WCAG21/#text-alternatives)
+- [WCAG 1.1: Text Alternatives](https://www.w3.org/TR/WCAG22/#text-alternatives)
 - [Alternative text](https://webaim.org/techniques/alttext/) by WebAIM

packages/documentation-site/patternfly-docs/content/design-guidelines/content/writing-for-all-audiences.md

@@ -6,7 +6,7 @@ section: UX writing
 By following accessibility and global writing best practices, you’ll be better equipped to create product experiences for users of all abilities and backgrounds. 
 
 ## Writing for all abilities 
-When designing interfaces, consider all users’ abilities, including physical and cognitive. Use words that are clear, concise, and consistent. Refer to the [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/TR/WCAG21/) for accessibility compliance information. 
+When designing interfaces, consider all users’ abilities, including physical and cognitive. Use words that are clear, concise, and consistent. Refer to the [Web Content Accessibility Guidelines (WCAG) 2.2 Guidelines](https://www.w3.org/TR/WCAG22/) for accessibility compliance information. 
 
 To create accessible content, refer to the following best practices: 
 

packages/documentation-site/patternfly-docs/content/design-guidelines/styles/colors/colors.md

@@ -186,7 +186,7 @@ Status and state colors are indicators that communicate data and actions to user
 
 ## Contrast ratios
 
-[Our goal](/accessibility/patternflys-accessibility/) is for PatternFly to meet [level AA requirements in the Web Content Accessibility Guidelines 2.1](https://www.w3.org/WAI/standards-guidelines/wcag/new-in-21/). To achieve level AA accessibility, your UI contrast ratios must be at or above 4.5:1 for normal text, 3:1 for large text, and 3:1 for graphics and other UI components. Additionally, on hover, link text color should have ample contrast from both the background color and the default state link color.
+[Our accessibility standards](/accessibility/patternflys-accessibility#accessibility-standards) are [level AA in the Web Content Accessibility Guidelines 2.2](https://www.w3.org/WAI/WCAG22/quickref/?versions=2.2&currentsidebar=%23col_customize&levels=aaa). To achieve level AA accessibility, your UI contrast ratios must be at or above 4.5:1 for normal text, 3:1 for large text, and 3:1 for graphics and other UI components. Additionally, on hover, link text color should have ample contrast from both the background color and the default state link color.
 
 To check the contrast between background and text colors, use a <a href="https://color.a11y.com/?wc3" target="_blank" className="pf-m-link">WCAG AA-compliance tool.</a>
 

packages/documentation-site/patternfly-docs/content/developer-resources/about-accessibility.md

@@ -87,7 +87,7 @@ To help you achieve this, consider these guidelines:
   - Don’t show interactive elements on hover. 
   - Interactive elements that display in a pop-up must also display on click, touch, or enter-key events.
 
-- Screen reader content should match visibly rendered content (refer to the [first note for `aria-hidden` state](https://www.w3.org/TR/wai-aria/#aria-hidden)).
+- Screen reader content should match visibly rendered content (refer to the [first note for `aria-hidden` state](https://www.w3.org/TR/wai-aria/#h-note-59), but keep in mind this references an older version of WCAG guidelines).
 
 - There should be parity between hover and focus events. Any information that’s available on hover for the mouse user should be available on keyboard focus.
   - Make content that appears on hover available to a screen reader by using `aria-describedby` (refer to [Tooltips & Toggletips example from Inclusive Components](https://inclusive-components.design/tooltips-toggletips/)).

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

@@ -113,7 +113,7 @@ export class AccessibilityDatalist extends React.Component {
                     <div id="ex-item1">Skip to main links</div>
                   </DataListCell>,
                   <DataListCell key="secondary content">
-                    <a href="//www.w3.org/WAI/WCAG21/quickref#bypass-blocks">WCAG 2.4.1</a>
+                    <a href="//www.w3.org/WAI/WCAG22/quickref#bypass-blocks">WCAG 2.4.1</a>
                   </DataListCell>,
                   <DataListCell key="secondary content 2">
                     <span>development</span>
@@ -151,7 +151,7 @@ export class AccessibilityDatalist extends React.Component {
                     <div id="ex-item2">Page titles</div>
                   </DataListCell>,
                   <DataListCell key="secondary content 2">
-                    <a href="//www.w3.org/WAI/WCAG21/quickref#page-titled">WCAG 2.4.2</a>
+                    <a href="//www.w3.org/WAI/WCAG22/quickref#page-titled">WCAG 2.4.2</a>
                   </DataListCell>,
                   <DataListCell key="secondary content3">
                     <span>development</span>
@@ -194,7 +194,7 @@ export class AccessibilityDatalist extends React.Component {
                     <div id="ex-item3">Links</div>
                   </DataListCell>,
                   <DataListCell key="secondary content">
-                    <a href="//www.w3.org/WAI/WCAG21/quickref#link-purpose-in-context">WCAG 2.4.4</a>
+                    <a href="//www.w3.org/WAI/WCAG22/quickref#link-purpose-in-context">WCAG 2.4.4</a>
                   </DataListCell>,
                   <DataListCell key="secondary content 2">
                     <span>design, development</span>
@@ -249,7 +249,7 @@ export class AccessibilityDatalist extends React.Component {
               <br/>
               <br/>
               Landmark roles programmatically identify sections of a page. If more than one landmark role occurs in the page, use <code>aria-label</code> to differentiate the landmark elements.
-              Landmarks help assistive-technology users orient themselves to a page and help them navigate easily to various page sections. Whenever a landmark role is used more than once, provide a name using <code>aria-label</code> or <code>aria-labelledby</code> to provide context for that landmark. (<a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA6"> ARIA6</a>, <a href="https://w3.org/WAI/WCAG22/Techniques/aria/ARIA16">ARIA16</a>)
+              Landmarks help assistive-technology users orient themselves to a page and help them navigate easily to various page sections. Whenever a landmark role is used more than once, provide a name using <code>aria-label</code> or <code>aria-labelledby</code> to provide context for that landmark. (<a href="https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA6"> ARIA6</a>, <a href="https://w3.org/WAI/WCAG22/Techniques/aria/ARIA16">ARIA16</a>)
               <br/>
               <br/>
               <strong>Note:</strong> While toolbar is not a landmark role, the same rule applies.
@@ -272,7 +272,7 @@ export class AccessibilityDatalist extends React.Component {
                     <div id="ex-item5">Headings</div>
                   </DataListCell>,
                   <DataListCell key="secondary content">
-                    <a href="//www.w3.org/WAI/WCAG21/quickref#section-headings">WCAG 2.4.10</a>
+                    <a href="//www.w3.org/WAI/WCAG22/quickref#section-headings">WCAG 2.4.10</a>
                   </DataListCell>,
                   <DataListCell key="secondary content 2">
                     <span>design, development</span>

packages/documentation-site/patternfly-docs/content/developer-resources/accessibility-development.md

@@ -24,7 +24,7 @@ These are some of the items outside the scope of PatternFly that you should prio
 
 ### UI element accessibility techniques
 
-The [WCAG 2.0 techniques](https://www.w3.org/TR/WCAG20-TECHS/Overview.html#contents) provide examples on how to meet accessibility guidelines. The following techniques are standard across PatternFly for specific patterns.
+The [WCAG 2.2 techniques](https://www.w3.org/WAI/WCAG22/Techniques/) provide examples on how to meet accessibility guidelines. The following techniques are standard across PatternFly for specific patterns.
 
 #### Labeling with ARIA
 
@@ -38,11 +38,11 @@ Note that ARIA can only affect the semantics of an element; it has no effect on
 
 #### Form fields
 
-Use [explicit linking](https://www.w3.org/TR/WCAG20-TECHS/H44.html) between `label` and form input elements (such as `input`, `textarea`, or `select`) when both are present. [This "H44" guidelines](//www.w3.org/TR/WCAG20-TECHS/H44.html) provides an accessible name to screen readers and makes the label clickable to increase the overall clickable area of the form element.
+[Use label elements to associate text labels with form controls](https://www.w3.org/WAI/WCAG22/Techniques/html/H44) (such as `input`, `textarea`, or `select`) when both are present. This technique provides an accessible name to screen readers and makes the label clickable to increase the overall clickable area of the form element.
 
-When a `label` element cannot accompany a form input element, provide one using using `aria-label` or `aria-labelledby`, as outline by the ["ARIA14" guidelines](//www.w3.org/TR/WCAG20-TECHS/ARIA14.html). 
+When a `label` element cannot accompany a form input element, provide one using using `aria-label` or `aria-labelledby`, as outlined by the [WCAG technique ARIA14](https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA14). 
 
-In a single-field form, the submit button label can serve as the field label for sighted users, [following the "G167" guidelines](//www.w3.org/TR/WCAG20-TECHS/general.html#G167). For assistive devices, use `aria-labelledby`.
+In a single-field form, the submit button label can serve as the field label for sighted users, following the [WCAG technique G167](https://www.w3.org/WAI/WCAG22/Techniques/general/G167). For assistive devices, use `aria-labelledby`.
 
 #### Icons
 

packages/documentation-site/patternfly-docs/content/developer-resources/accessibility-testing.md

@@ -56,9 +56,9 @@ You can test with any screen reader that is available in your operating system.
 ### Check color contrast
 
 Your UI's colors should pass the following contrast checks to ensure that users across the vision spectrum can understand your product:
-    - Text color against background color ([Understanding WCAG 1.4.3](//www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html))
-    - Text color against link color ([Technique G183](//www.w3.org/TR/WCAG20-TECHS/G183.html))
-    - Visible boundaries of buttons and form elements against adjacent background color ([Understanding WCAG 1.4.11](//www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html))
+    - Text color against background color ([Understanding WCAG 1.4.3](//www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html))
+    - Text color against link color ([WCAG Technique G183](https://www.w3.org/WAI/WCAG22/Techniques/general/G183))
+    - Visible boundaries of buttons and form elements against adjacent background color ([Understanding WCAG 1.4.11](//www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html))
 
 ## Accessibility testing checklist