pagination accessibility update (#3224)

* pagination accessibility update

Contains text and images for Pagination accessibility tab

* Update pagination-accessibility-1.png

updated image

* added and updated images

* Update accessibility.mdx

added code tags

* chore(format): fix format error

Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

src/pages/components/pagination/accessibility.mdx

@@ -19,87 +19,91 @@ import {
 
 <PageDescription>
 
-The pagination 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 paginations, but keep these
+considerations in mind if you are modifying Carbon or creating a custom
+component.
 
 </PageDescription>
 
 <AnchorLinks>
-  <AnchorLink>Accessibility considerations</AnchorLink>
-  <AnchorLink>Resources</AnchorLink>
-  <AnchorLink>Accessibility testing</AnchorLink>
+
+<AnchorLink>What Carbon provides</AnchorLink>
+<AnchorLink>Design recommendations</AnchorLink>
+<AnchorLink>Development considerations</AnchorLink>
+
 </AnchorLinks>
 
-## Accessibility considerations
-
-1. If descriptions or labels are changed from the default value, verify the new
-   value is clear and concise.
-
-## Resources
-
-- [IBM Accessibility Requirements](https://www.ibm.com/able/requirements/requirements/):
-  - [1.3.1 Info and Relationships](https://www.ibm.com/able/requirements/requirements/#1_3_1)
-    (WCAG Success Criteria
-    [1.3.1](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships))
-  - [1.3.2 Meaningful Sequence](https://www.ibm.com/able/requirements/requirements/#1_3_2)
-    (WCAG Success Criteria
-    [1.3.2](https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence))
-  - [2.1.1 Keyboard](https://www.ibm.com/able/requirements/requirements/#2_1_1)
-    (WCAG Success Criteria
-    [2.1.1](https://www.w3.org/WAI/WCAG21/Understanding/keyboard))
-  - [2.4.3 Focus Order](https://www.ibm.com/able/requirements/requirements/#2_4_3)
-    (WCAG Success Criteria
-    [2.4.3](https://www.w3.org/WAI/WCAG21/Understanding/focus-order))
-  - [2.4.6 Headings and Labels](https://www.ibm.com/able/requirements/requirements/#2_4_6)
-    (WCAG Success Criteria
-    [2.4.6](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels))
-  - [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))
-  - [4.1.2 Name, Role, Value](https://www.ibm.com/able/requirements/requirements/#4_1_2)
-    (WCAG Success Criteria
-    [4.1.2](https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html))
-
-## Accessibility testing
-
-Automated, manual and screen reader accessibility verification test has been
-performed on the pagination 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.
-
-### Automated test
+## What Carbon provides
+
+Carbon bakes keyboard operation into its components, improving the experience of
+blind users and others who operate via the keyboard. Carbon incorporates many
+other accessibility considerations, some of which are described below.
+
+### Keyboard interaction
+
+The tab order goes from left to right through the controls in the pagination
+component. On focus, the dropdowns are opened with `Space` or with up or down
+arrows, which also cycle through the values. Both `Space` and `Enter` select a
+value and close the dropdown. The dropdown can also be closed by pressing `Esc`.
+The previous and next page arrow buttons are activated by `Space` or `Enter`
+keys.
+
+<Row>
+<Column colLg={8}>
+
+![example of tabbing into a pagination group and arrowing between selections](images/pagination-accessibility-1.png)
+
+<Caption>
+  Interactive elements in pagination maintain their usual Carbon keyboard
+  behaviors and tab order.
+</Caption>
+
+</Column>
+</Row>
+
+When the pagination is at either end of its range, one of the page navigation
+buttons becomes invalid. When that happens, the button is no longer navigable or
+operable, like any other disabled control.
+
+<Row>
+<Column colLg={8}>
+
+![tab order bypasses the disabled left-arrow icon](images/pagination-accessibility-2.png)
+
+<Caption>
+  The prior page button is disabled and unreachable when the pagination is at
+  the start of its range.
+</Caption>
+
+</Column>
+</Row>
+
+### Labeling
+
+Not all the elements in pagination have static or visually isolated labels.
+Carbon constructs a programmatic name for the second dropdown by concatenating
+some dynamically generated text on the screen. Carbon also provides accessible
+names for the icon-only buttons.
 
 <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 />- No violations
-          </StructuredListCell>
-        </StructuredListRow>
-      </StructuredListBody>
-    </StructuredListWrapper>
-  </Column>
+<Column colLg={8}>
+
+![illustration showing labels for dropdown and icon-only buttons](images/pagination-accessibility-3.png)
+
+<Caption>
+  Carbon provides the accessible names "page number, of 3 pages", "previous
+  page", and "next page" for assistive technology.
+</Caption>
+
+</Column>
 </Row>
+
+## Development considerations
+
+Keep these considerations in mind if you are modifying Carbon or creating a
+custom component.
+
+- Carbon uses `<select>` elements for the dropdowns
+- Consult the
+  [ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html)
+  for more considerations.