diff --git a/src/pages/components/toggletip/accessibility.mdx b/src/pages/components/toggletip/accessibility.mdx index fcf182df0c9..96b6101da92 100644 --- a/src/pages/components/toggletip/accessibility.mdx +++ b/src/pages/components/toggletip/accessibility.mdx @@ -12,7 +12,7 @@ import { Toggletip } from '@carbon/react'; Toggletips display and hide additional information upon the click of a UI -trigger element. Toggletips can contain interactive elements. +trigger element and can contain interactive elements. @@ -30,22 +30,22 @@ Designers only need to indicate the toggletip’s content. 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. +toggles the tip open and closed, and 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. +When the toggletip contains interactive elements, pressing`Tab` will move focus +to the first component in the toggletip. When the toggletip only has +non-interactive text, or when 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 returns +focus to the trigger if the focus is inside the tooltip. -![the information icon and tip elmements are in the tab order](images/toggletip-accessibility-1.png) +![The information icon and tooltip elmements are in the tab order](images/toggletip-accessibility-1.png) - The information button (i) that triggers the toggletip is in the page tab + The information icon button that triggers the toggletip is in the page tab order, as are interactive elements inside an open toggletip. @@ -58,9 +58,9 @@ the focus is inside the tip, returns focus to the trigger. ![Enter or Space open a toggletip, Esc dismisses](images/toggletip-accessibility-2.png) - Toggletips appear on activation of the information icon, and disappear by - either activating the icon again, pressing Esc, or tabbing away from the - toggltip. + Toggletips appear when the information icon button is activated and disappear + by activating the icon again, pressing Esc, or tabbing away from the + toggletip.