docs: add accessibility tab to popover component (#4209)

* add a11y tab

* add a11y to tab code

* add images

* update list formatting

* update caption length

* update a11y.mdx

* edit captions

* fix typo

src/pages/components/popover/accessibility.mdx

@@ -0,0 +1,80 @@
+---
+title: Popover
+description:
+  No accessibility annotations are needed for popover, but keep these
+  considerations in mind if you are modifying Carbon or creating a custom
+  component.
+tabs: ['Usage', 'Style', 'Code', 'Accessibility']
+---
+
+import A11yStatus from 'components/A11yStatus';
+
+import { Popover } from '@carbon/react';
+
+<PageDescription>
+
+No accessibility annotations are needed for popover, but keep these
+considerations in mind if you are modifying Carbon or creating a custom
+component.
+
+</PageDescription>
+
+<AnchorLinks>
+  <AnchorLink>What Carbon provides</AnchorLink>
+  <AnchorLink>Development considerations</AnchorLink>
+</AnchorLinks>
+
+<A11yStatus layout="table" components="Popover" />
+
+## 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 interactions
+
+Popovers use an icon button for the trigger. These buttons are in the tab order
+and are activated by pressing `Enter` or `Space`. The activation toggles the
+popover open and closed, and focus remains on the trigger.
+
+When the popover contains interactive elements, pressing `Tab` will move focus
+to the first component in the popover. When the popover only has non-interactive
+text, or when the focus is on the last component in the popover, pressing `Tab`
+will close the popover and move focus to the next tab stop on the page.
+
+<Row>
+<Column colLg={12}>
+
+![The icon button trigger and interactive elements inside of the popover are in the page tab order.](images/popover-a11y-1.png)
+
+<Caption>
+  The icon button trigger and interactive elements inside of the popover are in
+  the page tab order.
+</Caption>
+
+</Column>
+</Row>
+
+<Row>
+<Column colLg={12}>
+
+![Use Space or Enter to open and close the popover, and use Esc or Tab on the last component to dismiss it.](images/popover-a11y-2.png)
+
+<Caption>
+  Use Space or Enter to open and close the popover, and use Esc or Tab on the
+  last component to dismiss it.
+</Caption>
+
+</Column>
+</Row>
+
+## Development considerations
+
+Keep these considerations in mind if you are modifying Carbon or creating a
+custom component.
+
+- The icon button has an `aria-label` that defines or describes what the icon
+  is.
+- The button uses `aria-expanded` to set popover visibility and `aria-controls`
+  to handle navigation to the content.

src/pages/components/popover/code.mdx

@@ -2,7 +2,7 @@
 title: Popover
 description:
   A popover is a layer that pops up over all other elements on a page.
-tabs: ['Usage', 'Style', 'Code']
+tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
 <PageDescription>

src/pages/components/popover/style.mdx

@@ -2,7 +2,7 @@
 title: Popover
 description:
   A popover is a layer that pops up over all other elements on a page.
-tabs: ['Usage', 'Style', 'Code']
+tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
 ## Color

src/pages/components/popover/usage.mdx

@@ -2,7 +2,7 @@
 title: Popover
 description:
   A popover is a layer that pops up over all other elements on a page.
-tabs: ['Usage', 'Style', 'Code']
+tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
 import A11yStatus from 'components/A11yStatus';