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.

Sign up for GitHub

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

Jump to bottom

feat(Tooltip): add aria-described by to floating tooltip #2772

Merged
merged 8 commits into from
Sep 25, 2023
Merged

feat(Tooltip): add aria-described by to floating tooltip #2772

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
27e52b1
describedby
dreamwasp Sep 8, 2023
48c10d9
Merge branch 'main' into cass-web-2424-JAWS-fi
dreamwasp Sep 8, 2023
d038f31
add aria-label to focusable
dreamwasp Sep 8, 2023
39dd60e
Merge branch 'cass-web-2424-JAWS-fi' of github.com:Codecademy/gamut i…
dreamwasp Sep 8, 2023
74d1f71
Merge branch 'main' into cass-web-2424-JAWS-fi
dreamwasp Sep 19, 2023
529d5a9
test build
dreamwasp Sep 19, 2023
e1bd7d5
Merge branch 'main' into cass-web-2424-JAWS-fi
dreamwasp Sep 25, 2023
aa16e81
Merge branch 'main' into cass-web-2424-JAWS-fi
dreamwasp Sep 25, 2023
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
7 changes: 4 additions & 3 deletions packages/gamut/src/ToolTip/utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,15 +92,16 @@ export const getAccessibilityProps = ({
isOpenPopoverToolTip,
}: ToolTipAccessibiltyProps) => {
// Since PopoverToolTips are removed from the DOM, when they are inactive they need an aria-label instead of aria-labelledby
const ariaLabel =
const labeling =
isOpenPopoverToolTip === undefined || isOpenPopoverToolTip
? { 'aria-labelledby': id }
: { 'aria-label': id };
: { 'aria-describedby': id };
// ToolTips sometimes contain actual <button>s, which cannot be a child of a button.
// This element still needs tab focus so we must use the `tabIndex=0` hack.
return {
...ariaLabel,
...labeling,
role: focusable ? 'button' : undefined,
tabIndex: focusable ? 0 : undefined,
'aria-label': focusable ? 'tooltip' : undefined,
};
};
1 change: 1 addition & 0 deletions packages/styleguide/stories/Atoms/ToolTip.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ import { CustomCheckbox } from '../Atoms/FormInputs/examples';
/>

_Small_ piece of extra information triggered on the focus or hover of a button or icon, such as extra requirements for a form surfaced from an informative (i) icon.

Tooltip contents are generally small pieces of text or other non-interactive information.
They disappear when the focus or hover are no longer active.
Great for surfacing additional information that may or may not be relevant _without_ cluttering the core interface.
Expand Down
Loading