diff --git a/pages/live-region-content-test.page.tsx b/pages/live-region-content-test.page.tsx index 82c278475b..2e62053905 100644 --- a/pages/live-region-content-test.page.tsx +++ b/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(() => { diff --git a/pages/live-region.page.tsx b/pages/live-region.page.tsx index 8c582120c6..39e5800e44 100644 --- a/pages/live-region.page.tsx +++ b/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 ( diff --git a/src/__tests__/__snapshots__/documenter.test.ts.snap b/src/__tests__/__snapshots__/documenter.test.ts.snap index 023eeb56e0..3a7b87b5e9 100644 --- a/src/__tests__/__snapshots__/documenter.test.ts.snap +++ b/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": [ diff --git a/src/__tests__/__snapshots__/test-utils-selectors.test.tsx.snap b/src/__tests__/__snapshots__/test-utils-selectors.test.tsx.snap index ecfb1cdd9f..0ebdc3ec31 100644 --- a/src/__tests__/__snapshots__/test-utils-selectors.test.tsx.snap +++ b/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", diff --git a/src/attribute-editor/__tests__/attribute-editor.test.tsx b/src/attribute-editor/__tests__/attribute-editor.test.tsx index a466803bdd..92f53e4f20 100644 --- a/src/attribute-editor/__tests__/attribute-editor.test.tsx +++ b/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; diff --git a/src/attribute-editor/additional-info.tsx b/src/attribute-editor/additional-info.tsx index 8e01053b7f..bdd600bade 100644 --- a/src/attribute-editor/additional-info.tsx +++ b/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'; diff --git a/src/attribute-editor/internal.tsx b/src/attribute-editor/internal.tsx index cd56944e6f..ab67be6017 100644 --- a/src/attribute-editor/internal.tsx +++ b/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'; diff --git a/src/button-dropdown/__tests__/button-dropdown.test.tsx b/src/button-dropdown/__tests__/button-dropdown.test.tsx index 0b88c26b5b..7da8f28825 100644 --- a/src/button-dropdown/__tests__/button-dropdown.test.tsx +++ b/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'), diff --git a/src/button-group/icon-button-item.tsx b/src/button-group/icon-button-item.tsx index 33099c200c..cc8006bb2e 100644 --- a/src/button-group/icon-button-item.tsx +++ b/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'; diff --git a/src/button/__tests__/button.test.tsx b/src/button/__tests__/button.test.tsx index 14e124d73e..d1fc9d5758 100644 --- a/src/button/__tests__/button.test.tsx +++ b/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(); }); }); diff --git a/src/button/internal.tsx b/src/button/internal.tsx index 5d8080dd84..6122d80e3a 100644 --- a/src/button/internal.tsx +++ b/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'; diff --git a/src/cards/__tests__/cards.test.tsx b/src/cards/__tests__/cards.test.tsx index eb476832fe..cb52a5102c 100644 --- a/src/cards/__tests__/cards.test.tsx +++ b/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(), diff --git a/src/cards/index.tsx b/src/cards/index.tsx index 381a76abda..5dbecb0433 100644 --- a/src/cards/index.tsx +++ b/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, diff --git a/src/code-editor/__tests__/code-editor.test.tsx b/src/code-editor/__tests__/code-editor.test.tsx index b92b35ea82..0ce1176f69 100644 --- a/src/code-editor/__tests__/code-editor.test.tsx +++ b/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'), diff --git a/src/code-editor/index.tsx b/src/code-editor/index.tsx index 3f782dd7ea..84ab6f7985 100644 --- a/src/code-editor/index.tsx +++ b/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'; diff --git a/src/code-editor/status-bar.tsx b/src/code-editor/status-bar.tsx index 3765111601..5d8c0c26e8 100644 --- a/src/code-editor/status-bar.tsx +++ b/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'; diff --git a/src/date-picker/index.tsx b/src/date-picker/index.tsx index ef92cb44d1..276ea5343f 100644 --- a/src/date-picker/index.tsx +++ b/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'; diff --git a/src/date-range-picker/__tests__/date-range-picker.test.tsx b/src/date-range-picker/__tests__/date-range-picker.test.tsx index f588bceca4..06695ccf5b 100644 --- a/src/date-range-picker/__tests__/date-range-picker.test.tsx +++ b/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'; diff --git a/src/date-range-picker/calendar/header/index.tsx b/src/date-range-picker/calendar/header/index.tsx index 66fcaf1fe9..67b736f84f 100644 --- a/src/date-range-picker/calendar/header/index.tsx +++ b/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} /> - + ); } diff --git a/src/date-range-picker/calendar/index.tsx b/src/date-range-picker/calendar/index.tsx index a17b64dc9a..897f61d502 100644 --- a/src/date-range-picker/calendar/index.tsx +++ b/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'; diff --git a/src/date-range-picker/dropdown.tsx b/src/date-range-picker/dropdown.tsx index 7af5faa120..f6b4fdeb61 100644 --- a/src/date-range-picker/dropdown.tsx +++ b/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'; diff --git a/src/drawer/implementation.tsx b/src/drawer/implementation.tsx index dcc3902fe9..41d1d70d49 100644 --- a/src/drawer/implementation.tsx +++ b/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'; diff --git a/src/flashbar/__tests__/flashbar.test.tsx b/src/flashbar/__tests__/flashbar.test.tsx index e6013eb31f..d7f283c851 100644 --- a/src/flashbar/__tests__/flashbar.test.tsx +++ b/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'; diff --git a/src/flashbar/flash.tsx b/src/flashbar/flash.tsx index b1dfc6d685..f5561762b7 100644 --- a/src/flashbar/flash.tsx +++ b/src/flashbar/flash.tsx @@ -12,7 +12,6 @@ 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'; @@ -20,6 +19,7 @@ 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'; diff --git a/src/form-field/__tests__/form-field-rendering.test.tsx b/src/form-field/__tests__/form-field-rendering.test.tsx index 935cbfdb6f..e66f91c934 100644 --- a/src/form-field/__tests__/form-field-rendering.test.tsx +++ b/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(); diff --git a/src/form-field/internal.tsx b/src/form-field/internal.tsx index 322473482f..1a29d14304 100644 --- a/src/form-field/internal.tsx +++ b/src/form-field/internal.tsx @@ -19,12 +19,12 @@ import { getTextFromSelector, } from '../internal/analytics/selectors'; import { getBaseProps } from '../internal/base-component'; -import InternalLiveRegion from '../internal/components/live-region/internal'; import { FormFieldContext, useFormFieldContext } from '../internal/context/form-field-context'; import { InfoLinkLabelContext } from '../internal/context/info-link-label-context'; import { useUniqueId } from '../internal/hooks/use-unique-id'; import { useVisualRefresh } from '../internal/hooks/use-visual-mode'; import { joinStrings } from '../internal/utils/strings'; +import InternalLiveRegion from '../live-region/internal'; import { InternalFormFieldProps } from './interfaces'; import { getAriaDescribedBy, getGridDefinition, getSlotIds } from './util'; diff --git a/src/form/__tests__/form.test.tsx b/src/form/__tests__/form.test.tsx index 2d8f2693fb..ff861899fd 100644 --- a/src/form/__tests__/form.test.tsx +++ b/src/form/__tests__/form.test.tsx @@ -7,7 +7,7 @@ import Form, { FormProps } from '../../../lib/components/form'; import createWrapper from '../../../lib/components/test-utils/dom'; import alertStyles from '../../../lib/components/alert/styles.selectors.js'; -import liveRegionStyles from '../../../lib/components/internal/components/live-region/styles.selectors.js'; +import liveRegionStyles from '../../../lib/components/live-region/test-classes/styles.selectors.js'; function renderForm(props: FormProps = {}) { const { container } = render(
); diff --git a/src/form/internal.tsx b/src/form/internal.tsx index 6cb7d7646f..f9a66c6ef3 100644 --- a/src/form/internal.tsx +++ b/src/form/internal.tsx @@ -9,8 +9,8 @@ import InternalAlert from '../alert/internal'; import InternalBox from '../box/internal'; 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 InternalLiveRegion from '../live-region/internal'; import { GeneratedAnalyticsMetadataFormFragment } from './analytics-metadata/interfaces'; import { FormProps } from './interfaces'; diff --git a/src/help-panel/implementation.tsx b/src/help-panel/implementation.tsx index 1c2a6ee11f..6ab98fb208 100644 --- a/src/help-panel/implementation.tsx +++ b/src/help-panel/implementation.tsx @@ -6,10 +6,10 @@ 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 { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context'; 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 { HelpPanelProps } from './interfaces'; diff --git a/src/internal/components/chart-plot/__tests__/chart-plot.test.tsx b/src/internal/components/chart-plot/__tests__/chart-plot.test.tsx index 2ac0fb3ec6..517678b886 100644 --- a/src/internal/components/chart-plot/__tests__/chart-plot.test.tsx +++ b/src/internal/components/chart-plot/__tests__/chart-plot.test.tsx @@ -6,19 +6,17 @@ import { act, render } from '@testing-library/react'; import { KeyCode } from '@cloudscape-design/test-utils-core/utils'; import ChartPlot, { ChartPlotRef } from '../../../../../lib/components/internal/components/chart-plot'; -import { ElementWrapper } from '../../../../../lib/components/test-utils/dom'; +import createWrapper, { ElementWrapper } from '../../../../../lib/components/test-utils/dom'; import createBBoxMock from './bbox-mock'; import styles from '../../../../../lib/components/internal/components/chart-plot/styles.css.js'; -import liveRegionStyles from '../../../../../lib/components/internal/components/live-region/styles.css.js'; function renderPlot(jsx: React.ReactElement) { const { container, rerender } = render(jsx); const elementWrapper = new ElementWrapper(container); const plotWrapper = elementWrapper.findByClassName(styles.root)!; const applicationWrapper = plotWrapper.findByClassName(styles.application)!; - const liveRegionWrapper = elementWrapper.findByClassName(liveRegionStyles.root)!; - return { rerender, plotWrapper, applicationWrapper, liveRegionWrapper }; + return { rerender, plotWrapper, applicationWrapper }; } describe('initial state', () => { @@ -98,14 +96,14 @@ describe('initial state', () => { }); test('custom aria-attributes are assigned to plot', () => { - const { plotWrapper, liveRegionWrapper } = renderPlot( + const { plotWrapper } = renderPlot( Test ); const plot = plotWrapper.getElement(); const desc = plotWrapper.find('desc')!.getElement(); - const liveRegion = liveRegionWrapper.getElement(); + const liveRegion = createWrapper().findLiveRegion()!.getElement(); expect(plot.getAttribute('aria-describedby')).toBe(desc.id); expect(desc.textContent).toBe('description'); diff --git a/src/internal/components/chart-plot/index.tsx b/src/internal/components/chart-plot/index.tsx index e2ebbdf717..f13549addf 100644 --- a/src/internal/components/chart-plot/index.tsx +++ b/src/internal/components/chart-plot/index.tsx @@ -4,10 +4,10 @@ import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react' import clsx from 'clsx'; import { useInternalI18n } from '../../../i18n/context'; +import InternalLiveRegion from '../../../live-region/internal'; import { useUniqueId } from '../../hooks/use-unique-id'; import { KeyCode } from '../../keycode'; import { Offset } from '../interfaces'; -import InternalLiveRegion from '../live-region/internal'; import ApplicationController, { ApplicationRef } from './application-controller'; import FocusOutline from './focus-outline'; diff --git a/src/internal/components/chart-status-container/index.tsx b/src/internal/components/chart-status-container/index.tsx index 94e6504bac..8cc34dcbd0 100644 --- a/src/internal/components/chart-status-container/index.tsx +++ b/src/internal/components/chart-status-container/index.tsx @@ -4,10 +4,10 @@ import React, { useMemo } from 'react'; import { useInternalI18n } from '../../../i18n/context'; import InternalLink from '../../../link/internal'; +import InternalLiveRegion from '../../../live-region/internal'; import InternalStatusIndicator from '../../../status-indicator/internal'; import { BaseComponentProps } from '../../base-component'; import { fireNonCancelableEvent, NonCancelableEventHandler } from '../../events'; -import InternalLiveRegion from '../live-region/internal'; import styles from './styles.css.js'; diff --git a/src/internal/components/dropdown-footer/index.tsx b/src/internal/components/dropdown-footer/index.tsx index aa52fcdd18..bc87e1a918 100644 --- a/src/internal/components/dropdown-footer/index.tsx +++ b/src/internal/components/dropdown-footer/index.tsx @@ -3,8 +3,8 @@ import React from 'react'; import clsx from 'clsx'; +import InternalLiveRegion from '../../../live-region/internal.js'; import DropdownStatus from '../dropdown-status/index.js'; -import InternalLiveRegion from '../live-region/internal'; import styles from './styles.css.js'; diff --git a/src/internal/components/live-region/__integ__/live-region.test.ts b/src/live-region/__integ__/live-region.test.ts similarity index 100% rename from src/internal/components/live-region/__integ__/live-region.test.ts rename to src/live-region/__integ__/live-region.test.ts diff --git a/src/internal/components/live-region/__tests__/live-region.test.tsx b/src/live-region/__tests__/live-region.test.tsx similarity index 94% rename from src/internal/components/live-region/__tests__/live-region.test.tsx rename to src/live-region/__tests__/live-region.test.tsx index 47e31ec853..57aa9ce77a 100644 --- a/src/internal/components/live-region/__tests__/live-region.test.tsx +++ b/src/live-region/__tests__/live-region.test.tsx @@ -3,11 +3,9 @@ import React, { createRef } from 'react'; import { render, waitFor } from '@testing-library/react'; -import InternalLiveRegion, { - InternalLiveRegionRef, -} from '../../../../../lib/components/internal/components/live-region/internal'; +import InternalLiveRegion, { InternalLiveRegionRef } from '../../../lib/components/live-region/internal.js'; -import styles from '../../../../../lib/components/internal/components/live-region/styles.css.js'; +import styles from '../../../lib/components/live-region/test-classes/styles.css.js'; const renderLiveRegion = async (jsx: React.ReactElement) => { const { container } = render(jsx); diff --git a/src/internal/components/live-region/controller.ts b/src/live-region/controller.ts similarity index 95% rename from src/internal/components/live-region/controller.ts rename to src/live-region/controller.ts index 0a15fc9bc7..4276cf690f 100644 --- a/src/internal/components/live-region/controller.ts +++ b/src/live-region/controller.ts @@ -2,6 +2,7 @@ // SPDX-License-Identifier: Apache-2.0 import styles from './styles.css.js'; +import testUtilStyles from './test-classes/styles.css.js'; /** * The controller that manages a single live region container. It has a timer @@ -30,10 +31,9 @@ export class LiveRegionController { public readonly delay = LiveRegionController.defaultDelay ) { this._element = document.createElement('div'); - this._element.className = styles.announcer; + this._element.className = `${styles.announcer} ${testUtilStyles.announcer}`; this._element.setAttribute('aria-live', this.politeness); this._element.setAttribute('aria-atomic', 'true'); - this._element.setAttribute('data-awsui-live-announcer', 'true'); document.body.appendChild(this._element); } diff --git a/src/internal/components/live-region/index.tsx b/src/live-region/index.tsx similarity index 64% rename from src/internal/components/live-region/index.tsx rename to src/live-region/index.tsx index 6aa0f9397d..4d74567eea 100644 --- a/src/internal/components/live-region/index.tsx +++ b/src/live-region/index.tsx @@ -3,17 +3,15 @@ import React from 'react'; -// import useBaseComponent from '../../hooks/use-base-component'; -import { applyDisplayName } from '../../utils/apply-display-name'; +import useBaseComponent from '../internal/hooks/use-base-component'; +import { applyDisplayName } from '../internal/utils/apply-display-name'; import { LiveRegionProps } from './interfaces'; import InternalLiveRegion from './internal'; export { LiveRegionProps }; function LiveRegion({ assertive = false, hidden = false, tagName = 'div', ...restProps }: LiveRegionProps) { - // TODO: Switch this out when moving this component out of internal - // const baseComponentProps = useBaseComponent('LiveRegion'); - const baseComponentProps = { __internalRootRef: React.useRef() }; + const baseComponentProps = useBaseComponent('LiveRegion', { props: { assertive, hidden } }); return ( { - return sources - ? getSourceContent(sources) - : message - ? message - : childrenRef.current - ? extractTextContent(childrenRef.current) - : undefined; + if (sources) { + return getSourceContent(sources); + } + if (childrenRef.current) { + return extractTextContent(childrenRef.current); + } }; // Call the controller on every render. The controller will deduplicate the @@ -106,7 +105,12 @@ export default React.forwardRef(function InternalLiveRegion( })); return ( - ); } diff --git a/src/s3-resource-selector/s3-modal/__tests__/fetching.test.tsx b/src/s3-resource-selector/s3-modal/__tests__/fetching.test.tsx index a29f76b274..c963076c09 100644 --- a/src/s3-resource-selector/s3-modal/__tests__/fetching.test.tsx +++ b/src/s3-resource-selector/s3-modal/__tests__/fetching.test.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { act, render, screen, waitFor } from '@testing-library/react'; -import { LiveRegionController } from '../../../../lib/components/internal/components/live-region/controller.js'; +import { LiveRegionController } from '../../../../lib/components/live-region/controller.js'; import { S3Modal } from '../../../../lib/components/s3-resource-selector/s3-modal'; import createWrapper, { ElementWrapper } from '../../../../lib/components/test-utils/dom'; import { buckets, i18nStrings, objects, versions, waitForFetch } from '../../__tests__/fixtures'; diff --git a/src/s3-resource-selector/s3-modal/basic-table.tsx b/src/s3-resource-selector/s3-modal/basic-table.tsx index 16c5f1f52b..cedf5b544a 100644 --- a/src/s3-resource-selector/s3-modal/basic-table.tsx +++ b/src/s3-resource-selector/s3-modal/basic-table.tsx @@ -8,9 +8,9 @@ import { useStableCallback } from '@cloudscape-design/component-toolkit/internal import { InternalButton } from '../../button/internal'; import InternalHeader from '../../header/internal'; import { ComponentFormatFunction } from '../../i18n/context'; -import InternalLiveRegion from '../../internal/components/live-region/internal'; import useForwardFocus, { ForwardFocusRef } from '../../internal/hooks/forward-focus'; import formatDateLocalized from '../../internal/utils/date-time/format-date-localized'; +import InternalLiveRegion from '../../live-region/internal'; import { PaginationProps } from '../../pagination/interfaces'; import InternalPagination from '../../pagination/internal'; import InternalSpaceBetween from '../../space-between/internal'; diff --git a/src/table/__integ__/inline-editing.test.ts b/src/table/__integ__/inline-editing.test.ts index 961c0632bd..e806003391 100644 --- a/src/table/__integ__/inline-editing.test.ts +++ b/src/table/__integ__/inline-editing.test.ts @@ -6,7 +6,6 @@ import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objec import useBrowser from '@cloudscape-design/browser-test-tools/use-browser'; import createWrapper from '../../../lib/components/test-utils/selectors'; -import LiveRegionWrapper from '../../../lib/components/test-utils/selectors/internal/live-region'; import styles from '../../../lib/components/table/body-cell/styles.selectors.js'; @@ -35,7 +34,7 @@ const bodyCellError = bodyCell.findFormField().findError().toSelector(); const disabledCell = tableWrapper.findBodyCell(4, 4); const disabledCell$ = disabledCell.toSelector(); -const disabledCellLiveRegion$ = new LiveRegionWrapper(`.${LiveRegionWrapper.rootSelector}`).toSelector(); +const disabledCellLiveRegion$ = createWrapper().findLiveRegion().toSelector(); interface TestOptions { enableKeyboardNavigation?: boolean; diff --git a/src/table/__tests__/a11y.test.tsx b/src/table/__tests__/a11y.test.tsx index 49da6a9068..5b31974a4e 100644 --- a/src/table/__tests__/a11y.test.tsx +++ b/src/table/__tests__/a11y.test.tsx @@ -8,7 +8,7 @@ import Modal from '../../../lib/components/modal'; import Table, { TableProps } from '../../../lib/components/table'; import createWrapper 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'; interface Item { id: number; diff --git a/src/table/__tests__/body-cell.test.tsx b/src/table/__tests__/body-cell.test.tsx index f97791d46f..9045f825d6 100644 --- a/src/table/__tests__/body-cell.test.tsx +++ b/src/table/__tests__/body-cell.test.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { fireEvent, render, screen, waitFor } from '@testing-library/react'; -import { LiveRegionController } from '../../../lib/components/internal/components/live-region/controller.js'; +import { LiveRegionController } from '../../../lib/components/live-region/controller.js'; import { TableBodyCell, TableBodyCellProps } from '../../../lib/components/table/body-cell'; import { useStickyColumns } from '../../../lib/components/table/sticky-columns'; import wrapper from '../../../lib/components/test-utils/dom'; diff --git a/src/table/__tests__/progressive-loading.test.tsx b/src/table/__tests__/progressive-loading.test.tsx index c1e92745ca..df9b673036 100644 --- a/src/table/__tests__/progressive-loading.test.tsx +++ b/src/table/__tests__/progressive-loading.test.tsx @@ -9,7 +9,7 @@ import { ComponentWrapper } from '@cloudscape-design/test-utils-core/dom.js'; import Table, { TableProps } from '../../../lib/components/table'; import createWrapper 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'; jest.mock('@cloudscape-design/component-toolkit/internal', () => ({ ...jest.requireActual('@cloudscape-design/component-toolkit/internal'), diff --git a/src/table/body-cell/disabled-inline-editor.tsx b/src/table/body-cell/disabled-inline-editor.tsx index dbabb9ec86..c2307d07cd 100644 --- a/src/table/body-cell/disabled-inline-editor.tsx +++ b/src/table/body-cell/disabled-inline-editor.tsx @@ -4,11 +4,11 @@ import React, { useRef, useState } from 'react'; import clsx from 'clsx'; import Icon from '../../icon/internal'; -import InternalLiveRegion from '../../internal/components/live-region/internal'; import Portal from '../../internal/components/portal'; import { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context'; import useHiddenDescription from '../../internal/hooks/use-hidden-description'; import { usePortalModeClasses } from '../../internal/hooks/use-portal-mode-classes'; +import InternalLiveRegion from '../../live-region/internal'; import Arrow from '../../popover/arrow'; import PopoverBody from '../../popover/body'; import PopoverContainer from '../../popover/container'; diff --git a/src/table/body-cell/index.tsx b/src/table/body-cell/index.tsx index 3e5fd1f8cc..7e6bde821e 100644 --- a/src/table/body-cell/index.tsx +++ b/src/table/body-cell/index.tsx @@ -5,9 +5,9 @@ import clsx from 'clsx'; import { useInternalI18n } from '../../i18n/context'; import Icon from '../../icon/internal'; -import InternalLiveRegion from '../../internal/components/live-region/internal'; import { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context.js'; import { usePrevious } from '../../internal/hooks/use-previous'; +import InternalLiveRegion from '../../live-region/internal'; import { TableProps } from '../interfaces'; import { DisabledInlineEditor } from './disabled-inline-editor'; import { InlineEditor } from './inline-editor'; @@ -130,10 +130,9 @@ function TableCellEditable({ > - + )} diff --git a/src/table/body-cell/inline-editor.tsx b/src/table/body-cell/inline-editor.tsx index da38b9281a..4c1cd589f7 100644 --- a/src/table/body-cell/inline-editor.tsx +++ b/src/table/body-cell/inline-editor.tsx @@ -6,8 +6,8 @@ import Button from '../../button/internal'; import FormField from '../../form-field/internal'; import { useInternalI18n } from '../../i18n/context'; import FocusLock, { FocusLockRef } from '../../internal/components/focus-lock'; -import InternalLiveRegion from '../../internal/components/live-region/internal'; import { Optional } from '../../internal/types'; +import InternalLiveRegion from '../../live-region/internal'; import SpaceBetween from '../../space-between/internal'; import { TableProps } from '../interfaces'; import { useClickAway } from './click-away'; @@ -145,14 +145,11 @@ export function InlineEditor({ loading={currentEditLoading} /> - + diff --git a/src/table/internal.tsx b/src/table/internal.tsx index f9836be4a8..67d8ebb7a9 100644 --- a/src/table/internal.tsx +++ b/src/table/internal.tsx @@ -13,7 +13,6 @@ import { import InternalContainer, { InternalContainerProps } from '../container/internal'; import { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel'; import { getAnalyticsMetadataProps, getBaseProps } from '../internal/base-component'; -import InternalLiveRegion from '../internal/components/live-region/internal'; import { getVisualContextClassname } from '../internal/components/visual-context'; import { CollectionLabelContext } from '../internal/context/collection-label-context'; import { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context'; @@ -30,6 +29,7 @@ import { useTableInteractionMetrics } from '../internal/hooks/use-table-interact import { useVisualRefresh } from '../internal/hooks/use-visual-mode'; import { isDevelopment } from '../internal/is-development'; import { SomeRequired } from '../internal/types'; +import InternalLiveRegion from '../live-region/internal'; import { GeneratedAnalyticsMetadataTableComponent } from './analytics-metadata/interfaces'; import { TableBodyCell } from './body-cell'; import { TableTdElement } from './body-cell/td-element'; diff --git a/src/table/no-data-cell.tsx b/src/table/no-data-cell.tsx index 06101570a4..bc896d5f37 100644 --- a/src/table/no-data-cell.tsx +++ b/src/table/no-data-cell.tsx @@ -5,7 +5,7 @@ import clsx from 'clsx'; import { useResizeObserver } from '@cloudscape-design/component-toolkit/internal'; -import InternalLiveRegion from '../internal/components/live-region/internal'; +import InternalLiveRegion from '../live-region/internal'; import InternalStatusIndicator from '../status-indicator/internal'; import styles from './styles.css.js'; diff --git a/src/table/progressive-loading/items-loader.tsx b/src/table/progressive-loading/items-loader.tsx index 3e2b3d78df..e8009adb0d 100644 --- a/src/table/progressive-loading/items-loader.tsx +++ b/src/table/progressive-loading/items-loader.tsx @@ -4,7 +4,7 @@ import React from 'react'; import { warnOnce } from '@cloudscape-design/component-toolkit/internal'; -import InternalLiveRegion from '../../internal/components/live-region/internal'; +import InternalLiveRegion from '../../live-region/internal'; import { TableProps } from '../interfaces'; import { applyTrackBy } from '../utils'; diff --git a/src/tag-editor/index.tsx b/src/tag-editor/index.tsx index 8add8e0f94..5403b46bc0 100644 --- a/src/tag-editor/index.tsx +++ b/src/tag-editor/index.tsx @@ -13,10 +13,10 @@ import { FormFieldError } from '../form-field/internal'; import { useInternalI18n } from '../i18n/context'; import { InputProps } from '../input/interfaces'; import { getBaseProps } from '../internal/base-component'; -import InternalLiveRegion from '../internal/components/live-region/internal'; import { fireNonCancelableEvent, NonCancelableCustomEvent } from '../internal/events'; import useBaseComponent from '../internal/hooks/use-base-component'; import { applyDisplayName } from '../internal/utils/apply-display-name'; +import InternalLiveRegion from '../live-region/internal'; import InternalStatusIndicator from '../status-indicator/internal'; import { TagEditorProps } from './interfaces'; import { TagControl, UndoButton } from './internal'; diff --git a/src/test-utils/dom/internal/live-region.ts b/src/test-utils/dom/live-region/index.ts similarity index 64% rename from src/test-utils/dom/internal/live-region.ts rename to src/test-utils/dom/live-region/index.ts index 04ebd6c67f..8b6256924c 100644 --- a/src/test-utils/dom/internal/live-region.ts +++ b/src/test-utils/dom/live-region/index.ts @@ -2,8 +2,8 @@ // SPDX-License-Identifier: Apache-2.0 import { ComponentWrapper } from '@cloudscape-design/test-utils-core/dom'; -import styles from '../../../internal/components/live-region/styles.selectors.js'; +import testUtilStyles from '../../../live-region/test-classes/styles.selectors.js'; export default class LiveRegionWrapper extends ComponentWrapper { - static rootSelector: string = styles.root; + static rootSelector: string = testUtilStyles.root; } diff --git a/src/text-filter/search-results.tsx b/src/text-filter/search-results.tsx index cbbaae060a..b266f5b6c3 100644 --- a/src/text-filter/search-results.tsx +++ b/src/text-filter/search-results.tsx @@ -3,7 +3,7 @@ import React from 'react'; -import InternalLiveRegion from '../internal/components/live-region/internal'; +import InternalLiveRegion from '../live-region/internal'; import styles from './styles.css.js'; diff --git a/src/tutorial-panel/components/tutorial-list/index.tsx b/src/tutorial-panel/components/tutorial-list/index.tsx index 9d47952033..f6b9b3c549 100644 --- a/src/tutorial-panel/components/tutorial-list/index.tsx +++ b/src/tutorial-panel/components/tutorial-list/index.tsx @@ -9,12 +9,12 @@ import { HotspotContext } from '../../../annotation-context/context.js'; import InternalBox from '../../../box/internal'; import { InternalButton } from '../../../button/internal'; import InternalIcon from '../../../icon/internal'; -import InternalLiveRegion from '../../../internal/components/live-region/internal'; import { fireNonCancelableEvent } from '../../../internal/events/index.js'; import { useUniqueId } from '../../../internal/hooks/use-unique-id/index.js'; import { useVisualRefresh } from '../../../internal/hooks/use-visual-mode'; import { checkSafeUrl } from '../../../internal/utils/check-safe-url'; import InternalLink from '../../../link/internal'; +import InternalLiveRegion from '../../../live-region/internal'; import InternalSpaceBetween from '../../../space-between/internal'; import InternalStatusIndicator from '../../../status-indicator/internal'; import { TutorialPanelProps } from '../../interfaces'; diff --git a/src/wizard/__tests__/wizard.test.tsx b/src/wizard/__tests__/wizard.test.tsx index 0196392339..9cf169c0b3 100644 --- a/src/wizard/__tests__/wizard.test.tsx +++ b/src/wizard/__tests__/wizard.test.tsx @@ -10,7 +10,7 @@ import WizardWrapper from '../../../lib/components/test-utils/dom/wizard'; import Wizard, { WizardProps } from '../../../lib/components/wizard'; import { DEFAULT_I18N_SETS, DEFAULT_STEPS } from './common'; -import liveRegionStyles from '../../../lib/components/internal/components/live-region/styles.css.js'; +import liveRegionStyles from '../../../lib/components/live-region/test-classes/styles.css.js'; import styles from '../../../lib/components/wizard/styles.selectors.js'; declare global {