feat: Release the LiveRegion component (#2921)

pages/live-region-content-test.page.tsx

@@ -3,7 +3,7 @@
 import React, { useEffect } from 'react';
 
 import { Box, SpaceBetween } from '~components';
-import LiveRegion from '~components/internal/components/live-region';
+import LiveRegion from '~components/live-region';
 
 export default function LiveRegionContentTestPage() {
   useEffect(() => {

pages/live-region.page.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import * as React from 'react';
 
-import LiveRegion from '~components/internal/components/live-region';
+import LiveRegion from '~components/live-region';
 
 export default function LiveRegionXSS() {
   return (

src/__tests__/__snapshots__/documenter.test.ts.snap

@@ -9603,6 +9603,73 @@ The default is \`secondary\`, except inside the following components where it de
 }
 `;
 
+exports[`Documenter definition for live-region matches the snapshot: live-region 1`] = `
+{
+  "events": [],
+  "functions": [],
+  "name": "LiveRegion",
+  "properties": [
+    {
+      "defaultValue": "false",
+      "description": "Whether the announcements should be made using assertive aria-live.
+Assertive announcements interrupt the user's action, so they should only
+be used when absolutely necessary.",
+      "name": "assertive",
+      "optional": true,
+      "type": "boolean",
+    },
+    {
+      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
+      "description": "Adds the specified classes to the root element of the component.",
+      "name": "className",
+      "optional": true,
+      "type": "string",
+    },
+    {
+      "defaultValue": "false",
+      "description": "Determines whether to visually hide the contents of the \`children\` slot.",
+      "name": "hidden",
+      "optional": true,
+      "type": "boolean",
+    },
+    {
+      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
+use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
+use the \`id\` attribute, consider setting it on a parent element instead.",
+      "description": "Adds the specified ID to the root element of the component.",
+      "name": "id",
+      "optional": true,
+      "type": "string",
+    },
+    {
+      "defaultValue": ""div"",
+      "description": "The tag name to use for the wrapper around the \`children\` slot.",
+      "inlineType": {
+        "name": "LiveRegionProps.TagName",
+        "type": "union",
+        "values": [
+          "span",
+          "div",
+        ],
+      },
+      "name": "tagName",
+      "optional": true,
+      "type": "string",
+    },
+  ],
+  "regions": [
+    {
+      "description": "Use the rendered content as the source for the announcement text. When the
+text content inside this slot changes, it will be re-announced to
+assistive technologies.",
+      "isDefault": true,
+      "name": "children",
+    },
+  ],
+  "releaseStatus": "stable",
+}
+`;
+
 exports[`Documenter definition for mixed-line-bar-chart matches the snapshot: mixed-line-bar-chart 1`] = `
 {
   "events": [

src/__tests__/__snapshots__/test-utils-selectors.test.tsx.snap

@@ -360,7 +360,6 @@ exports[`test-utils selectors 1`] = `
     "awsui_root_1kjc7",
     "awsui_root_1qprf",
     "awsui_root_1t44z",
-    "awsui_root_3bgfn",
     "awsui_root_qwoo0",
     "awsui_root_vrgzu",
     "awsui_selectable-item_15o6u",
@@ -386,6 +385,9 @@ exports[`test-utils selectors 1`] = `
   "link": [
     "awsui_link_4c84z",
   ],
+  "live-region": [
+    "awsui_root_1pc7b",
+  ],
   "mixed-line-bar-chart": [
     "awsui_bar-group_1yz9c",
     "awsui_root_1yz9c",

src/attribute-editor/__tests__/attribute-editor.test.tsx

@@ -9,7 +9,7 @@ import Input from '../../../lib/components/input';
 import createWrapper, { AttributeEditorWrapper } from '../../../lib/components/test-utils/dom';
 
 import styles from '../../../lib/components/attribute-editor/styles.css.js';
-import liveRegionStyles from '../../../lib/components/internal/components/live-region/styles.css.js';
+import liveRegionStyles from '../../../lib/components/live-region/test-classes/styles.css.js';
 
 interface Item {
   key: string;

src/attribute-editor/additional-info.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
-import InternalLiveRegion from '../internal/components/live-region/internal';
+import InternalLiveRegion from '../live-region/internal';
 
 import styles from './styles.css.js';
 

src/attribute-editor/internal.tsx

@@ -7,13 +7,13 @@ import InternalBox from '../box/internal';
 import { ButtonProps } from '../button/interfaces';
 import { InternalButton } from '../button/internal';
 import { getBaseProps } from '../internal/base-component';
-import InternalLiveRegion from '../internal/components/live-region/internal';
 import { useContainerBreakpoints } from '../internal/hooks/container-queries';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { usePrevious } from '../internal/hooks/use-previous';
 import { useUniqueId } from '../internal/hooks/use-unique-id';
 import { SomeRequired } from '../internal/types';
+import InternalLiveRegion from '../live-region/internal';
 import { AdditionalInfo } from './additional-info';
 import { AttributeEditorForwardRefType, AttributeEditorProps } from './interfaces';
 import { Row } from './row';

src/button-dropdown/__tests__/button-dropdown.test.tsx

@@ -11,7 +11,7 @@ import { KeyCode } from '../../../lib/components/internal/keycode';
 import createWrapper, { ButtonWrapper, IconWrapper } from '../../../lib/components/test-utils/dom';
 
 import iconStyles from '../../../lib/components/icon/styles.css.js';
-import liveRegionStyles from '../../../lib/components/internal/components/live-region/styles.css.js';
+import liveRegionStyles from '../../../lib/components/live-region/test-classes/styles.css.js';
 
 jest.mock('@cloudscape-design/component-toolkit/internal', () => ({
   ...jest.requireActual('@cloudscape-design/component-toolkit/internal'),

src/button-group/icon-button-item.tsx

@@ -7,9 +7,9 @@ import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
 
 import { ButtonProps } from '../button/interfaces.js';
 import { InternalButton } from '../button/internal.js';
-import InternalLiveRegion from '../internal/components/live-region/internal';
 import Tooltip from '../internal/components/tooltip/index.js';
 import { CancelableEventHandler, ClickDetail } from '../internal/events/index.js';
+import InternalLiveRegion from '../live-region/internal.js';
 import { ButtonGroupProps } from './interfaces.js';
 
 import testUtilStyles from './test-classes/styles.css.js';

src/button/__tests__/button.test.tsx

@@ -6,7 +6,6 @@ import { act, fireEvent, render } from '@testing-library/react';
 import Button, { ButtonProps } from '../../../lib/components/button';
 import InternalButton from '../../../lib/components/button/internal';
 import createWrapper, { ButtonWrapper } from '../../../lib/components/test-utils/dom';
-import LiveRegionWrapper from '../../../lib/components/test-utils/selectors/internal/live-region';
 import { buttonRelExpectations, buttonTargetExpectations } from '../../__tests__/target-rel-test-helper';
 import { renderWithSingleTabStopNavigation } from '../../internal/context/__tests__/utils';
 
@@ -64,13 +63,11 @@ describe('Button Component', () => {
   describe.each([true, false])('loadingText property, with href: %s', withHref => {
     test('renders loadingText in a LiveRegion', () => {
       renderButton({ children: 'Button', loading: true, loadingText: 'Loading', href: withHref ? '#' : undefined });
-      expect(createWrapper().findByClassName(LiveRegionWrapper.rootSelector)!.getElement()).toHaveTextContent(
-        'Loading'
-      );
+      expect(createWrapper().findLiveRegion()!.getElement()).toHaveTextContent('Loading');
     });
     test('does not render loadingText if loading is false', () => {
       renderButton({ children: 'Button', loading: false, loadingText: 'Loading', href: withHref ? '#' : undefined });
-      expect(createWrapper().findByClassName(LiveRegionWrapper.rootSelector)).toBeNull();
+      expect(createWrapper().findLiveRegion()).toBeNull();
     });
   });
 

src/button/internal.tsx

@@ -16,7 +16,6 @@ import {
   getSubStepAllSelector,
   getTextFromSelector,
 } from '../internal/analytics/selectors';
-import InternalLiveRegion from '../internal/components/live-region/internal';
 import Tooltip from '../internal/components/tooltip/index.js';
 import { useButtonContext } from '../internal/context/button-context';
 import { useSingleTabStopNavigation } from '../internal/context/single-tab-stop-navigation-context';
@@ -29,6 +28,7 @@ import { useModalContextLoadingButtonComponent } from '../internal/hooks/use-mod
 import { usePerformanceMarks } from '../internal/hooks/use-performance-marks';
 import { useUniqueId } from '../internal/hooks/use-unique-id';
 import { checkSafeUrl } from '../internal/utils/check-safe-url';
+import InternalLiveRegion from '../live-region/internal';
 import { GeneratedAnalyticsMetadataButtonFragment } from './analytics-metadata/interfaces';
 import { ButtonIconProps, LeftIcon, RightIcon } from './icon-helper';
 import { ButtonProps } from './interfaces';

src/cards/__tests__/cards.test.tsx

@@ -10,7 +10,7 @@ import { useMobile } from '../../../lib/components/internal/hooks/use-mobile';
 import { CardsWrapper, PaginationWrapper } from '../../../lib/components/test-utils/dom';
 
 import styles from '../../../lib/components/cards/styles.css.js';
-import liveRegionStyles from '../../../lib/components/internal/components/live-region/styles.css.js';
+import liveRegionStyles from '../../../lib/components/live-region/test-classes/styles.css.js';
 
 jest.mock('../../../lib/components/internal/hooks/use-mobile', () => ({
   useMobile: jest.fn(),

src/cards/index.tsx

@@ -9,7 +9,6 @@ import { InternalContainerAsSubstep } from '../container/internal';
 import { useInternalI18n } from '../i18n/context';
 import { AnalyticsFunnelSubStep } from '../internal/analytics/components/analytics-funnel';
 import { getBaseProps } from '../internal/base-component';
-import InternalLiveRegion from '../internal/components/live-region/internal';
 import { CollectionLabelContext } from '../internal/context/collection-label-context';
 import { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';
 import useBaseComponent from '../internal/hooks/use-base-component';
@@ -18,6 +17,7 @@ import { useMobile } from '../internal/hooks/use-mobile';
 import useMouseDownTarget from '../internal/hooks/use-mouse-down-target';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
+import InternalLiveRegion from '../live-region/internal';
 import InternalStatusIndicator from '../status-indicator/internal';
 import {
   focusMarkers,

src/code-editor/__tests__/code-editor.test.tsx

@@ -22,7 +22,7 @@ import {
 
 import resizableStyles from '../../../lib/components/code-editor/resizable-box/styles.css.js';
 import styles from '../../../lib/components/code-editor/styles.css.js';
-import liveRegionStyles from '../../../lib/components/internal/components/live-region/styles.css.js';
+import liveRegionStyles from '../../../lib/components/live-region/test-classes/styles.css.js';
 
 jest.mock('@cloudscape-design/component-toolkit/internal', () => ({
   ...jest.requireActual('@cloudscape-design/component-toolkit/internal'),

src/code-editor/index.tsx

@@ -9,7 +9,6 @@ import { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';
 
 import { useInternalI18n } from '../i18n/context';
 import { getBaseProps } from '../internal/base-component';
-import InternalLiveRegion from '../internal/components/live-region/internal';
 import { useFormFieldContext } from '../internal/context/form-field-context';
 import { fireNonCancelableEvent } from '../internal/events';
 import useForwardFocus from '../internal/hooks/forward-focus';
@@ -20,6 +19,7 @@ import { useUniqueId } from '../internal/hooks/use-unique-id';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import { KeyCode } from '../internal/keycode';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
+import InternalLiveRegion from '../live-region/internal';
 import ErrorScreen from './error-screen';
 import { CodeEditorProps } from './interfaces';
 import { useChangeEffect } from './listeners';

src/code-editor/status-bar.tsx

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 
 import { InternalButton } from '../button/internal';
 import { useInternalI18n } from '../i18n/context.js';
-import InternalLiveRegion from '../internal/components/live-region/internal';
+import InternalLiveRegion from '../live-region/internal';
 import { CodeEditorProps } from './interfaces';
 import { TabButton } from './tab-button';
 import { getStatusButtonId, PaneStatus } from './util';

src/date-picker/index.tsx

@@ -13,7 +13,6 @@ import { InputProps } from '../input/interfaces';
 import { getBaseProps } from '../internal/base-component';
 import Dropdown from '../internal/components/dropdown';
 import FocusLock from '../internal/components/focus-lock';
-import InternalLiveRegion from '../internal/components/live-region/internal';
 import { fireNonCancelableEvent } from '../internal/events';
 import checkControlled from '../internal/hooks/check-controlled';
 import useForwardFocus from '../internal/hooks/forward-focus';
@@ -25,6 +24,7 @@ import { KeyCode } from '../internal/keycode';
 import { applyDisplayName } from '../internal/utils/apply-display-name.js';
 import { parseDate } from '../internal/utils/date-time';
 import { normalizeLocale } from '../internal/utils/locale';
+import InternalLiveRegion from '../live-region/internal';
 import { DatePickerProps } from './interfaces';
 import { getBaseDateLabel, getSelectedDateLabel, isValidFullDate } from './utils';
 

src/date-range-picker/__tests__/date-range-picker.test.tsx

@@ -9,8 +9,8 @@ import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
 import DateRangePicker, { DateRangePickerProps } from '../../../lib/components/date-range-picker';
 import FormField from '../../../lib/components/form-field';
 import TestI18nProvider from '../../../lib/components/i18n/testing';
-import { LiveRegionController } from '../../../lib/components/internal/components/live-region/controller.js';
 import { NonCancelableEventHandler } from '../../../lib/components/internal/events';
+import { LiveRegionController } from '../../../lib/components/live-region/controller.js';
 import createWrapper from '../../../lib/components/test-utils/dom';
 import DateRangePickerWrapper from '../../../lib/components/test-utils/dom/date-range-picker';
 import { changeMode } from './change-mode';

src/date-range-picker/calendar/header/index.tsx

@@ -5,7 +5,7 @@ import { add } from 'date-fns';
 
 import { renderMonthAndYear } from '../../../calendar/utils/intl';
 import { useInternalI18n } from '../../../i18n/context.js';
-import InternalLiveRegion from '../../../internal/components/live-region/internal';
+import InternalLiveRegion from '../../../live-region/internal';
 import { NextMonthButton, PrevMonthButton } from './header-button';
 
 import styles from '../../styles.css.js';
@@ -57,7 +57,9 @@ export default function CalendarHeader({
           onChangeMonth={onChangeMonth}
         />
       </div>
-      <InternalLiveRegion message={isSingleGrid ? currentMonthLabel : `${prevMonthLabel}, ${currentMonthLabel}`} />
+      <InternalLiveRegion hidden={true}>
+        {isSingleGrid ? currentMonthLabel : `${prevMonthLabel}, ${currentMonthLabel}`}
+      </InternalLiveRegion>
     </>
   );
 }

src/date-range-picker/calendar/index.tsx

@@ -9,11 +9,11 @@ import { getDateLabel, renderTimeLabel } from '../../calendar/utils/intl';
 import { getBaseDay } from '../../calendar/utils/navigation';
 import { useInternalI18n } from '../../i18n/context.js';
 import { BaseComponentProps } from '../../internal/base-component';
-import InternalLiveRegion from '../../internal/components/live-region/internal';
 import { useMobile } from '../../internal/hooks/use-mobile/index.js';
 import { useUniqueId } from '../../internal/hooks/use-unique-id';
 import { formatDateTime, parseDate, splitDateTime } from '../../internal/utils/date-time';
 import { normalizeLocale, normalizeStartOfWeek } from '../../internal/utils/locale';
+import InternalLiveRegion from '../../live-region/internal';
 import SpaceBetween from '../../space-between/internal';
 import { TimeInputProps } from '../../time-input/interfaces';
 import { DateRangePickerProps, RangeCalendarI18nStrings } from '../interfaces';

src/date-range-picker/dropdown.tsx

@@ -10,7 +10,7 @@ import { ButtonProps } from '../button/interfaces';
 import { InternalButton } from '../button/internal';
 import { useInternalI18n } from '../i18n/context';
 import FocusLock from '../internal/components/focus-lock';
-import InternalLiveRegion from '../internal/components/live-region/internal';
+import InternalLiveRegion from '../live-region/internal';
 import InternalSpaceBetween from '../space-between/internal';
 import Calendar from './calendar';
 import { DateRangePickerProps } from './interfaces';

src/drawer/implementation.tsx

@@ -6,9 +6,9 @@ import clsx from 'clsx';
 import { useAppLayoutToolbarEnabled } from '../app-layout/utils/feature-flags';
 import { useInternalI18n } from '../i18n/context';
 import { getBaseProps } from '../internal/base-component';
-import InternalLiveRegion from '../internal/components/live-region/internal';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 import { createWidgetizedComponent } from '../internal/widgets';
+import InternalLiveRegion from '../live-region/internal';
 import InternalStatusIndicator from '../status-indicator/internal';
 import { DrawerProps } from './interfaces';
 

src/flashbar/__tests__/flashbar.test.tsx

@@ -7,7 +7,7 @@ import { disableMotion } from '@cloudscape-design/global-styles';
 
 import Button from '../../../lib/components/button';
 import Flashbar, { FlashbarProps } from '../../../lib/components/flashbar';
-import { LiveRegionController } from '../../../lib/components/internal/components/live-region/controller.js';
+import { LiveRegionController } from '../../../lib/components/live-region/controller.js';
 import createWrapper from '../../../lib/components/test-utils/dom';
 import { mockInnerText } from '../../internal/analytics/__tests__/mocks';
 import { createFlashbarWrapper, findList, testFlashDismissal } from './common';

src/flashbar/flash.tsx

@@ -12,14 +12,14 @@ import { InternalButton } from '../button/internal';
 import InternalIcon from '../icon/internal';
 import { DATA_ATTR_ANALYTICS_FLASHBAR } from '../internal/analytics/selectors';
 import { BasePropsWithAnalyticsMetadata, getAnalyticsMetadataProps } from '../internal/base-component';
-import InternalLiveRegion from '../internal/components/live-region/internal';
 import { getVisualContextClassname } from '../internal/components/visual-context';
 import { PACKAGE_VERSION } from '../internal/environment';
 import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { isDevelopment } from '../internal/is-development';
 import { awsuiPluginsInternal } from '../internal/plugins/api';
 import { createUseDiscoveredAction, createUseDiscoveredContent } from '../internal/plugins/helpers';
 import { throttle } from '../internal/utils/throttle';
+import InternalLiveRegion from '../live-region/internal';
 import InternalSpinner from '../spinner/internal';
 import { GeneratedAnalyticsMetadataFlashbarDismiss } from './analytics-metadata/interfaces';
 import { FlashbarProps } from './interfaces';

src/form-field/__tests__/form-field-rendering.test.tsx

@@ -6,7 +6,7 @@ import { render } from '@testing-library/react';
 import FormField, { FormFieldProps } from '../../../lib/components/form-field';
 import createWrapper, { FormFieldWrapper } from '../../../lib/components/test-utils/dom';
 
-import liveRegionStyles from '../../../lib/components/internal/components/live-region/styles.css.js';
+import liveRegionStyles from '../../../lib/components/live-region/test-classes/styles.css.js';
 
 function renderFormField(props: FormFieldProps = {}) {
   const renderResult = render(<FormField {...props} />);