Accessibility changes (#2737)

* Accessibility changes

Added 5 images and all new content to the Accessibility tab for code snippet.
Removed the Screen Reader testing material from the Usage page, and made one minor editorial that seemed acceptable during the playback.

* Update accessibility.mdx

updated to 8 column

* fix image quality

uploaded higher resolution images

* Update usage.mdx

added link to accessibility tab

* Update usage.mdx

repositioned link to accessibility tab

* Update accessibility.mdx

Added spacing an asterisks to fix bullets

* Altered illustrations

All accessibility tab illustrations updated by Lauren as per discussion with DPO

* Update accessibility.mdx

proof reading fixes: style on keys; spelling of labeling

src/pages/components/code-snippet/accessibility.mdx

@@ -19,79 +19,84 @@ import {
 
 <PageDescription>
 
-The code snippet React Carbon component has been tested against the latest
-[W3C Web Content Accessibility Guidelines (WCAG) 2.1 Level A and AA success criteria](https://www.w3.org/TR/WCAG21/)
-and violations have been identified as high priority issues. This document will
-be updated when these accessibility issues are resolved.
+No accessibility annotations are needed for code snippets, but keep these considerations in mind if you’re modifying Carbon or creating a custom component.
 
 </PageDescription>
 
 <AnchorLinks>
-  <AnchorLink>How it works</AnchorLink>
-  <AnchorLink>Accessibility considerations</AnchorLink>
-  <AnchorLink>Resources</AnchorLink>
-  <AnchorLink>Accessibility testing</AnchorLink>
+  <AnchorLink>What Carbon provides</AnchorLink>
+  <AnchorLink>Developer considerations</AnchorLink>
 </AnchorLinks>
 
-## Accessibility considerations
+## What Carbon provides
 
-1. The code snippet copy button can be activated using both the `Space` or
-   `Enter` key.
-2. The code snippet copy button label accurately describes what the button does.
-3. After the button is activated the focus remains on the button since there is
-   no change in context.
+Carbon bakes keyboard operation into its components, as well as many other
+accessibility considerations.
 
-## Resources
+### Keyboard interaction
 
-- [W3C WAI-ARIA Authoring Practices Button Design Pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#buttonn)
-  covers the usage of ARIA names, state and roles, as well as the expected
-  keyboard interactions.
-- [IBM Accessibility Requirements:](https://www.ibm.com/able/requirements/requirements/)
-  - [2.4.7 Focus Visible](https://www.ibm.com/able/requirements/requirements/#2_4_7)
-    (WCAG Success Criteria
-    [2.4.7](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible))
-  - [3.2.2 On Input](https://www.ibm.com/able/requirements/requirements/#3_2_2)
-    (WCAG Success Criteria
-    [3.2.2](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/consistent-behavior-unpredictable-change.html))
+For all three variants, the code snippet can be copied with `Space` or `Enter`. Arrow
+keys can operate scroll bars.
 
-## Accessibility testing
+<Row>
+<Column colLg={8}>
+
+![inline code snippet keyboard interaction](images/code-snippet-accessibility-1.png)
 
-Automated, manual and screen reader accessibility verification test has been
-performed on the code snippet React Carbon component.
-[WCAG 2.1 Level A and AA success criteria](https://www.w3.org/TR/WCAG21/) issues
-have been identified and the list of open accessibility violations is available
-in the Carbon Component GitHub repository.
+</Column>
+</Row>
 
-### Automated test
+By default, each inline code snippet is reachable by `Tab` and copied with `Space` or `Enter`.
 
 <Row>
-  <Column noGutterSm>
-    <StructuredListWrapper>
-      <StructuredListHead>
-        <StructuredListRow head>
-          <StructuredListCell head>
-            Automated test environment
-          </StructuredListCell>
-          <StructuredListCell head>Results</StructuredListCell>
-        </StructuredListRow>
-      </StructuredListHead>
-      <StructuredListBody>
-        <StructuredListRow>
-          <StructuredListCell>
-            - macOS Mojave version 10.14.6 with VoiceOver
-            <br />
-            - Chrome version 77.0.3865.90
-            <br />
-            - Dynamic Assessment Plugin (DAP) version 1.8.0.0 - IBM
-            Accessibility WCAG 2.1 Sept. 2019 Ruleset
-            <br />- Carbon React version 7.7.1
-          </StructuredListCell>
-          <StructuredListCell>
-            <strong>DAP test:</strong>
-            <br />- Violations
-          </StructuredListCell>
-        </StructuredListRow>
-      </StructuredListBody>
-    </StructuredListWrapper>
-  </Column>
+<Column colLg={8}>
+
+![single line code snippet interaction, with 2 tab stops](images/code-snippet-accessibility-2.png)
+
+</Column>
 </Row>
+
+The single line code snippet tabstop supports left and right arrow key scrolling.
+
+<Row>
+<Column colLg={8}>
+
+![multi-line code snippet keyboard interaction](images/code-snippet-accessibility-3.png)
+
+</Column>
+</Row>
+
+The multi-line’s buttons are reachable by `Tab` and activated with `Space` or `Enter`.
+
+### Labeling and updates
+
+Carbon provides the copy button's default label and tooltip behavior. Carbon
+handles notices about the success of the copy function, as well as updates to the
+Show more mechanism.
+
+<Row>
+<Column colLg={8}>
+
+![hovering on the button exposes ‘copy to clipboard’ tooltip](images/code-snippet-accessibility-4.png)
+
+</Column>
+</Row>
+
+The code snippet’s buttons expose their labels on hover or focus.
+
+<Row>
+<Column colLg={8}>
+
+![the activated button shows a ‘copied!’ message](images/code-snippet-accessibility-5.png)
+
+</Column>
+</Row>
+
+The results of activating buttons are provided in text.
+
+## Developer considerations
+
+Keep this in mind if you’re modifying Carbon or creating a custom component:
+
+* the inline code text is implemented as a button so its text can be copied
+* single line snippets take an additional tabstop to support arrow key scrolling

src/pages/components/code-snippet/usage.mdx

@@ -259,14 +259,8 @@ manually highlighting the text and right clicking "copy".
 - Show more or less code by pressing `Space` or `Enter` while the ghost button
   is in focus.
 
-#### Screen readers
-
-- VoiceOver: Users can copy code by pressing `Space` while the copy button has
-  screen reader focus.
-- JAWS: Users can copy code by pressing `Space` while the copy button has screen
-  reader focus.
-- NVDA: Users can copy code by pressing `Space` while the copy button has screen
-  reader focus.
+For additional keyboard interactions, see the
+[accessibility tab](/components/code-snippet/accessibility#keyboard-interaction).  
 
 ## Inline
 
@@ -325,7 +319,7 @@ Use multi-line code snippets for displaying multiple lines of code.
 
 #### Show more button
 
-A ghost button can be added to a multi-line code snippet to show more or fewer
+A Show more ghost button can be added to a multi-line code snippet to show more or fewer
 lines of code. Use this functionality if your layout is tight on space.
 
 <Row>