diff --git a/README.md b/README.md index c9f9f70f77..d7400690f5 100644 --- a/README.md +++ b/README.md @@ -47,10 +47,6 @@ Follow the prompts shown to you in your terminal. Instructions on how to use the cli tool can be found [here](https://github.com/atlassian/changesets/blob/master/packages/cli/README.md), but all you should need to do is generate a changeset and commit it with your Pull Request. -### Maintainers - -This project is maintained by the [design systems team](https://github.com/orgs/twilio-labs/teams/design-systems). - ### Hosted Storybook [Storybook](https://main--5e53448165911c0022e68c74.chromatic.com) diff --git a/packages/paste-website/src/component-examples/TooltipExamples.ts b/packages/paste-website/src/component-examples/TooltipExamples.ts index 279046e4a6..1389d92af2 100644 --- a/packages/paste-website/src/component-examples/TooltipExamples.ts +++ b/packages/paste-website/src/component-examples/TooltipExamples.ts @@ -23,3 +23,23 @@ render( ) `.trim(); + +export const NonPasteChildComponentExample = ` +const FancyButton = React.forwardRef((props, ref) => ( + +)); + +const NonPasteChildComponent = () => { + return ( + + Fancy! + + ); +}; + +render( + +) +`.trim(); diff --git a/packages/paste-website/src/pages/components/popover/index.mdx b/packages/paste-website/src/pages/components/popover/index.mdx index 2989f087e6..811a80bcdf 100644 --- a/packages/paste-website/src/pages/components/popover/index.mdx +++ b/packages/paste-website/src/pages/components/popover/index.mdx @@ -81,15 +81,17 @@ above your UI. ### Popover compared to Tooltip - - - + + + + + ### Accessibility diff --git a/packages/paste-website/src/pages/components/tooltip/index.mdx b/packages/paste-website/src/pages/components/tooltip/index.mdx index e68ccca1b8..93b6df96b7 100644 --- a/packages/paste-website/src/pages/components/tooltip/index.mdx +++ b/packages/paste-website/src/pages/components/tooltip/index.mdx @@ -17,7 +17,7 @@ import Changelog from '@twilio-paste/tooltip/CHANGELOG.md'; import {useTooltipState, Tooltip} from '@twilio-paste/tooltip'; import {Callout, CalloutTitle, CalloutText} from '../../../components/callout'; import {SidebarCategoryRoutes} from '../../../constants'; -import {StateHookTabsExample} from '../../../component-examples/TooltipExamples'; +import {StateHookTabsExample, NonPasteChildComponentExample} from '../../../component-examples/TooltipExamples'; export const pageQuery = graphql` { @@ -82,22 +82,28 @@ the keyboard or on mouse hover. Tooltip follows the ### Tooltip compared to Popover - - - + + + + + -#### Accessibility +### Accessibility A tooltip **must only** be placed on a **natively focusable** HTML element. Good candidates include a [Paste Button](/components/button) or a [Paste Anchor](/components/anchor) if the tip also links to a help article. **Do not** place tooltips on non-focusable elements, like an icon. +If your tooltip wraps a natively focusable HTML element that includes only an icon, make sure you set the prop `decorative={false}`, and +give the icon a title. The title of the icon should be the accessible name for the button action, like "Delete phone number". The tooltip provides the additional context, like "You can delete phone numbers every 7 days". +This ensures the icon and tooltip are accessible to screen readers. Refer to the [focusable element example](#focusable-element) for implementation. + ## Examples ### Basic Tooltip @@ -155,19 +161,24 @@ A tooltip **must** be placed on a **focusable** element, such as an anchor or bu `} - - Icons and tooltips - - If your tooltip wraps an element that includes only an icon, make sure you set the `decorative` prop to false, and - give the icon a title. The title of the icon should describe what the icon is representing, and the tooltip - describes what that means. This ensures the icon and tooltip ara accessible to screen readers. - - +### Tooltips require their children to forwardRefs + +If you want to add a Tooltip around a React component, you must make sure that component [forwards refs](https://reactjs.org/docs/forwarding-refs.html). All Paste components do this by default, so this is only a concern when placing Tooltips around other types of components. + + + {NonPasteChildComponentExample} + ### Using state hooks - 🚨Power user move!🚨 + 🚨 Power user move! 🚨 Only use this property if you are a power user. It's very easy to break your implementation and unfortunately the Paste team will not be able to debug this for you. Proceed with extreme caution. diff --git a/packages/paste-website/src/pages/icons/usage-guidelines/index.mdx b/packages/paste-website/src/pages/icons/usage-guidelines/index.mdx index 8679fae624..69130154f5 100644 --- a/packages/paste-website/src/pages/icons/usage-guidelines/index.mdx +++ b/packages/paste-website/src/pages/icons/usage-guidelines/index.mdx @@ -43,9 +43,8 @@ export const pageQuery = graphql` - Our icon set is still limited, and more will be added over time. Please - file an icon request - or follow the guide on how to add an icon. + Can't find the icon you need? Check Streamline and contribute + it to the library following our guidelines. @@ -71,13 +70,13 @@ A title is required so assistive technology can infer equal meaning as a sighted - + (Title: "Add to cart") (Hover over icon for tooltip) - + (Title: "Plus") (Hover over icon for tooltip)