-
Notifications
You must be signed in to change notification settings - Fork 1k
Frequently Asked Questions (FAQs)
Tooltips need to be accessible to keyboard and screen reader users, so we want to ensure that they are only placed on focusable and hoverable elements. For example, plain text on a page isn't focusable, so keyboard and screen reader users would be unable to access the information in that tooltip.
If you need to display some additional context, consider using ContextualHelp.
Short answer, no. You can conclude this from the spectrum docs https://spectrum.adobe.com/page/tooltip/ even if it doesn’t state it explicitly, every TextField has a ContextualHelp. In addition, it says “Use tooltips to describe icons” of which a TextField will never be an icon, it's a TextField. It also says “Don’t use tooltips to communicate crucial information”. Putting a TextField's label in a Tooltip would count as crucial information.
Consider adding a description if you need to provide additional information about the field.
Tooltips are displayed on hover and on keyboard focus. These do not exist in touch interactions common to mobile devices. Tooltips should not be used for critical information; instead, consider using ContextualHelp.
Hoverable actions are not accessible and would exclude keyboard-only, screen reader, and mobile users, as they would not be able to open this Popover. This is why Tooltips display on both hover and focus and aren't available on mobile devices. For Popovers/Dialogs the primary action of the button (trigger) is to display them. If the desired functionality is critical information via a Popover as a giant Tooltip, consider using ContextualHelp.
This matches Spectrum's cursor guidelines, which specify that most clickable elements (with the exception of links), should use an arrow cursor for all states, including hover and down.
The intent is to better match native browser <button> behavior, the CSS spec, Microsoft interface guidelines and Apple interface guidelines.
If you only want to allow selecting the content of a single cell at a time, for example, to allow copying an object id, you can wrap your text in a span and prevent mouse events from bubbling to the row. Note that this will also prevent other actions from occurring on the table row when clicking on this cell, such as row selection and actions. A user will need to click on a different cell in order to perform those actions (if available).
<Cell>
<span
style={{ cursor: "text", WebkitUserSelect: "text" }}
onPointerDown={(e) => e.stopPropagation()}
onMouseDown={(e) => e.stopPropagation()}
>
Selectable Text
</span>
</Cell>See this codesandbox for an example.
If you want to allow copying the contents of an entire row, or multiple rows at once, for example to allow pasting into Excel, you'll need to set up an action outside the table. TableView uses virtualized scrolling, which means that only the cells that are currently visible are in the DOM. Therefore text selection across cells when some of them are out of view is not possible, and the formatting on paste may be garbled. For these reasons, it is better to offer an option to copy the contents of the selected rows in a format like CSV using a button outside the table, such as in an ActionBar or row level menu.
See this codesandbox for an example.
We do not support external scrolling to control the virtualization. Until we do, not providing a height may cause unpredictable behavior.
We do not support setting a maximum height for any of our dropdown components as per Spectrum Design. We've done this to emulate native dropdowns and to expose as many option as possible to users for a simpler UX (minimal scrolling required).
See our 2022-11-15 release notes for more detail
If your application stops working after upgrading any react-spectrum package, or the styles appear wrong or missing, it's likely your application has multiple versions of react-spectrum packages. To check if your application has multiple versions, you can run this script on your package.lock or yarn.lock file.
The script will output the react-spectrum packages that have multiple versions, and you should resolve the versions to get your application working again.
Some releases may include updates to our build infrastructure that results in changes to the format of the CSS class names used by React Spectrum. If your app or tests are relying on CSS selectors such as [class^="spectrum-Button"], you'll need to make updates. The simplest short-term solution is to change from ^= (starts with) to *= (contains), but as a reminder, Spectrum class names are considered implementation details that may change at any time so you should not rely on them. Instead, we recommend using attributes like role or data-testid to query for elements in tests, and ref to access elements in components. See the Testing guide to learn more.