Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: toggletip a11y tab update #3337

Merged
merged 2 commits into from
Jan 12, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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>

laurenmrice marked this conversation as resolved.
Show resolved Hide resolved
</Column>
Expand Down