added fourth accessibility tab to toggletip (#3319)

* added fourth tab

* Create accessibility.mdx

First draft of accessibility tab content

* Update accessibility.mdx

updated content

* Update accessibility.mdx

remove space

* Update accessibility.mdx

* Update accessibility.mdx

* images and accessibility content

* updates

update image; remove link to non-existing Design section

* Update accessibility.mdx

alter leading description and what carbon provides

* Update accessibility.mdx

add Oxford comma

* Update accessibility.mdx

updated alts for images

* update images

* chore(formatting): output of yarn format

* Update accessibility.mdx

Co-authored-by: Taylor Jones <[email protected]>

src/pages/components/toggletip/accessibility.mdx

@@ -0,0 +1,76 @@
+---
+title: Toggletip
+description:
+  Toggletips use the disclosure pattern to toggle the visibility of a popover.
+  They display additional, hidden information upon the click of a UI trigger
+  element and can contain interactive elements.
+tabs: ['Usage', 'Style', 'Code', 'Accessibility']
+---
+
+import { Toggletip } from '@carbon/react';
+
+<PageDescription>
+
+Toggletips display and hide additional information upon the click of a UI
+trigger element. Toggletips can contain interactive elements.
+
+</PageDescription>
+
+<AnchorLinks>
+  <AnchorLink>What Carbon provides</AnchorLink>
+  <AnchorLink>Development considerations</AnchorLink>
+</AnchorLinks>
+
+## What Carbon provides
+
+Carbon already incorporates accessibility into the toggletip component.
+Designers only need to indicate the toggletip’s content.
+
+### Keyboard interactions
+
+Toggletips use an information icon button for the trigger. These buttons are in
+the tab order and are activated by pressing `Enter` or `Space`. The activation
+toggles the tip open and closed. Focus remains on the trigger.
+
+Where the toggletip contains interactive elements, pressing `Tab` will move the
+focus into the first of the components in the toggletip. Where the toggletip
+contains only non-interactive text, or where the focus is on the last component
+in the toggletip, pressing `Tab` will close the toggletip and move focus to the
+next tab stop on the page. Pressing `Esc` also closes an open toggletip and, if
+the focus is inside the tip, returns focus to the trigger.
+
+<Row>
+<Column colLg={12}>
+
+![the information icon and tip elmements are in the tab order](images/toggletip-accessibility-1.png)
+
+<Caption>
+  The information button (i) that triggers the toggletip is in the page tab
+  order, as are interactive elements inside an open toggletip.
+</Caption>
+
+</Column>
+</Row>
+
+<Row>
+<Column colLg={12}>
+
+![Enter or Space open a toggletip, Esc dismisses](images/toggletip-accessibility-2.png)
+
+<Caption>
+  Toggletips appear on activation of the information icon, and disappear by
+  either activating the icon again, pressing Esc, or tabbing away from the
+  toggltip.
+</Caption>
+
+</Column>
+</Row>
+
+## Development considerations
+
+Keep these considerations in mind if you are modifying Carbon or creating a
+custom component.
+
+- The icon button has `aria-label="Show information"`.
+- The button uses `aria-expanded` to set toggletip visibility and
+  `aria-controls` to handle navigation to the content.

src/pages/components/toggletip/code.mdx

@@ -4,7 +4,7 @@ description:
   Toggletips use the disclosure pattern to toggle the visibility of a popover.
   They display additional, hidden information upon the click of a UI trigger
   element and can contain interactive elements.
-tabs: ['Usage', 'Style', 'Code']
+tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
 <PageDescription>

src/pages/components/toggletip/style.mdx

@@ -4,7 +4,7 @@ description:
   Toggletips use the disclosure pattern to toggle the visibility of a popover.
   They display additional, hidden information upon the click of a UI trigger
   element and can contain interactive elements.
-tabs: ['Usage', 'Style', 'Code']
+tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
 ## Color

src/pages/components/toggletip/usage.mdx

@@ -4,7 +4,7 @@ description:
   Toggletips use the disclosure pattern to toggle the visibility of a popover.
   They display additional, hidden information upon the click of a UI trigger
   element and can contain interactive elements.
-tabs: ['Usage', 'Style', 'Code']
+tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
 import { Toggletip } from '@carbon/react';