@vibe/core 4.2.6 → 4.3.0-alpha-9bd83.0

package/dist/metadata/accessibility/RadioButton.md

@@ -0,0 +1,11 @@
+# RadioButton - Accessibility Requirements
+
+1. Using an `id` is recommended for all instances to ensure proper label association.
+2. Always provide a `text` prop to ensure the radio button's purpose is clear to all users.
+3. Use the same `name` prop for all radio buttons in a group to ensure proper keyboard navigation and
+      screen reader grouping.
+4. Use `disabled` prop appropriately to indicate when radio buttons are not available for interaction.
+5. Use `disabledReason` prop to provide an explanation for disabled radio buttons, shown in a tooltip.
+6. Use `autoFocus` prop when a radio button should receive initial focus for keyboard navigation.
+7. Use `childrenTabIndex` prop to control the tab order when radio buttons have interactive children.
+8. Use `retainChildClick` prop to control whether clicking on children triggers radio button selection.

package/dist/metadata/accessibility/Search.md

@@ -0,0 +1,10 @@
+# Search - Accessibility Requirements
+
+1. Using an `id` is highly recommended for all instances to ensure proper label association.
+2. Use `inputAriaLabel` prop when you need to provide a custom accessible name for the search input.
+3. Use `searchResultsContainerId` prop to link the search input to its results container for screen reader
+      navigation.
+4. Use `currentAriaResultId` prop to indicate the currently active/focused search result.
+5. Use `ariaExpanded` prop to indicate when search results dropdown is open or closed.
+6. Use `ariaHasPopup` prop to specify the type of popup (e.g., 'listbox', 'menu') for search results.
+7. Use `clearIconLabel` prop to provide a custom accessible name for the clear button.

package/dist/metadata/accessibility/Tabs.md

@@ -0,0 +1,10 @@
+# Tabs - Accessibility Requirements
+
+1. Provide an `id` for the `TabList` and individual `Tab` components to enable
+      proper accessibility associations and unique identification.
+2. Ensure each `Tab` has clear, descriptive text content or appropriate icon with accessible name to
+      indicate what content will be displayed when selected.
+3. Use the `tabPanelIds` prop in `TabList` to establish proper relationships between tabs and
+      their corresponding tab panels. Pass an array of `TabPanel` IDs in the same order as the tabs.
+4. Provide unique `id` props for each `TabPanel` to enable the `aria-controls`
+      relationships established by the tabs.

package/dist/metadata/accessibility/TextArea.md

@@ -0,0 +1,17 @@
+# TextArea - Accessibility Requirements
+
+1. Using an `id` is highly recommended for all instances to ensure the best accessibility.
+2. Always provide a visible `label` to ensure the textarea's purpose is clear to all users.
+3. When using `label` or `helpText`, you must also provide an `id`. This is crucial,
+      as it allows screen readers to correctly associate the textarea with its label and description.
+4. For required fields, use the `required` prop to ensure proper screen reader announcements and native
+      browser validation.
+5. Provide descriptive error messages using the `error` prop with `helpText` to help users
+      understand and correct validation issues.
+6. The component automatically sets `aria-invalid` when validation fails, including when character count
+      exceeds `maxLength`.
+7. Character counting with `showCharCount` automatically provides accessibility labels for screen readers.
+8. Use the `aria-label` prop when a visible label is not desired but accessibility support is still
+      needed.
+9. The component automatically handles `aria-describedby` attributes for help text and character limit
+      information when applicable.

package/dist/metadata/accessibility/TextField.md

@@ -0,0 +1,16 @@
+# TextField - Accessibility Requirements
+
+1. Using an `id` is highly recommended for all instances to ensure the best accessibility.
+2. Always provide a visible `title` or an `inputAriaLabel` to ensure the input's purpose is
+      clear to all users.
+3. When using `title` or validation text, you must also provide an `id`. This is crucial, as it
+      allows screen readers to correctly associate the input with its label and description.
+4. For required fields, use the `required` prop to ensure proper screen reader announcements and native
+      browser validation.
+5. Provide descriptive error messages using `validation` prop with status 'error' to help users understand
+      and correct validation issues.
+6. When using icons, provide meaningful labels through `iconLabel` and{" "}
+      `secondaryIconLabel` props for screen reader users.
+7. For search inputs, use `type='search'` and provide `searchResultsContainerId` to properly
+      associate with search results.
+8. Character counting with `showCharCount` automatically provides accessibility labels for screen readers.

package/dist/metadata/accessibility/Toast.md

@@ -0,0 +1,4 @@
+# Toast - Accessibility Requirements
+
+1. For dismissible Toasts, use the `closeButtonAriaLabel` prop to provide a descriptive accessible name
+      for the close button (e.g., "Dismiss notification", "Close success message").

package/dist/metadata/accessibility/Toggle.md

@@ -0,0 +1,7 @@
+# Toggle - Accessibility Requirements
+
+1. Using an `id` is highly recommended for all instances to ensure proper label association.
+2. Use `ariaLabel` prop when you need to provide additional context for screen readers.
+3. Use `ariaLabelledBy` prop when an external element provides the accessible name for the toggle.
+4. Use `ariaControls` prop when the toggle controls other elements on the page.
+5. Use `disabled` prop appropriately to indicate when toggles are not available for interaction.

package/dist/metadata/accessibility/Tooltip.md

@@ -0,0 +1,11 @@
+# Tooltip - Accessibility Requirements
+
+1. Provide an `id` for the Tooltip to enable proper accessibility associations and unique identification.
+2. Ensure tooltip content is descriptive and provides meaningful information. Avoid using tooltips to repeat
+      information that's already visible in the UI.
+3. Configure `showTrigger` and `hideTrigger` events to ensure tooltips are accessible via both
+      mouse and keyboard interactions.
+4. Use `hideWhenReferenceHidden` prop to ensure tooltips disappear when their reference elements are
+      hidden or removed from the DOM.
+5. Avoid placing critical information only in tooltips - ensure the core functionality is accessible without tooltips
+      for users who cannot see them.