@@ -72,9 +67,18 @@ content and layout of the design. On mobile, forms can only have one column.
Structure and spacing measurements for a double column form | px / rem
+### Recommended for fluid forms
+
+| Element | Property | px / rem | Spacing token |
+| -------------------- | ------------- | -------- | ------------- |
+| Form items | margin-bottom | 0 px | – |
+| Title area | margin-bottom | 40 / 2.5 | `$spacing-08` |
+| Gutter between items | – | 1 px | – |
+| Buttons | margin-top | 48 / 3 | `$spacing-09` |
+
-
+
diff --git a/src/pages/components/form/usage.mdx b/src/pages/components/form/usage.mdx
index 07b5ea09a6e..d62b798acbd 100755
--- a/src/pages/components/form/usage.mdx
+++ b/src/pages/components/form/usage.mdx
@@ -18,23 +18,21 @@ configure options.
Overview
Live demo
Formatting
-
Form logic
-
Validation and errors
+
Content
+
Behaviors
+
Additional guidance
+
Related
Feedback
## Overview
-Forms are used for submitting data so be as concise as possible when designing.
-Keep it short. Think about each field and what value the data will provide. What
-do you gain by collecting this information?
-
-#### Begin by asking:
-
-- Is this a piece of information that is valuable to us?
-- Is this a piece of information that is so valuable that it's worth preventing
- the user from continuing if they choose not to provide it?
+The form component is configurable to fit various use cases and layouts. It is
+purposely simple out of the box, and users are responsible for configuring it to
+suit their needs. For in-depth design guidance on the different ways to
+configure and extend a form, see the
+[form pattern](/patterns/forms-pattern/#spacing).
## Live demo
@@ -72,7 +70,7 @@ do you gain by collecting this information?
id="test2"
invalidText="Invalid error message."
labelText="Text input label"
- placeholder="Placeholder text"
+ placeholder="Optional placeholder text"
/>
-
+
-
-
+
-### Button placement
+
-On non-modal or in-page forms, align single buttons or Secondary / Primary
-button groups to the left. Buttons should align with the form controls
-regardless of the user‘s window width.
+
-
-
+
+
+
-
+
-Single button alignment in forms
+
-
-
+1. **Header** (optional): The addition of a title and description as a header
+ that can provide the user with additional context or instructions.
+2. **Form body**: Area where users provide information. Information can be
+ entered through various input fields, including text fields, checkboxes, and
+ many other types. Input components contain labels and helper text that the
+ user submits correct data.
+3. **Footer**: Provides actions that allow users to submit or cancel the data
+ entered in the form.
-
+### Styling
-Secondary / Primary button alignment in forms
+Forms can use two styles of inputs: fixed and fluid. They share the same
+functionality but look visually different and have different alignment rules.
+
+| Style | Appearance | Alignment | Use case |
+| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| Fixed | Uses a traditional style of input where the label is positioned outside and above the input field. Fixed forms can use any of the three fixed input field sizes: small (32px), medium (40px), or large (48px). | Form inputs are equally stacked with 32px/2rem padding separating each component. | Use when white space is needed between input components, if smaller components are required, or in productive moments like in complex forms. |
+| Fluid form | An alternative input style where the label is placed inside the input field and aligned with the user input text. Fluid inputs only have one size at the height of 64px. | Form inputs are stacked flush to one another with 0px of padding between them. | Use in expressive moments or where larger form components can aid in emphasizing the featured form. |
+
+
+
+
+
-### Multistep forms
+### Alignment
+
+In a form, input components should vertically align with all other form
+components. Whether a form aligns flush to grid columns or hangs in the gutters
+depends on the style of form input you are using as well as the grid mode. Fixed
+forms typically use a wide grid mode and align flush to the grid columns
+prioritizing vertical label alignment. Fluid forms use the condensed grid and
+can hang into the gutter without causing label misalignment. Fluid forms are
+architectural and remain cohesive by never allowing vertical or horizontal space
+between inputs.
+
+
+
+
+
+
+
+
+
+
+
+
+
-When the primary action implies a navigation step forward, as in a wizard, align
-single buttons or Secondary/Primary button groups to the right. This position
-conveys the “next step” intention.
+
+
+
+
+
+
+
+
+
+
+
+
+
+### Two column forms
+
+If a form has more than one column, then the columns should be proportional and
+align to grid columns when possible. The space between form columns is
+determined by the grid mode you are using; fixed forms use the wide grid mode
+with 32px padding between form columns, versus fluid forms use the condensed
+grid mode with 1px padding. The narrow grid mode (16px) is typically not used in
+forms as it often places the text in the gutter.
-
-
-Single button alignment in a wizard
+
+When using two columns, the row should respond as a group. For example, if the
+left column form item becomes invalid and pushes form content down to
+accommodate space for an error message, then the accompanying right form item
+will also grow to account for the needed space.
+
-
-
-Secondary / Primary button pair alignment in a wizard
+
+### Vertical spacing
+
+The typical recommended vertical spacing between components is 32px. For all
+guidance and recommendation for spacing for forms, see the
+[form pattern](/patterns/forms-pattern/#spacing).
+
## Content
### Labels
-Effective form labeling helps users understand what information to enter into a
-Text Input. Using a placeholder text as a label is often applied as a
-space-saving method. However, this is not recommended because it hides context
-and presents accessibility issues.
+Effective labeling helps users understand what information to enter into a text
+input. Text fields should always have a label. There are rare instances where
+the context of an input negates the need for a visible label, but we advise you
+to consult an accessibility expert before proceeding with a label-less design.
-#### Accessibility best practices for labels:
+#### Best practices for labels
-- Labels must be visible when an input gets focus.
-- Labels must be announced to the screen reader on focus.
-- Ensure the helper text that appears under an input is read when an assistive
- technology user stops at an input using ARIA.
-- Use sentence-style capitalization (only the first word in a phrase and any
- proper nouns capitalized).
+- Use sentence-style capitalization for all labels except for product names and
+ proper nouns.
+- Keep the label short and concise.
+- Do not use colons after label names.
### Default values
Where possible, add programmatic assistance. Detect and pre-fill inputs to
-reduce errors and save time. When the software can't determine the value that
+reduce errors and save time. When the software can’t determine the value that
belongs in an input, use type-ahead to make suggestions. Use sentence-case for
default values, detected values, and auto-completion text.
### Helper text
-Helper text is pertinent information that assists the user in completing a
-field. Helper text is always available when the input is focused and appears
-underneath the label. Use sentence-style capitalization, and in most cases,
-write the text as full sentences with punctuation.
-
-### Placeholder text
-
-Placeholder text provides hints or examples of what to enter. Placeholder text
-disappears after the user begins entering data into the Input and should not
-contain crucial information. Use sentence-style capitalization, and in most
-cases, write the text as a direct statement without punctuation.
-
-## Form logic
-
-- **Radio buttons** are used when there is a list of two or more options that
- are mutually exclusive and the user must select exactly one choice. In other
- words, clicking a non-selected radio button will deselect whatever other
- button was previously selected in the list.
-- **Checkboxes** are used when there are lists of options and the user may
- select any number of choices, including zero, one, or several. In other words,
- each checkbox is independent of all other checkboxes in the list, so checking
- one box doesn’t uncheck the others. A stand-alone checkbox, or a toggle can be
- used for a single option that the user can turn on or off.
-- **Select elements** are used for fields in which a single selection is
- required and there are a large number of possible options.
+Optional helper text is pertinent information that assists the user in correctly
+completing a field. Helper text should always be available when the input is
+focused. It is often used to explain the correct data format. Helper text
+appears as persistent text under a fixed input (helper text is not available in
+fluid input, which uses tooltips instead). Helper text is the preferred method
+of assisting users because it is always visible for the user to reference
+without additional effort.
+
+#### Best practices for helper text
+
+- Use sentence-style capitalization, and in most cases, write the text as full
+ sentences with punctuation.
+- When used, helper text that appears persistently underneath the field is
+ replaced by an error or warning message if a state change occurs.
+
+### Tooltip help
+
+Tooltips can be added inline with a form label if additional non-pertinent
+information is needed to assist the user in correctly completing a field, such as
+context setting. Tooltip content may include more in-depth information about the
+field or the options the user is choosing from. Links to additional information
+or references may also be included if needed. In certain situations where complex
+instructions or additional context would be appropriate, tooltips can be used in
+addition to the helper text. However, it is recommended that all pertinent
+assistive information to form completion—such as format content—be presented
+simply and directly as helper text under the field and not be in a tooltip.
-
+
-## Validation and errors
+#### Tooltips in fluid components
-### Error messaging
+Fluid inputs are an exception to the no critical information in tooltips rule.
+Due to their architectural nature, fluid inputs do not provide the allotted
+space under the field needed for helper text. All assistive text whether
+pertinent or additional, is provided through a tooltip when using fluid inputs.
-Effective error messaging can help the user to understand the problem and how to
-fix it. First, inform the user what has happened, then provide guidance on next
-steps or possible resolutions.
-[Inline notifications](/components/notification/usage) can be used to state the
-general problem with the users input, such as _“Please input the required
-fields.”_ Inline Notifications can occur pre or post submission, depending on
-the type of data the user is inputting.
+
+
+
+
+
+
+
-### Form validation
+### Placeholder text
-We recommend validating the users data before form submission. Use visual cues
-to guide the user as to where the problem lies within the form. This will help
-to easily identify the elements that need to be corrected.
+Optional placeholder text is text that appears inside an input field at a lower
+contrast than the user input text. It provides hints or examples of what to
+enter. Placeholder text disappears after the user begins entering data into the
+input. As such, it should not be used as a replacement for a persistent label
+nor should it contain crucial information. Sometimes providing an example of the
+kind of thing the user might enter is useful. Using certain examples as
+placeholder text is allowed but it still should not contain essential
+information.
-The validation should appear when the user has clicked away from the text field.
-Once the user corrects the errors within the text field, the validation should
-disappear once the data is rendered as valid.
+#### Best practices for placeholder text
-The validation label below the field should be as informative as possible when
-describing the issue with the users data. For example, if password limitations
-require 16 characters, but the user inputs a password with only six characters,
-the text should read something like, _"Password must be at least 16
-characters."_
+- Use sentence-style capitalization, and in most cases, write the text as a
+ direct statement without punctuation.
+- Placeholder text is not required and by default not shown in text input
+ fields.
+- Placeholder text can be harmful to user interactions and should only be added
+ when necessary.
-
+
+### Further guidance
+
+For further content guidance, see Carbon’s
+[content guidelines](/guidelines/content/overview/).
+
+## Behaviors
+
### Optional versus required fields
-When designing your form, consider the purpose and the use case, and note if the
-majority of the fields are **required** or **optional**.
+Forms items can be labeled as either optional or required depending on several
+factors. A common distinction in IBM products for using required or optional is
+the forms complexity.
-- If the majority of the fields are required, mark **only** the optional fields
- with (optional).
-- If the majority of the fields are optional, mark **only** the required fields
- with (required).
+1. **Simple forms** - generally shorter and/or user- or consumer-oriented; such
+ as sign-up and contact forms and checkout screens. Most of the fields will
+ tend to be required.
+2. **Complex forms** - generally longer and product-oriented; contain properties
+ and settings that are used to configure Enterprise software. Although they
+ will usually contain at least one required field, the majority of the fields
+ will tend to be optional.
-Using the appropriate pattern based on the use case will reduce visual noise and
-clutter; helping your users to more quickly and accurately complete the form. It
-will also ensure consistency through and across products.
+Note if the majority of the fields are **required** or **optional**, as the
+overall number of form fields for your entire product should inform your
+treatment. The pattern used should be consistent throughout your product, or at
+minimum, consistent between all of the same types of form within your product.
-If you choose to mark only optional form fields, it is recommended that an
-instruction precedes the form stating either “All fields are required” or “All
-fields are required unless marked optional”.
+- If the majority of the fields are required, mark **only** the optional field
+ labels with _(optional)_.
+- If the majority of the fields are optional, mark **only** the required field
+ labels with _(required)_.
+
+
+
+
-
- Example of a short user sign-up form using the optional pattern
-
+
+
+
+
+
+
+
+
+
+### Form controls
+
+Carbon provides a variety of data input components that enable a user to
+enter or select data. The components are divided into three different
+interaction types.
+
+| Type | Overview |
+| ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Free form inputs](/patterns/forms-pattern/#text-inputs) | Free-form text inputs are the most commonly used components in forms. They allow a user to enter any configuration of letters or numbers. Common free-form inputs include: text input and text area. |
+| [Selection controls](/patterns/forms-pattern/#data-inputs) | Selection controls offer users a selection from pre-determined options. Common selection controls include: checkboxes, radio buttons, file uploaders, toggles, and select lists (combo box and multiselect). |
+| [Bound entry controls](/patterns/forms-pattern/#data-inputs) | Bound entry controls allow users to input numeric data, like dates and times and may restrict user input to a certain range. Common bound entry controls include: number input, date picker, and slider components. |
+
+### States
+
+The following are common states that can be applied to components when used in a
+form.
+
+| State | When to use |
+| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| _Enabled_ | When a text input is live but a user is not directly interacting with it. This is commonly referred to as the default or normal state of the component. An enabled text input field can contain no content, placeholder text, or user generate content. |
+| _Active_ | When a user is actively typing content into the field. |
+| _Focus_ | When a user `tabs` to or clicks on the text input, it becomes focused, indicating the user has successfully navigated to the component. |
+| _Error_ | When the user input is invalid or a required text input has not been filled in. It can also be triggered due to a system error. This state requires a user response before data can be submitted or saved. |
+| _Warning_ | When you need to call the user's attention to an exception condition. The condition might not be an error but can cause problems if not resolved. |
+| _Disabled_ | When the user is not allowed to interact with the text input due to either permissions, dependencies, or pre-requisites. The disabled state completely removes the interactive function from a component. The styling is not subject to WCAG contrast compliance. |
+| _Skeleton_ | Use on an initial page load to indicate that the text input has not yet fully loaded. |
+| _Read-only_ | _Coming soon!_ |
+
-
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Additional guidance
+
+The form pattern provides additional and elaborative guidance to the information
+found with the form component. Below is a list of key sections available in the
+pattern.
+
+| Topic | Overview |
+| --------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| [Buttons in forms](/patterns/forms-pattern/#buttons]) | Provides guidance on button alignment, emphasis, placement, and naming in relation to a form. |
+| [Errors and validation](/forms-pattern/#errors-and-validation) | Effective and immediate error messaging can help the user to understand the problem and how to fix it. |
+| [Form layout](/patterns/forms-pattern/#designing-a-form) | Additional guidance around layout, spacing, and columns in a form. |
+| [Designing for longer forms](/patterns/forms-pattern/#designing-for-longer-forms) | Techniques to help make longer forms less overwhelming, including guidance for accordion and multistep forms. |
+| [Form variants](/patterns/forms-pattern/#variants) | Forms may be presented as dedicated pages, side panels, or dialogs depending on the use case and the situation. |
+
+## Related
+
+
+
+
+#### Components
+
+- [Button](/components/button/usage)
+
+
+#### Patterns
-
- Example of product configuration properties using the required pattern
-
+- [Dialogs](/patterns/dialog-pattern)
diff --git a/src/pages/components/toggletip/accessibility.mdx b/src/pages/components/toggletip/accessibility.mdx
new file mode 100644
index 00000000000..96b6101da92
--- /dev/null
+++ b/src/pages/components/toggletip/accessibility.mdx
@@ -0,0 +1,76 @@
+---
+title: Toggletip
+description:
+ Toggletips use the disclosure pattern to toggle the visibility of a popover.
+ They display additional, hidden information upon the click of a UI trigger
+ element and can contain interactive elements.
+tabs: ['Usage', 'Style', 'Code', 'Accessibility']
+---
+
+import { Toggletip } from '@carbon/react';
+
+
+
+Toggletips display and hide additional information upon the click of a UI
+trigger element and can contain interactive elements.
+
+
+
+
+ What Carbon provides
+ Development considerations
+
+
+## What Carbon provides
+
+Carbon already incorporates accessibility into the toggletip component.
+Designers only need to indicate the toggletip’s content.
+
+### Keyboard interactions
+
+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, and focus remains on 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.
+
+
+
+
+
+
+
+ The information icon button that triggers the toggletip is in the page tab
+ order, as are interactive elements inside an open toggletip.
+
+
+
+
+
+
+
+
+
+
+
+ Toggletips appear when the information icon button is activated and disappear
+ by activating the icon again, pressing Esc, or tabbing away from the
+ toggletip.
+
+
+
+
+
+## Development considerations
+
+Keep these considerations in mind if you are modifying Carbon or creating a
+custom component.
+
+- The icon button has `aria-label="Show information"`.
+- The button uses `aria-expanded` to set toggletip visibility and
+ `aria-controls` to handle navigation to the content.
diff --git a/src/pages/components/toggletip/code.mdx b/src/pages/components/toggletip/code.mdx
index 6c331545ec8..0e917d5eefd 100644
--- a/src/pages/components/toggletip/code.mdx
+++ b/src/pages/components/toggletip/code.mdx
@@ -4,7 +4,7 @@ description:
Toggletips use the disclosure pattern to toggle the visibility of a popover.
They display additional, hidden information upon the click of a UI trigger
element and can contain interactive elements.
-tabs: ['Usage', 'Style', 'Code']
+tabs: ['Usage', 'Style', 'Code', 'Accessibility']
---
diff --git a/src/pages/components/toggletip/images/toggletip-accessibility-1.png b/src/pages/components/toggletip/images/toggletip-accessibility-1.png
new file mode 100644
index 00000000000..c4ef29704d2
Binary files /dev/null and b/src/pages/components/toggletip/images/toggletip-accessibility-1.png differ
diff --git a/src/pages/components/toggletip/images/toggletip-accessibility-2.png b/src/pages/components/toggletip/images/toggletip-accessibility-2.png
new file mode 100644
index 00000000000..815e0d464a3
Binary files /dev/null and b/src/pages/components/toggletip/images/toggletip-accessibility-2.png differ
diff --git a/src/pages/components/toggletip/style.mdx b/src/pages/components/toggletip/style.mdx
index b327992cd48..e41a6f1ba8b 100644
--- a/src/pages/components/toggletip/style.mdx
+++ b/src/pages/components/toggletip/style.mdx
@@ -4,7 +4,7 @@ description:
Toggletips use the disclosure pattern to toggle the visibility of a popover.
They display additional, hidden information upon the click of a UI trigger
element and can contain interactive elements.
-tabs: ['Usage', 'Style', 'Code']
+tabs: ['Usage', 'Style', 'Code', 'Accessibility']
---
## Color
diff --git a/src/pages/components/toggletip/usage.mdx b/src/pages/components/toggletip/usage.mdx
index cb0e0a8067e..9cc74d3e301 100644
--- a/src/pages/components/toggletip/usage.mdx
+++ b/src/pages/components/toggletip/usage.mdx
@@ -4,7 +4,7 @@ description:
Toggletips use the disclosure pattern to toggle the visibility of a popover.
They display additional, hidden information upon the click of a UI trigger
element and can contain interactive elements.
-tabs: ['Usage', 'Style', 'Code']
+tabs: ['Usage', 'Style', 'Code', 'Accessibility']
---
import { Toggletip } from '@carbon/react';
diff --git a/src/pages/components/tooltip/accessibility.mdx b/src/pages/components/tooltip/accessibility.mdx
index 495c3f0d36c..a0b64806eab 100644
--- a/src/pages/components/tooltip/accessibility.mdx
+++ b/src/pages/components/tooltip/accessibility.mdx
@@ -8,7 +8,7 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
-Carbon’s tooltips appear accessibly on both hover and focus. Designers need only
+Carbon’s tooltips are accessible on hover and focus. Designers only need to
annotate the tooltip’s text content.
@@ -31,25 +31,22 @@ interaction.
The primary use of tooltips is to display the text labels of icon-only buttons.
Since each button is in the page’s tab order, the tooltip appears automatically
when the button receives focus. Tooltips disappear when the user moves focus
-away from the button. The tips can also be dismissed by pressing `Esc`. The
-tooltips themselves only contain text and are not interactive, so do not have
-any other keyboard operations.
+away from the button or by pressing `Esc`. The tooltips contain only text and
+are not interactive, so they do not have any other keyboard operations.
The definition tooltip provides information about a term or text phrase. The
text that serves as the trigger has a dotted underline. When the trigger
receives focus, the definition tooltip is displayed. Like the button tooltip,
-the definition can be dismissed by pressing Esc or by navigating away from the
-trigger.
-
-Note: icon-only buttons retain their regular interaction. (They can be activated
-by pointer click or by pressing Enter or Space.) A definition tooltip is unusual
-in that its trigger only exists to take focus or hover, and is not otherwise
-interactive (it can’t be clicked or acted upon).
+the definition can be dismissed by pressing `Esc` or navigating away from the
+trigger. Icon-only buttons retain their regular interaction. Icon-only buttons
+maintain their normal interaction and can be activated by clicking or pressing
+`Enter` or `Space`. A definition tooltip trigger only exists to take focus or
+hover and is otherwise not interactive.
-
+
@@ -64,10 +61,11 @@ from the trigger.
-
+
- Both definition and icon-button tooltips can be dismissed by pressing Esc.
+ Both definition and icon-only button tooltips can be dismissed by pressing
+ Esc.
@@ -77,25 +75,26 @@ from the trigger.
### Annotate the text for the tooltip
-If designers do not specify the text, tooltips are less likely to be implemented
-by developers. Every icon-only button needs a tooltip, except for icons with
-clearly established names or functions (such as Bold and Italics). Designers can
-provide the text by using a tooltip in their designs or simply
-[annotating the icon-only button](https://carbondesignsystem-2xrdev89e-carbon-design-system.vercel.app/components/button/accessibility#labeling).
+If designers do not specify the text, developers are less likely to implement
+tooltips. Every icon-only button needs a tooltip, except for icons with clearly
+established names or functions (such as Bold and Italics). Designers can provide
+the text by using a tooltip in their designs or simply annotating the
+[icon-only button](https://carbondesignsystem.com/components/button/accessibility#labeling).
For definition tooltips, see the
-[Usage](https://carbondesignsystem.com/components/tooltip/usage) page for
-information on the length and styling for tooltip content.
+[usage guidance](https://carbondesignsystem.com/components/tooltip/usage) for
+information on the length and styling of tooltip content.
-
+
+
+
-
-
+
@@ -107,7 +106,7 @@ custom component.
- The span containing the tooltip has a role of `tooltip` with
`aria-hidden="true"`.
-- the trigger uses `aria-labelledby` to announce the tooltip text.
+- The trigger uses `aria-labelledby` to announce the tooltip text.
- See the tooltip pattern in the
[ARIA authoring practices](https://w3c.github.io/aria-practices/#tooltip) for
more considerations.
diff --git a/src/pages/components/tooltip/images/tooltip-accessibility-tab-1.png b/src/pages/components/tooltip/images/tooltip-accessibility-tab-1.png
new file mode 100644
index 00000000000..7fc11a6f696
Binary files /dev/null and b/src/pages/components/tooltip/images/tooltip-accessibility-tab-1.png differ
diff --git a/src/pages/components/tooltip/images/tooltip-accessibility-tab-2.png b/src/pages/components/tooltip/images/tooltip-accessibility-tab-2.png
new file mode 100644
index 00000000000..e7236c4d7fd
Binary files /dev/null and b/src/pages/components/tooltip/images/tooltip-accessibility-tab-2.png differ
diff --git a/src/pages/components/tooltip/images/tooltip-accessibility-tab-3-do.png b/src/pages/components/tooltip/images/tooltip-accessibility-tab-3-do.png
new file mode 100644
index 00000000000..70aaa523bec
Binary files /dev/null and b/src/pages/components/tooltip/images/tooltip-accessibility-tab-3-do.png differ
diff --git a/src/pages/components/tooltip/images/tooltip-accessibility-tab-3-dont.png b/src/pages/components/tooltip/images/tooltip-accessibility-tab-3-dont.png
new file mode 100644
index 00000000000..d49a2a84ed2
Binary files /dev/null and b/src/pages/components/tooltip/images/tooltip-accessibility-tab-3-dont.png differ
diff --git a/yarn.lock b/yarn.lock
index 2746f7efa44..e4302a80728 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1154,28 +1154,28 @@
resolved "https://registry.yarnpkg.com/@carbon/colors/-/colors-10.29.0.tgz#92b1f8822a0ca07d23daba12d360f90debcc3d26"
integrity sha512-Ga20vVFGrhEgALIVZoWbcooWOVnx7Ox8GbRWlZDEAe6JUbz6ynDKiq3td7GtFVk0ELRCIV8gVu3F/PfssyhwQA==
-"@carbon/colors@^11.10.0":
- version "11.10.0"
- resolved "https://registry.yarnpkg.com/@carbon/colors/-/colors-11.10.0.tgz#e977c22bc833543254e12e0f73aeba0f9afd4dc8"
- integrity sha512-P/cMU7/sPY8a0sY0lS2dOy2VcXR56911BMPZWRF4mi6l/swFamELB0H6DHxywN5nqQMEBGBAw8ie4+bGdEhi6A==
+"@carbon/colors@^11.11.0":
+ version "11.11.0"
+ resolved "https://registry.yarnpkg.com/@carbon/colors/-/colors-11.11.0.tgz#564435be2bd64487c6b72187323f27c55bb043b4"
+ integrity sha512-dQyPt9zLN4DwkIWynEKl8t0EI7yEFD9ZbN3UQYRANL0htH7QsgFyStm3TQ91IsCMRAfP1BHF2vsIPXEggPcUqA==
"@carbon/colors@^11.6.0":
version "11.6.0"
resolved "https://registry.yarnpkg.com/@carbon/colors/-/colors-11.6.0.tgz#fe6f806c20fa4ad60eaeb2d9700c5de684d37b05"
integrity sha512-LE3aaQvRVR9zI2ao4+SHP8vfEaXtfffq4wXHvbPwoTK+I3Db745XuNWeWxC3Rte2uNPS9sjeEyCid2Q0wY/tSw==
-"@carbon/elements@^11.16.0":
- version "11.16.0"
- resolved "https://registry.yarnpkg.com/@carbon/elements/-/elements-11.16.0.tgz#50520d9ad48cab7c988ec6a86ddb9388c54731c0"
- integrity sha512-CVvvOY32j313b/nK/Q8jSamZigwyV28UvXiDIjYQVNdA3LttPVPXm3F+kVGFg4RogE0xjf4hl+Mr01wuCLBa/A==
+"@carbon/elements@^11.18.0-rc.0":
+ version "11.18.0-rc.0"
+ resolved "https://registry.yarnpkg.com/@carbon/elements/-/elements-11.18.0-rc.0.tgz#8b867ebc4762c86359dcffd1ceae44b20c2a8416"
+ integrity sha512-iP4ALQKFOpNO5a9U8NUrZ8H8k93+ROR5zYQvrbV1UHjFpvDANZC6eaJUAbGd/Q+rDvmYAHTCSn8brIFF54qWlw==
dependencies:
- "@carbon/colors" "^11.10.0"
- "@carbon/grid" "^11.9.0"
- "@carbon/icons" "^11.13.0"
- "@carbon/layout" "^11.9.0"
- "@carbon/motion" "^11.7.0"
- "@carbon/themes" "^11.14.0"
- "@carbon/type" "^11.13.0"
+ "@carbon/colors" "^11.11.0"
+ "@carbon/grid" "^11.10.0"
+ "@carbon/icons" "^11.15.0-rc.0"
+ "@carbon/layout" "^11.10.0"
+ "@carbon/motion" "^11.8.0"
+ "@carbon/themes" "^11.16.0-rc.0"
+ "@carbon/type" "^11.14.0"
"@carbon/elements@^11.8.0":
version "11.11.0"
@@ -1200,6 +1200,13 @@
resolved "https://registry.yarnpkg.com/@carbon/feature-flags/-/feature-flags-0.9.0.tgz#13ad061bf7977d65326b35ff87d70419f6132587"
integrity sha512-uNCRkxsNwLdJVNwQ5S5vrLAm4yawWzhFBwyP9EgXVmRzJH85Aim+miC+QNjRXntJDYhZYDuLABTeb3VD692ypA==
+"@carbon/grid@^11.10.0":
+ version "11.10.0"
+ resolved "https://registry.yarnpkg.com/@carbon/grid/-/grid-11.10.0.tgz#c22b4447c559b6e99cc3784ce615294efb337314"
+ integrity sha512-DL0us6Ms0YNDjW7a+8ZMByLkg1rQ2A0M/9e+LdnseyD/aWfUWGsPH/S2h7FNkNClywPOYwbU+NgYY8N72F7C5g==
+ dependencies:
+ "@carbon/layout" "^11.10.0"
+
"@carbon/grid@^11.5.0", "@carbon/grid@^11.7.0":
version "11.7.0"
resolved "https://registry.yarnpkg.com/@carbon/grid/-/grid-11.7.0.tgz#ea9e151074287a573c5231dc9920d21b1e975aca"
@@ -1207,13 +1214,6 @@
dependencies:
"@carbon/layout" "^11.7.0"
-"@carbon/grid@^11.9.0":
- version "11.9.0"
- resolved "https://registry.yarnpkg.com/@carbon/grid/-/grid-11.9.0.tgz#c338db810f63318c6fafa5b3371b0fa6b3f81992"
- integrity sha512-dOxOH+X1YtWi8KGE1inw83LmK1ehHNtLpQG8E+iNH5eJJSay7IBNWHRQiTSyHX/UG5XlRqDNoTXmnxKBdXC7Wg==
- dependencies:
- "@carbon/layout" "^11.9.0"
-
"@carbon/icon-helpers@^10.25.0":
version "10.25.0"
resolved "https://registry.yarnpkg.com/@carbon/icon-helpers/-/icon-helpers-10.25.0.tgz#bfe2465e165bb78477c77494610552064fcab09f"
@@ -1224,10 +1224,10 @@
resolved "https://registry.yarnpkg.com/@carbon/icon-helpers/-/icon-helpers-10.34.0.tgz#04b2957d07e0a98bb66c97c6b71430a955243887"
integrity sha512-Ov9EBc1tR/DDrMI0pN1drj2jb27ISmYFBLdDji+aivVJkLPy8R/jikJOsOBgIq2kUjQJYNN199k2acHKjZdYIg==
-"@carbon/icon-helpers@^10.36.0":
- version "10.36.0"
- resolved "https://registry.yarnpkg.com/@carbon/icon-helpers/-/icon-helpers-10.36.0.tgz#2052af78d320a1a9b69010a19a56eaf7dd5115b1"
- integrity sha512-omrDngPr3HnwecIDzCNYrpPPdLX0kilyHxHpnztKlT7ePTbn5fb+ndmnWaqxjVDFqQgSvfJhTqTUQnwPpGHpAA==
+"@carbon/icon-helpers@^10.37.0":
+ version "10.37.0"
+ resolved "https://registry.yarnpkg.com/@carbon/icon-helpers/-/icon-helpers-10.37.0.tgz#354f50f4269b1a455fb4d848508c5e7f7adc6ea8"
+ integrity sha512-YXed2JUSCGddp3UnY5OffR3W8Pl+dy9a+vfUtYhSLH9TbIEBR6EvYIfvruFMhA8JIVMCUClUqgyMQXM5oMFQ0g==
"@carbon/icons-react@^10.32.0":
version "10.42.0"
@@ -1238,12 +1238,12 @@
"@carbon/telemetry" "0.0.0-alpha.6"
prop-types "^15.7.2"
-"@carbon/icons-react@^11.13.0":
- version "11.13.0"
- resolved "https://registry.yarnpkg.com/@carbon/icons-react/-/icons-react-11.13.0.tgz#7c10c2096e46e6dc4fec6b937d70a64bbc7446f9"
- integrity sha512-6eW3zHmhw1RRUHW1v99tJKsyaUOTJkM5DwtxbeiD/Ifzheutua1lNqSP97EAuaHJyfs1m49PMNL7dOBBNICc0Q==
+"@carbon/icons-react@^11.15.0-rc.0":
+ version "11.15.0-rc.0"
+ resolved "https://registry.yarnpkg.com/@carbon/icons-react/-/icons-react-11.15.0-rc.0.tgz#af7b26a7fb35f1e8401352d19f7a681459e829ad"
+ integrity sha512-I5v+qw81zByIFR28sbzWvsTH9vdjj1K1wMv0FttfzYKpPRkwRcK2/mTyKtQ0uk8KmLtGoo7YvEWWicaFzfwxPg==
dependencies:
- "@carbon/icon-helpers" "^10.36.0"
+ "@carbon/icon-helpers" "^10.37.0"
"@carbon/telemetry" "0.1.0"
prop-types "^15.7.2"
@@ -1256,35 +1256,35 @@
"@carbon/telemetry" "0.1.0"
prop-types "^15.7.2"
-"@carbon/icons@^11.13.0":
- version "11.13.0"
- resolved "https://registry.yarnpkg.com/@carbon/icons/-/icons-11.13.0.tgz#0aaa5c31e9569267402c512870006286dca860fa"
- integrity sha512-hzNNQ17L4RmZCoXFe82O2XeTOwJGy+VpIMKwzg7/vchT6yulVAJl6CKKBGf6+EF0QbgnLJAowPThF5xpgBJZGA==
+"@carbon/icons@^11.15.0-rc.0":
+ version "11.15.0-rc.0"
+ resolved "https://registry.yarnpkg.com/@carbon/icons/-/icons-11.15.0-rc.0.tgz#e4613ee1d6f777100d97a84bb1c5b91679ebd96a"
+ integrity sha512-in4DpGfcjFDVwJDVsUrmWH3dmzpXzjI4En8jw+1Jc1YY/OjV2Xogk1T3obeOzfli97idM2hfXx1ow6oJHvKOqQ==
"@carbon/icons@^11.9.0":
version "11.9.0"
resolved "https://registry.yarnpkg.com/@carbon/icons/-/icons-11.9.0.tgz#61ef4094554c060849167fbb495d6d26a928a22e"
integrity sha512-4quGKGaShUtKDfvK3b2wPv/6PMSf8EF1pz0W1+69MIWxyrT7W8kE/jHHhiqtwBoBc8bvARr+ivHSLievt9xbiA==
+"@carbon/layout@^11.10.0":
+ version "11.10.0"
+ resolved "https://registry.yarnpkg.com/@carbon/layout/-/layout-11.10.0.tgz#995ecc9d3ea8d5eca6982825b819062b097c738d"
+ integrity sha512-rQm5V0w+J8LsNnwq/Z1rXVHxlFbcccu06eJGqi9uGkrZZLT7UXJz9E27gIstxyiYeE+Sd7wq6iQayxWvahYjCQ==
+
"@carbon/layout@^11.7.0":
version "11.7.0"
resolved "https://registry.yarnpkg.com/@carbon/layout/-/layout-11.7.0.tgz#55689dd65a36c33bf40c668e240252fd08c240f4"
integrity sha512-p4YQvW8U5Go0Tz1PZZgllGSPmoq8xBB5PHByuHiAjzwGclxPsBmY6Ea7tftINFW8VlcjDcampyT8VfZXhP2lFg==
-"@carbon/layout@^11.9.0":
- version "11.9.0"
- resolved "https://registry.yarnpkg.com/@carbon/layout/-/layout-11.9.0.tgz#52889f37c63eedf826bd908c66db2c28bc579c58"
- integrity sha512-IIGDB7fNGJo6hdMA9UiQ/3hfY9iqYb1OY7+nuL1d1/XH3MTqLlo6DKgjv+dJB1Y+dnR4Bevm3JoY4FA1uuB6Fw==
-
"@carbon/motion@^11.5.0":
version "11.5.0"
resolved "https://registry.yarnpkg.com/@carbon/motion/-/motion-11.5.0.tgz#f54c0eb3298e3ea88bda789f02b4c5ef22a0a8d4"
integrity sha512-5QEALh+xZzICdgVLanSpiDfBTErzVgEze/xUKs7ZdSbd6p1FaDKDGvCmj9RCsaz/CMVHIWo65MshIglSWX5Xvw==
-"@carbon/motion@^11.7.0":
- version "11.7.0"
- resolved "https://registry.yarnpkg.com/@carbon/motion/-/motion-11.7.0.tgz#ae1a1e2573dfb1fffa523fd24f7ca3d08dad12dd"
- integrity sha512-RQWMQEyk7orhRovUdZjjLe8UL4cOH0qyUc4Ra/dEvl1+/gXKOC3r0rASZX28xp1QuqrNRfMnHeD12MyhM3JdcA==
+"@carbon/motion@^11.8.0":
+ version "11.8.0"
+ resolved "https://registry.yarnpkg.com/@carbon/motion/-/motion-11.8.0.tgz#9f00378a3cfedb44f66a98720ed9f581ae8ca642"
+ integrity sha512-g58Y63h/Rhu7lzkdwOLIMAj4UPLYKAJrIC5evJHG8R1SVkCLv1OYbQ0wXv7QTWxOj6nUqCF3nqJBnRGfzUFTWg==
"@carbon/pictograms-react@^11.30.0":
version "11.33.0"
@@ -1295,19 +1295,19 @@
"@carbon/telemetry" "0.1.0"
prop-types "^15.7.2"
-"@carbon/pictograms-react@^11.36.0":
- version "11.36.0"
- resolved "https://registry.yarnpkg.com/@carbon/pictograms-react/-/pictograms-react-11.36.0.tgz#0157441d3187ebbcfd88a92b48852c2023767e5f"
- integrity sha512-ormqkru0gUo/XrJxOgMcolwIhgv/HCNn6euqp5P4jf2Hdym8XfqePjWcn3oL7zQEa9I5jYIDQfSTj5JxXR3jRw==
+"@carbon/pictograms-react@^11.37.0":
+ version "11.37.0"
+ resolved "https://registry.yarnpkg.com/@carbon/pictograms-react/-/pictograms-react-11.37.0.tgz#84611fb74c58db0fdcb06b719bbf5dcff93be9cf"
+ integrity sha512-xpFAcKfdBoBuQlUu4F1F6vwepiscce0P3U10y3l+O0Wn/L3d5D6SFS4JubPU1AQ44mzEl4VXOMe6AZQ+a/Iqsg==
dependencies:
- "@carbon/icon-helpers" "^10.36.0"
+ "@carbon/icon-helpers" "^10.37.0"
"@carbon/telemetry" "0.1.0"
prop-types "^15.7.2"
-"@carbon/pictograms@^12.10.0":
- version "12.10.0"
- resolved "https://registry.yarnpkg.com/@carbon/pictograms/-/pictograms-12.10.0.tgz#b453cab49d61b75165644a8a6adcafa3ceb72995"
- integrity sha512-vutelA3lMtlk6ZNifADQWev4pLmQWccYmdHjsyxQt3qTBrbbvZ651T1PcIho3Oo0YCTTJOlFxt3NdOStaHP6bg==
+"@carbon/pictograms@^12.11.0":
+ version "12.11.0"
+ resolved "https://registry.yarnpkg.com/@carbon/pictograms/-/pictograms-12.11.0.tgz#62fb5f7d195baf80445f639ea62cb2859467eb5f"
+ integrity sha512-6u2jG7/6d5Dc0WHZ1zi/rFIsW4w0Rb/e/bhgDYaJpr9MqWY4ibNkYBb9XDPpe+0ZDp+5pOL2jE7TxR9/jEWNwA==
"@carbon/react@^1.11.0":
version "1.14.0"
@@ -1336,16 +1336,16 @@
wicg-inert "^3.1.1"
window-or-global "^1.0.1"
-"@carbon/react@^1.19.0":
- version "1.19.0"
- resolved "https://registry.yarnpkg.com/@carbon/react/-/react-1.19.0.tgz#5649378b866a4de1110b43a06051de674ae23275"
- integrity sha512-FwoAUE2Re4Z8kQLBmQdGNRgp6nZPDV6NifEASHqWKqO5QZA6X5aTDFa8Ge1vfjMa3ickquYA5Nki9rMUAnUNDQ==
+"@carbon/react@^1.21.0-rc.0":
+ version "1.21.0-rc.0"
+ resolved "https://registry.yarnpkg.com/@carbon/react/-/react-1.21.0-rc.0.tgz#2f2c5dc8950b5005712193cdc9a0acafd0ab48f9"
+ integrity sha512-+uKyYFAcpwDN0lYxvnOMX0DIcHGldmI6RgkngvwnKeDhvK2wf10ec4lnjjCe5wtKJUbaxq6Nb3CYyKqimZ3yWg==
dependencies:
"@babel/runtime" "^7.18.3"
"@carbon/feature-flags" "^0.11.0"
- "@carbon/icons-react" "^11.13.0"
- "@carbon/layout" "^11.9.0"
- "@carbon/styles" "^1.19.0"
+ "@carbon/icons-react" "^11.15.0-rc.0"
+ "@carbon/layout" "^11.10.0"
+ "@carbon/styles" "^1.21.0-rc.0"
"@carbon/telemetry" "0.1.0"
classnames "2.3.2"
copy-to-clipboard "^3.3.1"
@@ -1377,18 +1377,18 @@
"@carbon/type" "^11.10.0"
"@ibm/plex" "6.0.0-next.6"
-"@carbon/styles@^1.19.0":
- version "1.19.0"
- resolved "https://registry.yarnpkg.com/@carbon/styles/-/styles-1.19.0.tgz#c33e5a9bdae9b663a0bdf795b30a546af54dff53"
- integrity sha512-MRulfGIcEjzDk8V3X08MGkpUIuOWta3SAtqYqD/Us697kOs7bywwt6a0ct2sJtlw5EqieJaCDmyrwPNAIEj/Lw==
+"@carbon/styles@^1.21.0-rc.0":
+ version "1.21.0-rc.0"
+ resolved "https://registry.yarnpkg.com/@carbon/styles/-/styles-1.21.0-rc.0.tgz#c39bfc425c64abeff518076f72a6080480fa3938"
+ integrity sha512-ny8ro6Vq0sMtX/8pX2p5wAkI605YNVVgWUTyBgrc3sv2qFU5lLnhXnzoH1Q70KhqKCyKpMJnhBkCFah5sj8QNA==
dependencies:
- "@carbon/colors" "^11.10.0"
+ "@carbon/colors" "^11.11.0"
"@carbon/feature-flags" "^0.11.0"
- "@carbon/grid" "^11.9.0"
- "@carbon/layout" "^11.9.0"
- "@carbon/motion" "^11.7.0"
- "@carbon/themes" "^11.14.0"
- "@carbon/type" "^11.13.0"
+ "@carbon/grid" "^11.10.0"
+ "@carbon/layout" "^11.10.0"
+ "@carbon/motion" "^11.8.0"
+ "@carbon/themes" "^11.16.0-rc.0"
+ "@carbon/type" "^11.14.0"
"@ibm/plex" "6.0.0-next.6"
"@carbon/telemetry@0.0.0-alpha.6":
@@ -1422,14 +1422,14 @@
"@carbon/type" "^11.10.0"
color "^4.0.0"
-"@carbon/themes@^11.14.0":
- version "11.14.0"
- resolved "https://registry.yarnpkg.com/@carbon/themes/-/themes-11.14.0.tgz#9edaaf63e064942319e9e4b65d74d7a07bef8473"
- integrity sha512-koE0b2LOLWYW0B0Xnegz6frJD/1VChmYQ4skKMRfCe9Ei63ZUlokHarxggUlVySva43xEzePEPXkmIDCt+yucA==
+"@carbon/themes@^11.16.0-rc.0":
+ version "11.16.0-rc.0"
+ resolved "https://registry.yarnpkg.com/@carbon/themes/-/themes-11.16.0-rc.0.tgz#07196e1d4608f795ca388a0bc4bfbe905e7fc264"
+ integrity sha512-eZT7CXe7lhnH0Jv9eONlK4hkJAZ2rcBGTYHk61Usr/SM1M8OBqRwvVeK/Cp7qJnbP+/MLdNvrIH7aRcFEn6dSw==
dependencies:
- "@carbon/colors" "^11.10.0"
- "@carbon/layout" "^11.9.0"
- "@carbon/type" "^11.13.0"
+ "@carbon/colors" "^11.11.0"
+ "@carbon/layout" "^11.10.0"
+ "@carbon/type" "^11.14.0"
color "^4.0.0"
"@carbon/type@^11.10.0":
@@ -1440,13 +1440,13 @@
"@carbon/grid" "^11.7.0"
"@carbon/layout" "^11.7.0"
-"@carbon/type@^11.13.0":
- version "11.13.0"
- resolved "https://registry.yarnpkg.com/@carbon/type/-/type-11.13.0.tgz#703f88d9578c6bacebb15cbd083f92fe26ac98b3"
- integrity sha512-JdFej2s96kFncTzgwkZ0Ph/2ftLzxb3F9EC9mdmeOX/HFbWDJD/P7UhrOB22TyRxWfTXjXtmMLQP6b5QJFsX6A==
+"@carbon/type@^11.14.0":
+ version "11.14.0"
+ resolved "https://registry.yarnpkg.com/@carbon/type/-/type-11.14.0.tgz#154b83c5791bb7beebf9117eb571a00c8463be7e"
+ integrity sha512-t8agJ2FfX9V7sYbmoIXYbM+yu62whozBlbSaJVnrMFpvRPOsEdWt0US4CAdyCvxytRsJqr+SfyScXx2phUrFgg==
dependencies:
- "@carbon/grid" "^11.9.0"
- "@carbon/layout" "^11.9.0"
+ "@carbon/grid" "^11.10.0"
+ "@carbon/layout" "^11.10.0"
"@carbon/utils-position@1.1.1":
version "1.1.1"
@@ -10799,9 +10799,9 @@ json-stable-stringify-without-jsonify@^1.0.1:
integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
json5@^1.0.1:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
- integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
+ integrity sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==
dependencies:
minimist "^1.2.0"
@@ -11789,9 +11789,9 @@ minimatch@^3.1.1, minimatch@^3.1.2:
brace-expansion "^1.1.7"
minimist@^1.2.0, minimist@^1.2.3, minimist@^1.2.5, minimist@^1.2.6:
- version "1.2.6"
- resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
- integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
+ version "1.2.7"
+ resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.7.tgz#daa1c4d91f507390437c6a8bc01078e7000c4d18"
+ integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==
mississippi@^1.2.0, mississippi@^1.3.0:
version "1.3.1"