docs: revise a11y images and content (#3244)

* update images

* update content

* update pagination content and images

* update annotation images

* fix merge conflicts

src/pages/components/UI-shell-left-panel/accessibility.mdx

@@ -102,8 +102,8 @@ tab out of the left panel, the side rail slides out of view.
 Keep these considerations in mind if you are modifying Carbon or creating a
 custom component.
 
-- the left panel is in a `<nav>` section with `aria-label="Side navigation"`
-- all items in the left panel are in a nested `<ul>` structure, which provides
-  additional information to assistive technologies
-- each 'sub-menu' is implemented as a `<button>` with `aria-expanded`
-- activated links receive an `aria-current="page"` attribute
+- The left panel is in a `<nav>` section with `aria-label="Side navigation"`.
+- All items in the left panel are in a nested `<ul>` structure, which provides
+  additional information to assistive technologies.
+- Each 'sub-menu' is implemented as a `<button>` with `aria-expanded`.
+- Activated links receive an `aria-current="page"` attribute.

src/pages/components/UI-shell-right-panel/accessibility.mdx

@@ -46,12 +46,12 @@ button (with `Space` or `Enter`) opens the right panel over the main content
 area. All actionable links in the panel can be reached by `Tab`. Activating any
 of the links (with `Enter`) loads new content and closes the right panel. The
 panel can also be closed by pressing `Esc` or by re-activating the switcher
-button (which received an X icon on activation).
+button (which receives an X icon on activation).
 
 <Row>
 <Column colLg={8}>
 
-![example of right panel keyboard activation](images/right-panel-accessibility-1.png)
+![example of right panel keyboard activation](images/right-panel-a11y-1.png)
 
 <Caption>
   Activating the switch button with Enter or Space toggles the display of the
@@ -64,7 +64,7 @@ button (which received an X icon on activation).
 <Row>
 <Column colLg={8}>
 
-![example of right panel keyboard interaction](images/right-panel-accessibility-2.png)
+![example of right panel keyboard interaction](images/right-panel-a11y-2.png)
 
 <Caption>
   Links are reached by Tab and activated by Enter key. Activating links or
@@ -76,16 +76,16 @@ button (which received an X icon on activation).
 
 ## Design recommendations
 
-### Annotate name for switcher button, where necessary
+### Annotating the switcher button name
 
-Designers may need to change the icon-only switcher button's name to match the
-right panel's scope. Depending on the context of the design, common button names
-include "Switch site" or "App switcher".
+When necessary, designers may need to change the icon-only switcher button's
+name to match the right panel's scope. Depending on the context of the design,
+common button names include "Switch site" or "App switcher".
 
 <Row>
 <Column colLg={8}>
 
-![the switcher button is annotated as "app switcher"](images/right-panel-accessibility-3.png)
+![the switcher button is annotated as "app switcher"](images/right-panel-a11y-3.png)
 
 <Caption>
   Annotate a name change to the switcher button if needed in your design.

src/pages/components/pagination/accessibility.mdx

@@ -19,7 +19,7 @@ import {
 
 <PageDescription>
 
-No accessibility annotations are needed for paginations, but keep these
+No accessibility annotations are needed for pagination, but keep these
 considerations in mind if you are modifying Carbon or creating a custom
 component.
 
@@ -51,7 +51,7 @@ keys.
 <Row>
 <Column colLg={8}>
 
-![example of tabbing into a pagination group and arrowing between selections](images/pagination-accessibility-1.png)
+![example of tabbing into a pagination group and arrowing between selections](images/pagination-a11y-1.png)
 
 <Caption>
   Interactive elements in pagination maintain their usual Carbon keyboard
@@ -68,7 +68,7 @@ operable, like any other disabled control.
 <Row>
 <Column colLg={8}>
 
-![tab order bypasses the disabled left-arrow icon](images/pagination-accessibility-2.png)
+![tab order bypasses the disabled left-arrow icon](images/pagination-a11y-2.png)
 
 <Caption>
   The prior page button is disabled and unreachable when the pagination is at
@@ -88,10 +88,10 @@ names for the icon-only buttons.
 <Row>
 <Column colLg={8}>
 
-![illustration showing labels for dropdown and icon-only buttons](images/pagination-accessibility-3.png)
+![illustration showing labels for dropdown and icon-only buttons](images/pagination-a11y-3.png)
 
 <Caption>
-  Carbon provides the accessible names "page number, of 3 pages", "previous
+  Carbon provides the accessible names "page number, of 40 pages", "previous
   page", and "next page" for assistive technology.
 </Caption>
 
@@ -103,7 +103,7 @@ names for the icon-only buttons.
 Keep these considerations in mind if you are modifying Carbon or creating a
 custom component.
 
-- Carbon uses `<select>` elements for the dropdowns
+- 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.