diff --git a/website/docs/.vitepress/sidebarConfig.ts b/website/docs/.vitepress/sidebarConfig.ts index 5bb5027f63..cf140a373c 100644 --- a/website/docs/.vitepress/sidebarConfig.ts +++ b/website/docs/.vitepress/sidebarConfig.ts @@ -190,6 +190,11 @@ export const sideBarConfig: SidebarConfig = [ activeMatch: '/components/breadcrumbs/', text: 'Breadcrumbs', }, + { + link: '/components/bulk-textarea/bulk-textarea', + activeMatch: '/components/bulk-textarea/', + text: 'BulkTextarea', + }, { link: '/components/button/button', activeMatch: '/components/button/', diff --git a/website/docs/components/bulk-textarea/bulk-textarea-a11y.md b/website/docs/components/bulk-textarea/bulk-textarea-a11y.md new file mode 100644 index 0000000000..43cde4ab67 --- /dev/null +++ b/website/docs/components/bulk-textarea/bulk-textarea-a11y.md @@ -0,0 +1,58 @@ +--- +title: BulkTextarea +tabs: Design('bulk-textarea'), A11y('bulk-textarea-a11y'), API('bulk-textarea-api'), Example('bulk-textarea-code'), Changelog('bulk-textarea-changelog') +--- + +_**THIS DOCUMENTATION SHOULD BE DOUBLE CHECKED ONCE MORE AFTER THE COMPONENT WILL BE READY FOR RELEASE.**_ + +## What component has + +### Roles and attributes + +The following list describes roles and attributes that component already has. + +Table: Roles and attributes + +| Component | Role / Attribute | Usage | +| ----------------------- | ----------------------- | ------------------------------------------------------------ | +| `BulkTextarea.InputField > div` | `textbox` | Identifies a field that allows the input of free-form text. | +| | `aria-multiline=”true”` | Indicates that a textbox accepts multiple lines of input. | +| | `aria-labelledby="IDREF"` | Refers to the element that contains the label of field. | +| | `aria-describedby="IDREF"` | Gives the item an accessible description by referring to the `aria-errormessage`, the tooltip, or both, describing the primary message or purpose of the item. | +| `BulkTextarea.InputField > div > p` | `aria-invalid="true"` | A row gets this property when it gets the `invalid` status. | +| | `aria-errormessage="[Your message here]"` | Identifies the element that provides an error message for the . | +| `BulkTextarea.Counter` | `aria-label="{n} out of {n}"` | Sets an accessible name for the element. | +| | `"aria-label={n} out of {n}, limit reached"` | Sets an accessible name for the element. | +| | `"aria-label={n} out of {n}, limit exceeded"` | Sets an accessible name for the element. | +| Buttons inside `BulkTextarea.ErrorsNavigation` | `aria-label="Next error"`, `aria-label="Previous error"` | Sets an accessible names for the buttons with no text. | + + + +### Keyboard support + +For detailed information about keyboard support for the Input, refer to the [Keyboard control guide](/core-principles/a11y/a11y-keyboard#input_i_textarea). + +## Considerations for developers and designers + +### Error messages + +::: tip +These messages aren't set by default in the component. +::: + +Set up error messages for tooltips that will be visible to sighted users and announced by assistive technologies: + +- A message for specific errors in invalid rows based on your validation rules +- A message for the entire input if you’re validating the whole thing + +## Resources + +- [A11y style guide](https://a11y-style-guide.com/style-guide/section-forms.html#kssref-forms-text-fields) describes core principles for the accessible inputs and textarea. +- Find live examples of accessible inputs with different types in [DigitalA11y project](https://www.digitala11y.com/demos/accessibility-of-html-input-types-examples/). + +## Other recommendations + +For more accessibility recommendations, refer to the the common [Accessibility guide](/core-principles/a11y/a11y). diff --git a/website/docs/components/bulk-textarea/bulk-textarea-api.md b/website/docs/components/bulk-textarea/bulk-textarea-api.md new file mode 100644 index 0000000000..ac802dd9d4 --- /dev/null +++ b/website/docs/components/bulk-textarea/bulk-textarea-api.md @@ -0,0 +1,4 @@ +--- +title: BulkTextarea +tabs: Design('bulk-textarea'), A11y('bulk-textarea-a11y'), API('bulk-textarea-api'), Example('bulk-textarea-code'), Changelog('bulk-textarea-changelog') +--- diff --git a/website/docs/components/bulk-textarea/bulk-textarea-changelog.md b/website/docs/components/bulk-textarea/bulk-textarea-changelog.md new file mode 100644 index 0000000000..ac802dd9d4 --- /dev/null +++ b/website/docs/components/bulk-textarea/bulk-textarea-changelog.md @@ -0,0 +1,4 @@ +--- +title: BulkTextarea +tabs: Design('bulk-textarea'), A11y('bulk-textarea-a11y'), API('bulk-textarea-api'), Example('bulk-textarea-code'), Changelog('bulk-textarea-changelog') +--- diff --git a/website/docs/components/bulk-textarea/bulk-textarea-code.md b/website/docs/components/bulk-textarea/bulk-textarea-code.md new file mode 100644 index 0000000000..37a21c48dc --- /dev/null +++ b/website/docs/components/bulk-textarea/bulk-textarea-code.md @@ -0,0 +1,8 @@ +--- +title: BulkTextarea +tabs: Design('bulk-textarea'), A11y('bulk-textarea-a11y'), API('bulk-textarea-api'), Example('bulk-textarea-code'), Changelog('bulk-textarea-changelog') +--- + +## Expanded BulkTextarea + +*HERE, WE SHOULD ADD AN EXAMPLE OF HOW OUR USERS CAN EXPAND THE COMPONENT IF THEY NEED TO CHANGE THE PLACEMENT OF THE CONTROLS.* diff --git a/website/docs/components/bulk-textarea/bulk-textarea.md b/website/docs/components/bulk-textarea/bulk-textarea.md new file mode 100644 index 0000000000..15893c998f --- /dev/null +++ b/website/docs/components/bulk-textarea/bulk-textarea.md @@ -0,0 +1,131 @@ +--- +title: BulkTextarea +tabs: Design('bulk-textarea'), A11y('bulk-textarea-a11y'), API('bulk-textarea-api'), Example('bulk-textarea-code'), Changelog('bulk-textarea-changelog') +--- + +## Description + +**BulkTextarea** is a multiline text field designed for entering lists of comma-separated values. + +You can enter a list manually using **Enter** or a comma, or paste a comma-separated list. You can also define your own rules for splitting values into rows. + +This component also provides the possibility to validate every row and the whole input. + +## Component composition + +![](static/bulktextarea-composition.png) + +Component consists of the following: + +- `BulkTextarea.InputField` +- `BulkTextarea.Counter` +- `BulkTextarea.InputField.Row` +- `BulkTextarea.ErrorItem` +- `BulkTextarea.ErrorsNavigation` +- `BulkTextarea.ClearAllButton` + +## Appearance + +### Sizes + +Component has two sizes: + +Table: BulkTextarea sizes + +| Size (font size) | Appearance example | +| ---------------- | ---------------------- | +| M (`--fs-200`) | ![](static/bulk-m.png) | +| L (`--fs-300`) | ![](static/bulk-l.png) | + +### Rows + +- Each row is numbered. +- Rows that fail validation are marked with a `Warning` icon on the right. +- Rows that exceed the limit are highlighted. + +![](static/bulktextarea-rows.png) + +## Counter + +BulkTextarea includes a counter displaying the number of rows entered. It's always positioned next to the text label. + +Table: BulkTextarea with counter + +| Size (font size) | Input with label | +| ---------------- | ---------------------- | +| M (`--fs-200`) | ![](static/bulk-m.png) | +| L (`--fs-300`) | ![](static/bulk-l.png) | + +### How counter works + +1. The counter shows the value limit and updates once user enters at least one character on an empty line. +2. The counter updates if the user deletes a line. +3. If the user presses **Enter** or types a comma on **an empty line**, they stay on the same line. This helps avoid adding unnecessary blank lines. +4. Duplicate lines are counted. + +You can set your own validation rules for how invalid values are counted in the counter: + +- On new line +- On blur +- On submit +- Immediately on entering at least one character _(we don't recommend this)_ + +### Values that reached or exceeded limit + +When the number of values reaches the limit, the counter changes its theme to `warning`. + +![](static/values-limit.png) + +Rows with values that exceed the limit are highlighted, and counter changes its theme to `danger`. + +![](static/values-off-limit.png) + +## Controls + +In the component, the controls have a default placement, but if you need to position them elsewhere, you can expand the component and arrange them differently. [Refer to the example](/components/bulk-textarea/bulk-textarea-code#expanded-bulktextarea). + +### Clear field button + +As soon as at least one character is entered in the field, a button for clearing the field appears next to it. By default, the button is positioned to the bottom right of the field. + +![](static/bulktextarea-clear-button.png) + +### Navigation buttons + +Error navigation shows up after all the values or a single value (depending on the validation method) are validated. The number of errors is shown next to the buttons. + +![](static/bulktextarea-error-navigation.png) + +CHECK THIS: **When a button is clicked, the cursor moves to the first or last invalid row, depending on the button.** The entire row's value is selected for quick deletion. The text next to the navigation buttons updates to _"Error {n} out of {n}"_ when the cursor is moved using the buttons, keyboard, or mouse. + +![](static/bulktextarea-error-navigation-1.png) + +When navigating between invalid rows, the text next to the buttons is updated. If you move from an invalid row to a valid row, the counter in the errors navigation buttons stays the same. + +### Resize control + +You can enable the resize control for the textarea, allowing users to adjust its size. They can stretch it horizontally, vertically, or both ways. + +When the textarea can't be stretched further, a scrollbar will appear after a certain number of rows. + +::: tip +Avoid making the textarea smaller than 160–200px in width and 3–4 rows in height. Working with large amounts of data in smaller sizes can be challenging, especially when it serves as a primary input in a form. +::: + +## Interaction + +### States + +BulkTextarea has the same states and styles as [Textarea](/components/textarea/textarea#interaction). + +### Validation + +**CHECK THIS** You can define your own validation rules for the input: instant, on submit, onBlur, or on new line. By default, our component uses on new line validation. + +### Tooltips + +If there are invalid values in the textarea after validation, you can show a tooltip for the entire textarea or for individual rows when the cursor is on them. + +![](static/bulktextarea-tooltip.png) + +![](static/bulktextarea-tooltip-row.png) diff --git a/website/docs/components/bulk-textarea/static/bulk-l.png b/website/docs/components/bulk-textarea/static/bulk-l.png new file mode 100644 index 0000000000..b246b7bec4 Binary files /dev/null and b/website/docs/components/bulk-textarea/static/bulk-l.png differ diff --git a/website/docs/components/bulk-textarea/static/bulk-m.png b/website/docs/components/bulk-textarea/static/bulk-m.png new file mode 100644 index 0000000000..e780f8637a Binary files /dev/null and b/website/docs/components/bulk-textarea/static/bulk-m.png differ diff --git a/website/docs/components/bulk-textarea/static/bulktextarea-clear-button.png b/website/docs/components/bulk-textarea/static/bulktextarea-clear-button.png new file mode 100644 index 0000000000..c1834df724 Binary files /dev/null and b/website/docs/components/bulk-textarea/static/bulktextarea-clear-button.png differ diff --git a/website/docs/components/bulk-textarea/static/bulktextarea-composition.png b/website/docs/components/bulk-textarea/static/bulktextarea-composition.png new file mode 100644 index 0000000000..e35c92d03a Binary files /dev/null and b/website/docs/components/bulk-textarea/static/bulktextarea-composition.png differ diff --git a/website/docs/components/bulk-textarea/static/bulktextarea-error-navigation-1.png b/website/docs/components/bulk-textarea/static/bulktextarea-error-navigation-1.png new file mode 100644 index 0000000000..2415c33827 Binary files /dev/null and b/website/docs/components/bulk-textarea/static/bulktextarea-error-navigation-1.png differ diff --git a/website/docs/components/bulk-textarea/static/bulktextarea-error-navigation.png b/website/docs/components/bulk-textarea/static/bulktextarea-error-navigation.png new file mode 100644 index 0000000000..e0214c97eb Binary files /dev/null and b/website/docs/components/bulk-textarea/static/bulktextarea-error-navigation.png differ diff --git a/website/docs/components/bulk-textarea/static/bulktextarea-rows.png b/website/docs/components/bulk-textarea/static/bulktextarea-rows.png new file mode 100644 index 0000000000..8cb5994ee7 Binary files /dev/null and b/website/docs/components/bulk-textarea/static/bulktextarea-rows.png differ diff --git a/website/docs/components/bulk-textarea/static/bulktextarea-tooltip-row.png b/website/docs/components/bulk-textarea/static/bulktextarea-tooltip-row.png new file mode 100644 index 0000000000..0902c58676 Binary files /dev/null and b/website/docs/components/bulk-textarea/static/bulktextarea-tooltip-row.png differ diff --git a/website/docs/components/bulk-textarea/static/bulktextarea-tooltip.png b/website/docs/components/bulk-textarea/static/bulktextarea-tooltip.png new file mode 100644 index 0000000000..c76d7487f7 Binary files /dev/null and b/website/docs/components/bulk-textarea/static/bulktextarea-tooltip.png differ diff --git a/website/docs/components/bulk-textarea/static/values-limit.png b/website/docs/components/bulk-textarea/static/values-limit.png new file mode 100644 index 0000000000..a46879e44b Binary files /dev/null and b/website/docs/components/bulk-textarea/static/values-limit.png differ diff --git a/website/docs/components/bulk-textarea/static/values-off-limit.png b/website/docs/components/bulk-textarea/static/values-off-limit.png new file mode 100644 index 0000000000..f2517f5b8f Binary files /dev/null and b/website/docs/components/bulk-textarea/static/values-off-limit.png differ diff --git a/website/docs/components/checkbox/checkbox-a11y.md b/website/docs/components/checkbox/checkbox-a11y.md index feeaff9d00..7052b02cfb 100644 --- a/website/docs/components/checkbox/checkbox-a11y.md +++ b/website/docs/components/checkbox/checkbox-a11y.md @@ -46,10 +46,10 @@ The list below will help you to keep in mind the necessary roles and attributes Table: Roles and attributes -| Role | Attribute | Usage | -| ------- | --------------------------- | --------------------------------------------------------------------- | -| `group` | | Identifies the `div` element as a group container for the checkboxes. | -| | `aria-labelledby="[IDREF]"` | Refers to the element that contains the label of the checkbox group. | +| Role | Attribute | Usage | +| ------- | ------------------------- | --------------------------------------------------------------------- | +| `group` | | Identifies the `div` element as a group container for the checkboxes. | +| | `aria-labelledby="IDREF"` | Refers to the element that contains the label of the checkbox group. | ## Resources diff --git a/website/docs/components/components-showcase/components-showcase.md b/website/docs/components/components-showcase/components-showcase.md index b5f7349922..6f9ce091b3 100644 --- a/website/docs/components/components-showcase/components-showcase.md +++ b/website/docs/components/components-showcase/components-showcase.md @@ -43,6 +43,12 @@ const group = { title: 'Breadcrumbs', route: '/intergalactic/components/breadcrumbs/breadcrumbs', type: 'components', + }, + bulkTextarea: { + title: 'BulkTextarea', + route: '/intergalactic/components/bulk-textarea/bulk-textarea', + disabled: false, + type: 'components', }, button: { title: 'Button', diff --git a/website/docs/components/pills/pills-a11y.md b/website/docs/components/pills/pills-a11y.md index b4fdea56e6..7d8dded0c0 100644 --- a/website/docs/components/pills/pills-a11y.md +++ b/website/docs/components/pills/pills-a11y.md @@ -14,20 +14,20 @@ With `behavior='auto'` (default): Table: Keyboard support -| Key | Function | -| --------------------------- | ---------------------------------------------------------------- | -| `Tab` | When focus moves to the Pills, it moves to the active `Pills.Item`. | -| `Left Arrow` , `Right Arrow` | Set `checked` value to the next/previous button in the group. If focus is on the last/first button, moves focus to the first/last button respectively. | +| Key | Function | +| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `Tab` | When focus moves to the Pills, it moves to the active `Pills.Item`. | +| `Left Arrow` , `Right Arrow` | Set `checked` value to the next/previous button in the group. If focus is on the last/first button, moves focus to the first/last button respectively. | With `behavior='manual'` : Table: Keyboard support -| Key | Function | -| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `Tab` | When focus moves to the Pills, the active `Pills.Item` gets it. | +| Key | Function | +| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | +| `Tab` | When focus moves to the Pills, the active `Pills.Item` gets it. | | `Left Arrow` , `Right Arrow` | Moves focus to the next/previous button in the group. If focus is on the last/first button, moves focus to the first/last button respectively. | -| `Space`/`Enter` | Change `Pills.Item` state to `active`. | +| `Space`/`Enter` | Change `Pills.Item` state to `active`. | See detailed information about the keyboard support for the clickable elements in the [Keyboard control guide](/core-principles/a11y/a11y-keyboard#keyboard_support_for_button_link_input_etc). @@ -35,16 +35,16 @@ See detailed information about the keyboard support for the clickable elements i Table: Roles and attributes -| Role | Attribute | Element | Usage | -| ----- | ---------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `radiogroup` | | `div` | Used for Pills with `behavior='auto'`. Identifies the `div` element as a container for a group of `radio` buttons. Isn’t focusable because focus is managed using a roving tabindex strategy as described below. | -| `radio` | | `div` | `div` | Used for Pills with `behavior='auto'`. Identifies the `div` element as an ARIA `radio` button. The accessible name is computed from the child text content of the `div` element. | -| `tablist` | | `div` | Used for Pills with `behavior='manual'`. Indicates that the element serves as a container for a set of tabs. | -| `tab` | | `button` | Used for Pills with `behavior='manual'`. Indicates the element serves as a `tab` control.| -| | `tabIndex="0"` | `div` | Makes the radio button focusable and includes it in the page `Tab` sequence. Set on only one radio in the radio group. On page load, is set on the first radio button in the radio group. Moves with focus inside the radio group so the most recently focused radio button is included in the page `Tab` sequence. This approach to managing focus is described in the section on [roving tabindex](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_roving_tabindex). | -| | `tabindex="-1"` | `div` | Makes the element focusable but not part of the page `Tab` sequence. Applied to all radio buttons contained in the radio group except for one that is included in the page `Tab` sequence. This approach to managing focus is described in the section on [Roving tabindex](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#keyboardnavigationinsidecomponents). | -| | `aria-checked="true"` | `div` | Identifies `radio` buttons which is checked. CSS attribute selectors (for example `[aria-checked="true"]` ) are used to synchronize the visual states with the value of the `aria-checked` attribute. | -| | `aria-checked="false"` | `div` | Identifies `radio` buttons which are not checked. CSS attribute selectors (for example `[aria-checked="false"]` ) are used to synchronize the visual states with the value of the `aria-checked` attribute. | +| Role | Attribute | Element | Usage | +| ------------ | ---------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `radiogroup` | | `div` | Used for Pills with `behavior='auto'`. Identifies the `div` element as a container for a group of `radio` buttons. Isn’t focusable because focus is managed using a roving tabindex strategy as described below. | +| `radio` | | `div` | `div` | Used for Pills with `behavior='auto'`. Identifies the `div` element as an ARIA `radio` button. The accessible name is computed from the child text content of the `div` element. | +| `tablist` | | `div` | Used for Pills with `behavior='manual'`. Indicates that the element serves as a container for a set of tabs. | +| `tab` | | `button` | Used for Pills with `behavior='manual'`. Indicates the element serves as a `tab` control. | +| | `tabIndex="0"` | `div` | Makes the radio button focusable and includes it in the page `Tab` sequence. Set on only one radio in the radio group. On page load, is set on the first radio button in the radio group. Moves with focus inside the radio group so the most recently focused radio button is included in the page `Tab` sequence. This approach to managing focus is described in the section on [roving tabindex](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_roving_tabindex). | +| | `tabindex="-1"` | `div` | Makes the element focusable but not part of the page `Tab` sequence. Applied to all radio buttons contained in the radio group except for one that is included in the page `Tab` sequence. This approach to managing focus is described in the section on [Roving tabindex](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#keyboardnavigationinsidecomponents). | +| | `aria-checked="true"` | `div` | Identifies `radio` buttons which is checked. CSS attribute selectors (for example `[aria-checked="true"]` ) are used to synchronize the visual states with the value of the `aria-checked` attribute. | +| | `aria-checked="false"` | `div` | Identifies `radio` buttons which are not checked. CSS attribute selectors (for example `[aria-checked="false"]` ) are used to synchronize the visual states with the value of the `aria-checked` attribute. | ## Considerations for developers @@ -64,14 +64,14 @@ The list below will help you to keep in mind the necessary roles and attributes Table: Attributes -| Attribute | Element | Usage | -| --------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `aria-labelledby="[IDREF]"` | `div` | Refers to the element that contains the label of the radio group. | +| Attribute | Element | Usage | +| ------------------------- | ------- | ----------------------------------------------------------------- | +| `aria-labelledby="IDREF"` | `div` | Refers to the element that contains the label of the radio group. | ## Resources -* [W3 radio group examples](https://www.w3.org/TR/wai-aria-practices-1.1/examples/radio/radio-1/radio-1.html) has detailed information about the radio group accessible behavior. -* [A11y style guide](https://a11y-style-guide.com/style-guide/section-forms.html#kssref-forms-radio-buttons) gives core recommendations for the accessible radio buttons. +- [W3 radio group examples](https://www.w3.org/TR/wai-aria-practices-1.1/examples/radio/radio-1/radio-1.html) has detailed information about the radio group accessible behavior. +- [A11y style guide](https://a11y-style-guide.com/style-guide/section-forms.html#kssref-forms-radio-buttons) gives core recommendations for the accessible radio buttons. ## Other recommendations diff --git a/website/docs/components/radio/radio-a11y.md b/website/docs/components/radio/radio-a11y.md index 7a0a02b288..5d387d21f9 100644 --- a/website/docs/components/radio/radio-a11y.md +++ b/website/docs/components/radio/radio-a11y.md @@ -11,11 +11,11 @@ tabs: Design('radio'), A11y('radio-a11y'), API('radio-api'), Example('radio-code Table: Keyboard support -| Key | Function | -| ----------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `Tab` | Moves focus to the checked `radio` button in the `radiogroup`. If a `radio` button isn’t checked, focus moves to the first `radio` button in the group. In case the focus is already on a `radio` button, the next `Tab` press will move the focus to the next focusable element on the page outside the `radiogroup`. | -| `Shift + Tab` | Moves focus to the previous focusable element. | -| `Up Arrow`, `Down Arrow`, `Left Arrow`, `Right Arrow` | Moves focus to and checks the next/previous `radio` button in the group. If focus is on the last/first `radio` button, moves focus to the first/last `radio` button respectively. The state of the previously checked `radio` button is changed to unchecked. | +| Key | Function | +| ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `Tab` | Moves focus to the checked `radio` button in the `radiogroup`. If a `radio` button isn’t checked, focus moves to the first `radio` button in the group. In case the focus is already on a `radio` button, the next `Tab` press will move the focus to the next focusable element on the page outside the `radiogroup`. | +| `Shift + Tab` | Moves focus to the previous focusable element. | +| `Up Arrow`, `Down Arrow`, `Left Arrow`, `Right Arrow` | Moves focus to and checks the next/previous `radio` button in the group. If focus is on the last/first `radio` button, moves focus to the first/last `radio` button respectively. The state of the previously checked `radio` button is changed to unchecked. | ### Roles and attributes @@ -25,7 +25,7 @@ Table: Roles and attributes | Component | Role | Attribute | Usage | | ------------- | ------------------------------------------ | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `RadioGroup` | `group` | | Identifies the `div` element as a container for a group of native `radio` inputs. Isn’t focusable because focus is managed using a roving tabindex strategy as described below. | +| `RadioGroup` | `group` | | Identifies the `div` element as a container for a group of native `radio` inputs. Isn’t focusable because focus is managed using a roving tabindex strategy as described below. | | `Radio.Value` | `radio` implicit on `` | | Identifies the input as an ARIA `radio` button. The accessible name is computed from the child text content of the `Radio.Text`. | | `Radio.Value` | | `tabIndex="0"` | Makes the radio button focusable and includes it in the page `Tab` sequence. Set on only one radio in the radio group. On page load, is set on the first radio button in the radio group. Moves with focus inside the radio group so the most recently focused radio button is included in the page `Tab` sequence. This approach to managing focus is described in the [W3C roving tabindex documentation](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_roving_tabindex). | | `Radio.Value` | | `tabIndex="-1"` | Makes the element focusable but not part of the page `Tab` sequence. Applied to all radio buttons contained in the radio group except for one that is included in the page `Tab` sequence. | @@ -36,9 +36,9 @@ If you use `RadioGroup` component to group radio buttons, add a common label and Table: Attributes -| Component | Attribute | Usage | -| ------------ | --------------------------- | ----------------------------------------------------------------- | -| `RadioGroup` | `aria-labelledby="[IDREF]"` | Refers to the element that contains the label of the radio group. | +| Component | Attribute | Usage | +| ------------ | ------------------------- | ----------------------------------------------------------------- | +| `RadioGroup` | `aria-labelledby="IDREF"` | Refers to the element that contains the label of the radio group. | ### Grouping with fieldset @@ -52,7 +52,7 @@ Table: Roles and attributes | Component | Attribute | Usage | | --------- | --------------------------- | ---------------------------------------------------- | -| `RadioGroup` | `aria-labelledby="[IDREF]"` | Refers to the element that contains the label of the radio group. | --> +| `RadioGroup` | `aria-labelledby="IDREF"` | Refers to the element that contains the label of the radio group. | --> ## Resources diff --git a/website/docs/components/textarea/textarea-a11y.md b/website/docs/components/textarea/textarea-a11y.md index 35ebc415d7..171e732a4c 100644 --- a/website/docs/components/textarea/textarea-a11y.md +++ b/website/docs/components/textarea/textarea-a11y.md @@ -9,7 +9,7 @@ tabs: Design('textarea'), A11y('textarea-a11y'), API('textarea-api'), Example('t ### Keyboard support -See detailed information about the keyboard support for the Input in the [Keyboard control guide](/core-principles/a11y/a11y-keyboard#input_i_textarea). +For detailed information about keyboard support for the Input, refer to the [Keyboard control guide](/core-principles/a11y/a11y-keyboard#input_i_textarea). ## Considerations for developers @@ -26,4 +26,4 @@ Find live examples in the [A11y style guide](https://a11y-style-guide.com/style- ## Other recommendations -See more accessibility recommendations in the common [Accessibility guide](/core-principles/a11y/a11y). +For more accessibility recommendations, refer to the the common [Accessibility guide](/core-principles/a11y/a11y). diff --git a/website/docs/components/textarea/textarea.md b/website/docs/components/textarea/textarea.md index 4551e959ad..4a112f565a 100644 --- a/website/docs/components/textarea/textarea.md +++ b/website/docs/components/textarea/textarea.md @@ -101,22 +101,22 @@ const App = PlaygroundGeneration((createGroupWidgets) => { ## Description -**Textarea** is a multiline text field designed for capturing a large amount of data, such as comments, descriptions, or lists of links. +**Textarea** is a multiline text field designed for capturing a large amount of data, such as comments or descriptions. ## Sizes Table: Textarea sizes -Size (height in px for one row of text) | Appearance example | -| ------------------------------------- | ---------------------------------- | -| M (28px) | ![](static/m.png) | -| L (40px) | ![](static/l.png) | +| Size (height in px for one row of text) | Appearance example | +| --------------------------------------- | ------------------ | +| M (28px) | ![](static/m.png) | +| L (40px) | ![](static/l.png) | ## Resize control You can enable the resize control for the textarea to allow users to adjust its size. They can stretch it horizontally, vertically, or both ways. -When the textarea cannot be stretched, a scrollbar will appear after a certain number of lines. We recommended adding scrollbars when the textarea has at least 4-5 lines. +When the textarea cannot be stretched, a scrollbar will appear after a certain number of lines. We recommended adding scrollbars when the textarea has at least 5 lines. ::: tip Avoid making the textarea smaller than 160-200px in width and 3-4 lines in height. Working with large amounts of data in smaller sizes can be challenging, especially when it serves as a primary input in a form. @@ -130,10 +130,10 @@ The counter can be positioned next to the text label or close to the textarea it Table: Textarea with counter -| Size (height in px for one row of text) | Input with label | Input without label | -| ------------------- | ------------------------------------------ | ---------------------- | -| M (28px) | ![](static/counter-M.png) | ![](static/counter-inner-M.png) | -| L (40px) | ![](static/counter-L.png) | ![](static/counter-inner-L.png) | +| Size (height in px for one row of text) | Input with label | +| --------------------------------------- | ------------------------- | +| M (28px) | ![](static/counter-M.png) | +| L (40px) | ![](static/counter-L.png) | ## Interaction @@ -141,14 +141,13 @@ The styles of the textarea in different states correspond to those of the [Input Table: Textarea states -| State | Normal | Focus | Disabled | Read-only | -| ------- | --------------- | ---------- | ------------------ | -------------- | -| Normal | ![](static/m.png) | ![](static/m-focus.png) | ![](static/m-disabled.png) | ![](static/m-readonly.png) | -| Valid | ![](static/m-valid.png) | ![](static/m-valid-focus.png) | | | -| Invalid | ![](static/m-invalid.png) | ![](static/m-invalid-focus.png) | | | +| State | Normal | Focus | Disabled | Read-only | +| ------- | ------------------------- | ------------------------------- | -------------------------- | -------------------------- | +| Normal | ![](static/m.png) | ![](static/m-focus.png) | ![](static/m-disabled.png) | ![](static/m-readonly.png) | +| Valid | ![](static/m-valid.png) | ![](static/m-valid-focus.png) | | | +| Invalid | ![](static/m-invalid.png) | ![](static/m-invalid-focus.png) | | | ## Usage in UX/UI - Use the Textarea when users need to input a substantial amount of data. For short inputs with 1-3 words, use the [Input](/components/input/input) component instead. - Provide a descriptive name for the textarea so that users understand the type of data they should enter. - diff --git a/website/src/static/components/bulktextarea.svg b/website/src/static/components/bulktextarea.svg new file mode 100644 index 0000000000..9686788937 --- /dev/null +++ b/website/src/static/components/bulktextarea.svg @@ -0,0 +1,11 @@ + + + + + + + + + + +