Accessibility changes

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.
+
+### Labelling 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>