Tooltip accessibility update (#3330)

* Update accessibility.mdx

* added first images

* Update accessibility.mdx

removed flotsam from the copy and paste exercise

* Update accessibility.mdx

tweak spacing

* Update accessibility.mdx

* Update accessibility.mdx

modifications for better readability

* Update accessibility.mdx

corrected link target

* Update tooltip-accessibility-2.png

* Update accessibility.mdx

attempting to resolved error

* Update accessibility.mdx

* text and image changes for design annotations

* chore(prettier): output of yarn:format

* chore(prettier): output of yarn:format

Co-authored-by: Taylor Jones <taylor.jones826@gmail.com>

src/pages/components/tooltip/accessibility.mdx

@@ -14,9 +14,11 @@ annotate the tooltip’s text content.
 </PageDescription>
 
 <AnchorLinks>
-  <AnchorLink>What Carbon provides</AnchorLink>
-  <AnchorLink>Design recommendations</AnchorLink>
-  <AnchorLink>Development considerations</AnchorLink>
+
+<AnchorLink>What Carbon provides</AnchorLink>
+<AnchorLink>Design recommendations</AnchorLink>
+<AnchorLink>Development considerations</AnchorLink>
+
 </AnchorLinks>
 
 ## What Carbon provides
@@ -50,8 +52,10 @@ interactive (it can’t be clicked or acted upon).
 ![tooltips appear on focus and disappear by pressing Esc or tabbing away from the trigger](images/tooltip-accessibility-1.png)
 
 <Caption>
-  Tooltips appear when the trigger receives focus and disappear when tabbing
-  away from the trigger.
+
+Tooltips appear when the trigger receives focus and disappear when tabbing away
+from the trigger.
+
 </Caption>
 
 </Column>
@@ -73,22 +77,28 @@ interactive (it can’t be clicked or acted upon).
 
 ### Annotate the text for the tooltip
 
-Except for icon buttons with clearly pre-established names or functions (such as
-Bold and Italics), every tooltip should be annotated by the designer so the
-developer knows what text to use. See
-[Usage](https://carbondesignsystem.com/components/tooltip/usage) for information
-on the length and styling of tooltip content, whether for icon-buttons or for
-definitions.
+If designers do not specify the text, tooltips are less likely to be implemented
+by developers. Every icon-only button needs a tooltip, except for icons with
+clearly established names or functions (such as Bold and Italics). Designers can
+provide the text by using a tooltip in their designs or simply
+[annotating the icon-only button](https://carbondesignsystem-2xrdev89e-carbon-design-system.vercel.app/components/button/accessibility#labeling).
+For definition tooltips, see the
+[Usage](https://carbondesignsystem.com/components/tooltip/usage) page for
+information on the length and styling for tooltip content.
 
-<Row>
-<Column colLg={8}>
+<DoDontRow>
+  <DoDont type="do" caption="Specify the text that will appear in the tooltip.">
 
-![annotation shows the text of the tooltip](images/tooltip-accessibility-3.png)
+![icons have tooltips 'search' and 'switch sites'](images/tooltip-accessibility-3-do.png)
 
-<Caption>Specify the text that will appear in the tooltip.</Caption>
+  </DoDont>
 
-</Column>
-</Row>
+  <DoDont type="dont" caption="Do not use icon-only buttons with no tooltip or name annotated.">
+
+![icon buttons in the top navigation do not have tooltips or annotations](images/tooltip-accessibility-3-dont.png)
+
+  </DoDont>
+</DoDontRow>
 
 ## Development considerations