Skip to content

Commit

Permalink
update .mdx (#3337)
Browse files Browse the repository at this point in the history
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
  • Loading branch information
laurenmrice and kodiakhq[bot] authored Jan 12, 2023
1 parent 2f02240 commit df1b868
Showing 1 changed file with 13 additions and 13 deletions.
26 changes: 13 additions & 13 deletions src/pages/components/toggletip/accessibility.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ 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.
trigger element and can contain interactive elements.

</PageDescription>

Expand All @@ -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.

<Row>
<Column colLg={12}>

![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)

<Caption>
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.
</Caption>

Expand All @@ -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)

<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.
Toggletips appear when the information icon button is activated and disappear
by activating the icon again, pressing Esc, or tabbing away from the
toggletip.
</Caption>

</Column>
Expand Down

1 comment on commit df1b868

@vercel
Copy link

@vercel vercel bot commented on df1b868 Jan 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.