@cloudscape-design/components 3.0.799 → 3.0.800
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/attribute-editor/additional-info.js +2 -2
- package/attribute-editor/additional-info.js.map +1 -1
- package/attribute-editor/internal.d.ts.map +1 -1
- package/attribute-editor/internal.js +2 -2
- package/attribute-editor/internal.js.map +1 -1
- package/button/internal.d.ts.map +1 -1
- package/button/internal.js +3 -3
- package/button/internal.js.map +1 -1
- package/button-group/icon-button-item.d.ts.map +1 -1
- package/button-group/icon-button-item.js +3 -2
- package/button-group/icon-button-item.js.map +1 -1
- package/cards/index.js +3 -3
- package/cards/index.js.map +1 -1
- package/code-editor/index.d.ts.map +1 -1
- package/code-editor/index.js +2 -2
- package/code-editor/index.js.map +1 -1
- package/code-editor/status-bar.js +2 -2
- package/code-editor/status-bar.js.map +1 -1
- package/date-picker/index.js +2 -2
- package/date-picker/index.js.map +1 -1
- package/date-range-picker/calendar/header/index.js +2 -2
- package/date-range-picker/calendar/header/index.js.map +1 -1
- package/date-range-picker/calendar/index.d.ts.map +1 -1
- package/date-range-picker/calendar/index.js +2 -2
- package/date-range-picker/calendar/index.js.map +1 -1
- package/date-range-picker/dropdown.d.ts.map +1 -1
- package/date-range-picker/dropdown.js +2 -2
- package/date-range-picker/dropdown.js.map +1 -1
- package/drawer/implementation.d.ts.map +1 -1
- package/drawer/implementation.js +2 -2
- package/drawer/implementation.js.map +1 -1
- package/flashbar/flash.d.ts.map +1 -1
- package/flashbar/flash.js +2 -2
- package/flashbar/flash.js.map +1 -1
- package/form/internal.js +2 -2
- package/form/internal.js.map +1 -1
- package/form-field/internal.js +3 -3
- package/form-field/internal.js.map +1 -1
- package/help-panel/implementation.js +2 -2
- package/help-panel/implementation.js.map +1 -1
- package/internal/components/chart-plot/index.js +2 -2
- package/internal/components/chart-plot/index.js.map +1 -1
- package/internal/components/chart-status-container/index.d.ts.map +1 -1
- package/internal/components/chart-status-container/index.js +3 -1
- package/internal/components/chart-status-container/index.js.map +1 -1
- package/internal/components/dropdown-footer/index.d.ts.map +1 -1
- package/internal/components/dropdown-footer/index.js +2 -2
- package/internal/components/dropdown-footer/index.js.map +1 -1
- package/internal/components/live-region/controller.d.ts +35 -0
- package/internal/components/live-region/controller.d.ts.map +1 -0
- package/internal/components/live-region/controller.js +77 -0
- package/internal/components/live-region/controller.js.map +1 -0
- package/internal/components/live-region/index.d.ts +5 -64
- package/internal/components/live-region/index.d.ts.map +1 -1
- package/internal/components/live-region/index.js +11 -122
- package/internal/components/live-region/index.js.map +1 -1
- package/internal/components/live-region/interfaces.d.ts +34 -0
- package/internal/components/live-region/interfaces.d.ts.map +1 -0
- package/internal/components/live-region/interfaces.js +4 -0
- package/internal/components/live-region/interfaces.js.map +1 -0
- package/internal/components/live-region/internal.d.ts +31 -0
- package/internal/components/live-region/internal.d.ts.map +1 -0
- package/internal/components/live-region/internal.js +80 -0
- package/internal/components/live-region/internal.js.map +1 -0
- package/internal/components/live-region/styles.css.js +2 -2
- package/internal/components/live-region/styles.scoped.css +146 -4
- package/internal/components/live-region/styles.selectors.js +2 -2
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
- package/pie-chart/pie-chart.js +2 -2
- package/pie-chart/pie-chart.js.map +1 -1
- package/progress-bar/index.js +2 -2
- package/progress-bar/index.js.map +1 -1
- package/s3-resource-selector/s3-in-context/index.d.ts.map +1 -1
- package/s3-resource-selector/s3-in-context/index.js +2 -3
- package/s3-resource-selector/s3-in-context/index.js.map +1 -1
- package/s3-resource-selector/s3-modal/basic-table.js +2 -2
- package/s3-resource-selector/s3-modal/basic-table.js.map +1 -1
- package/select/parts/filter.d.ts +1 -1
- package/table/body-cell/disabled-inline-editor.d.ts.map +1 -1
- package/table/body-cell/disabled-inline-editor.js +2 -1
- package/table/body-cell/disabled-inline-editor.js.map +1 -1
- package/table/body-cell/index.d.ts.map +1 -1
- package/table/body-cell/index.js +2 -2
- package/table/body-cell/index.js.map +1 -1
- package/table/body-cell/inline-editor.d.ts.map +1 -1
- package/table/body-cell/inline-editor.js +4 -4
- package/table/body-cell/inline-editor.js.map +1 -1
- package/table/internal.js +2 -2
- package/table/internal.js.map +1 -1
- package/table/no-data-cell.js +2 -2
- package/table/no-data-cell.js.map +1 -1
- package/table/progressive-loading/items-loader.js +3 -3
- package/table/progressive-loading/items-loader.js.map +1 -1
- package/tag-editor/index.js +2 -2
- package/tag-editor/index.js.map +1 -1
- package/test-utils/dom/internal/live-region.d.ts +4 -0
- package/test-utils/dom/internal/live-region.js +11 -0
- package/test-utils/dom/internal/live-region.js.map +1 -0
- package/test-utils/selectors/internal/live-region.d.ts +4 -0
- package/test-utils/selectors/internal/live-region.js +11 -0
- package/test-utils/selectors/internal/live-region.js.map +1 -0
- package/test-utils/tsconfig.tsbuildinfo +1 -1
- package/text-filter/search-results.js +2 -2
- package/text-filter/search-results.js.map +1 -1
- package/tutorial-panel/components/tutorial-list/index.js +2 -2
- package/tutorial-panel/components/tutorial-list/index.js.map +1 -1
package/form/internal.js
CHANGED
|
@@ -8,7 +8,7 @@ import InternalAlert from '../alert/internal';
|
|
|
8
8
|
import InternalBox from '../box/internal';
|
|
9
9
|
import { useInternalI18n } from '../i18n/context';
|
|
10
10
|
import { getBaseProps } from '../internal/base-component';
|
|
11
|
-
import
|
|
11
|
+
import InternalLiveRegion from '../internal/components/live-region/internal';
|
|
12
12
|
import analyticsSelectors from './analytics-metadata/styles.css.js';
|
|
13
13
|
import styles from './styles.css.js';
|
|
14
14
|
export default function InternalForm(_a) {
|
|
@@ -34,7 +34,7 @@ export default function InternalForm(_a) {
|
|
|
34
34
|
React.createElement("div", { className: styles['actions-section'] },
|
|
35
35
|
actions && React.createElement("div", { className: styles.actions }, actions),
|
|
36
36
|
secondaryActions && React.createElement("div", { className: styles['secondary-actions'] }, secondaryActions)))),
|
|
37
|
-
errorText && (React.createElement(
|
|
37
|
+
errorText && (React.createElement(InternalLiveRegion, { hidden: true, tagName: "span", assertive: true },
|
|
38
38
|
errorIconAriaLabel,
|
|
39
39
|
", ",
|
|
40
40
|
errorText))));
|
package/form/internal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/form/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,aAAa,MAAM,mBAAmB,CAAC;AAC9C,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/form/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,aAAa,MAAM,mBAAmB,CAAC;AAC9C,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,kBAAkB,MAAM,6CAA6C,CAAC;AAK7E,OAAO,kBAAkB,MAAM,oCAAoC,CAAC;AACpE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAOrC,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAUjB;QAViB,EACnC,QAAQ,EACR,MAAM,EACN,SAAS,EACT,kBAAkB,EAAE,0BAA0B,EAC9C,OAAO,EACP,gBAAgB,EAChB,iBAAiB,EACjB,kCAAkC,OAEhB,EADf,KAAK,cAT2B,mJAUpC,CADS;IAER,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,IAAI,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;IACrC,MAAM,kBAAkB,GAAG,IAAI,CAAC,oBAAoB,EAAE,0BAA0B,CAAC,CAAC;IAClF,MAAM,0BAA0B,GAA2C;QACzE,SAAS,EAAE;YACT,IAAI,EAAE,YAAY;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,kBAAkB,CAAC,MAAM,IAAI,OAAO,EAAE,CAAC;aACxF;SACF;KACF,CAAC;IAEF,OAAO,CACL,6CACM,SAAS,IACb,GAAG,EAAE,iBAAiB,EACtB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC,IAC7C,CAAC,kCAAkC,CAAC,CAAC,CAAC,6BAA6B,CAAC,0BAA0B,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAExG,MAAM,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,MAAM,CAAC,IAAG,MAAM,CAAO;QACxF,QAAQ,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,QAAQ,CAAO;QAC5D,SAAS,IAAI,CACZ,oBAAC,WAAW,IAAC,MAAM,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE;YAC/B,oBAAC,aAAa,IAAC,IAAI,EAAC,OAAO,EAAC,mBAAmB,EAAE,kBAAkB;gBACjE,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,SAAS,CAAO,CACjC,CACJ,CACf;QACA,CAAC,OAAO,IAAI,gBAAgB,CAAC,IAAI,CAChC,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM;YAC3B,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC;gBACtC,OAAO,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,OAAO,CAAO;gBAC1D,gBAAgB,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,IAAG,gBAAgB,CAAO,CACtF,CACF,CACP;QACA,SAAS,IAAI,CACZ,oBAAC,kBAAkB,IAAC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI;YAC7D,kBAAkB;;YAAI,SAAS,CACb,CACtB,CACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalAlert from '../alert/internal';\nimport InternalBox from '../box/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalLiveRegion from '../internal/components/live-region/internal';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { GeneratedAnalyticsMetadataFormFragment } from './analytics-metadata/interfaces';\nimport { FormProps } from './interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\ntype InternalFormProps = {\n __injectAnalyticsComponentMetadata?: boolean;\n} & FormProps &\n InternalBaseComponentProps;\n\nexport default function InternalForm({\n children,\n header,\n errorText,\n errorIconAriaLabel: errorIconAriaLabelOverride,\n actions,\n secondaryActions,\n __internalRootRef,\n __injectAnalyticsComponentMetadata,\n ...props\n}: InternalFormProps) {\n const baseProps = getBaseProps(props);\n const i18n = useInternalI18n('form');\n const errorIconAriaLabel = i18n('errorIconAriaLabel', errorIconAriaLabelOverride);\n const analyticsComponentMetadata: GeneratedAnalyticsMetadataFormFragment = {\n component: {\n name: 'awsui.Form',\n label: {\n selector: ['h1', 'h2', 'h3'].map(heading => `.${analyticsSelectors.header} ${heading}`),\n },\n },\n };\n\n return (\n <div\n {...baseProps}\n ref={__internalRootRef}\n className={clsx(styles.root, baseProps.className)}\n {...(__injectAnalyticsComponentMetadata ? getAnalyticsMetadataAttribute(analyticsComponentMetadata) : {})}\n >\n {header && <div className={clsx(styles.header, analyticsSelectors.header)}>{header}</div>}\n {children && <div className={styles.content}>{children}</div>}\n {errorText && (\n <InternalBox margin={{ top: 'l' }}>\n <InternalAlert type=\"error\" statusIconAriaLabel={errorIconAriaLabel}>\n <div className={styles.error}>{errorText}</div>\n </InternalAlert>\n </InternalBox>\n )}\n {(actions || secondaryActions) && (\n <div className={styles.footer}>\n <div className={styles['actions-section']}>\n {actions && <div className={styles.actions}>{actions}</div>}\n {secondaryActions && <div className={styles['secondary-actions']}>{secondaryActions}</div>}\n </div>\n </div>\n )}\n {errorText && (\n <InternalLiveRegion hidden={true} tagName=\"span\" assertive={true}>\n {errorIconAriaLabel}, {errorText}\n </InternalLiveRegion>\n )}\n </div>\n );\n}\n"]}
|
package/form-field/internal.js
CHANGED
|
@@ -12,7 +12,7 @@ import { FunnelMetrics } from '../internal/analytics';
|
|
|
12
12
|
import { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';
|
|
13
13
|
import { DATA_ATTR_FIELD_ERROR, DATA_ATTR_FIELD_LABEL, getFieldSlotSeletor, getSubStepAllSelector, getTextFromSelector, } from '../internal/analytics/selectors';
|
|
14
14
|
import { getBaseProps } from '../internal/base-component';
|
|
15
|
-
import
|
|
15
|
+
import InternalLiveRegion from '../internal/components/live-region/internal';
|
|
16
16
|
import { FormFieldContext, useFormFieldContext } from '../internal/context/form-field-context';
|
|
17
17
|
import { InfoLinkLabelContext } from '../internal/context/info-link-label-context';
|
|
18
18
|
import { useUniqueId } from '../internal/hooks/use-unique-id';
|
|
@@ -31,7 +31,7 @@ export function FormFieldError({ id, children, errorIconAriaLabel }) {
|
|
|
31
31
|
React.createElement("div", { role: "img", "aria-label": i18nErrorIconAriaLabel, className: styles['error-icon-scale-wrapper'] },
|
|
32
32
|
React.createElement(InternalIcon, { name: "status-negative", size: "small" }))),
|
|
33
33
|
React.createElement("span", { className: styles.error__message, ref: contentRef }, children)),
|
|
34
|
-
React.createElement(
|
|
34
|
+
React.createElement(InternalLiveRegion, { assertive: true, tagName: "span", sources: [i18nErrorIconAriaLabel, contentRef] })));
|
|
35
35
|
}
|
|
36
36
|
export function FormFieldWarning({ id, children, warningIconAriaLabel }) {
|
|
37
37
|
const i18n = useInternalI18n('form-field');
|
|
@@ -43,7 +43,7 @@ export function FormFieldWarning({ id, children, warningIconAriaLabel }) {
|
|
|
43
43
|
React.createElement("div", { role: "img", "aria-label": i18nWarningIconAriaLabel, className: styles['warning-icon-scale-wrapper'] },
|
|
44
44
|
React.createElement(InternalIcon, { name: "status-warning", size: "small" }))),
|
|
45
45
|
React.createElement("span", { className: styles.warning__message, ref: contentRef }, children)),
|
|
46
|
-
React.createElement(
|
|
46
|
+
React.createElement(InternalLiveRegion, { assertive: true, tagName: "span", sources: [i18nWarningIconAriaLabel, contentRef] })));
|
|
47
47
|
}
|
|
48
48
|
export function ConstraintText({ id, hasValidationText, children, }) {
|
|
49
49
|
return (React.createElement("div", { id: id, className: clsx(styles.constraint, hasValidationText && styles['constraint-has-validation-text']) }, children));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/form-field/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\nimport { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalGrid from '../grid/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport InternalIcon from '../icon/internal';\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport {\n DATA_ATTR_FIELD_ERROR,\n DATA_ATTR_FIELD_LABEL,\n getFieldSlotSeletor,\n getSubStepAllSelector,\n getTextFromSelector,\n} from '../internal/analytics/selectors';\nimport { getBaseProps } from '../internal/base-component';\nimport LiveRegion from '../internal/components/live-region';\nimport { FormFieldContext, useFormFieldContext } from '../internal/context/form-field-context';\nimport { InfoLinkLabelContext } from '../internal/context/info-link-label-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { joinStrings } from '../internal/utils/strings';\nimport { InternalFormFieldProps } from './interfaces';\nimport { getAriaDescribedBy, getGridDefinition, getSlotIds } from './util';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface FormFieldErrorProps {\n id?: string;\n children?: React.ReactNode;\n errorIconAriaLabel?: string;\n}\n\ninterface FormFieldWarningProps {\n id?: string;\n children?: React.ReactNode;\n warningIconAriaLabel?: string;\n}\n\nexport function FormFieldError({ id, children, errorIconAriaLabel }: FormFieldErrorProps) {\n const i18n = useInternalI18n('form-field');\n const contentRef = useRef<HTMLDivElement | null>(null);\n const i18nErrorIconAriaLabel = i18n('i18nStrings.errorIconAriaLabel', errorIconAriaLabel);\n\n return (\n <>\n <div id={id} className={styles.error}>\n <div className={styles['error-icon-shake-wrapper']}>\n <div role=\"img\" aria-label={i18nErrorIconAriaLabel} className={styles['error-icon-scale-wrapper']}>\n <InternalIcon name=\"status-negative\" size=\"small\" />\n </div>\n </div>\n <span className={styles.error__message} ref={contentRef}>\n {children}\n </span>\n </div>\n\n <LiveRegion assertive={true} source={[i18nErrorIconAriaLabel, contentRef]} />\n </>\n );\n}\n\nexport function FormFieldWarning({ id, children, warningIconAriaLabel }: FormFieldWarningProps) {\n const i18n = useInternalI18n('form-field');\n const contentRef = useRef<HTMLDivElement | null>(null);\n const i18nWarningIconAriaLabel = i18n('i18nStrings.warningIconAriaLabel', warningIconAriaLabel);\n\n return (\n <>\n <div id={id} className={styles.warning}>\n <div className={styles['warning-icon-shake-wrapper']}>\n <div role=\"img\" aria-label={i18nWarningIconAriaLabel} className={styles['warning-icon-scale-wrapper']}>\n <InternalIcon name=\"status-warning\" size=\"small\" />\n </div>\n </div>\n <span className={styles.warning__message} ref={contentRef}>\n {children}\n </span>\n </div>\n\n <LiveRegion assertive={true} source={[i18nWarningIconAriaLabel, contentRef]} />\n </>\n );\n}\n\nexport function ConstraintText({\n id,\n hasValidationText,\n children,\n}: {\n id?: string;\n hasValidationText: boolean;\n children: React.ReactNode;\n}) {\n return (\n <div id={id} className={clsx(styles.constraint, hasValidationText && styles['constraint-has-validation-text'])}>\n {children}\n </div>\n );\n}\n\nexport default function InternalFormField({\n controlId,\n stretch = false,\n label,\n info,\n i18nStrings,\n children,\n secondaryControl,\n description,\n constraintText,\n errorText,\n warningText,\n __hideLabel,\n __internalRootRef = null,\n __disableGutters = false,\n __analyticsMetadata = undefined,\n ...rest\n}: InternalFormFieldProps) {\n const baseProps = getBaseProps(rest);\n const isRefresh = useVisualRefresh();\n\n const instanceUniqueId = useUniqueId('formField');\n const generatedControlId = controlId || instanceUniqueId;\n const formFieldId = controlId || generatedControlId;\n\n const { funnelIdentifier, funnelInteractionId, submissionAttempt, funnelState, errorCount } = useFunnel();\n const { stepIdentifier, stepNumber, stepNameSelector } = useFunnelStep();\n const { subStepErrorContext, subStepIdentifier, subStepSelector, subStepNameSelector } = useFunnelSubStep();\n\n const showWarning = warningText && !errorText;\n\n if (warningText && errorText) {\n warnOnce('FileUpload', 'Both `errorText` and `warningText` exist. `warningText` will not be shown.');\n }\n\n const slotIds = getSlotIds(\n formFieldId,\n label,\n description,\n constraintText,\n errorText,\n showWarning ? warningText : undefined\n );\n\n const ariaDescribedBy = getAriaDescribedBy(slotIds);\n\n const gridDefinition = getGridDefinition(stretch, !!secondaryControl, isRefresh);\n\n const {\n ariaLabelledby: parentAriaLabelledby,\n ariaDescribedby: parentAriaDescribedby,\n invalid: parentInvalid,\n warning: parentWarning,\n } = useFormFieldContext({});\n\n const contextValuesWithoutControlId = {\n ariaLabelledby: joinStrings(parentAriaLabelledby, slotIds.label) || undefined,\n ariaDescribedby: joinStrings(parentAriaDescribedby, ariaDescribedBy) || undefined,\n invalid: !!errorText || !!parentInvalid,\n warning: (!!warningText && !errorText) || (!!parentWarning && !parentInvalid),\n };\n\n const analyticsAttributes = {\n [DATA_ATTR_FIELD_LABEL]: slotIds.label ? getFieldSlotSeletor(slotIds.label) : undefined,\n [DATA_ATTR_FIELD_ERROR]: slotIds.error ? getFieldSlotSeletor(slotIds.error) : undefined,\n };\n\n useEffect(() => {\n if (funnelInteractionId && errorText && funnelState.current !== 'complete') {\n const stepName = getTextFromSelector(stepNameSelector);\n const subStepName = getTextFromSelector(subStepNameSelector);\n\n errorCount.current++;\n\n // We don't want to report an error if it is hidden, e.g. inside an Expandable Section.\n const errorIsVisible = (__internalRootRef?.current?.getBoundingClientRect()?.width ?? 0) > 0;\n\n if (errorIsVisible) {\n FunnelMetrics.funnelSubStepError({\n funnelInteractionId,\n funnelIdentifier,\n subStepSelector,\n subStepName,\n subStepNameSelector,\n subStepIdentifier,\n stepNumber,\n stepName,\n stepNameSelector,\n stepIdentifier,\n subStepErrorContext,\n fieldErrorSelector: `${getFieldSlotSeletor(slotIds.error)} .${styles.error__message}`,\n fieldLabelSelector: getFieldSlotSeletor(slotIds.label),\n subStepAllSelector: getSubStepAllSelector(),\n fieldIdentifier: __analyticsMetadata?.instanceIdentifier,\n fieldErrorContext: __analyticsMetadata?.errorContext,\n });\n }\n\n return () => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n errorCount.current--;\n };\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [funnelInteractionId, errorText, submissionAttempt, errorCount]);\n\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles.root)}\n ref={__internalRootRef}\n {...analyticsAttributes}\n {...copyAnalyticsMetadataAttribute(rest)}\n >\n <div className={clsx(styles['label-wrapper'], __hideLabel && styles['visually-hidden'])}>\n {label && (\n <label\n className={clsx(styles.label, analyticsSelectors.label)}\n id={slotIds.label}\n htmlFor={generatedControlId}\n >\n {label}\n </label>\n )}\n <InfoLinkLabelContext.Provider value={slotIds.label}>\n {!__hideLabel && info && <span className={styles.info}>{info}</span>}\n </InfoLinkLabelContext.Provider>\n </div>\n\n {description && (\n <div className={styles.description} id={slotIds.description}>\n {description}\n </div>\n )}\n\n <div className={clsx(styles.controls, __hideLabel && styles['label-hidden'])}>\n <InternalGrid gridDefinition={gridDefinition} disableGutters={__disableGutters}>\n <FormFieldContext.Provider\n value={{\n controlId: generatedControlId,\n ...contextValuesWithoutControlId,\n }}\n >\n {children && <div className={styles.control}>{children}</div>}\n </FormFieldContext.Provider>\n\n {secondaryControl && (\n <FormFieldContext.Provider value={contextValuesWithoutControlId}>\n <div className={styles['secondary-control']}>{secondaryControl}</div>\n </FormFieldContext.Provider>\n )}\n </InternalGrid>\n </div>\n\n {(constraintText || errorText || warningText) && (\n <div className={styles.hints}>\n {errorText && (\n <FormFieldError id={slotIds.error} errorIconAriaLabel={i18nStrings?.errorIconAriaLabel}>\n {errorText}\n </FormFieldError>\n )}\n {showWarning && (\n <FormFieldWarning id={slotIds.warning} warningIconAriaLabel={i18nStrings?.warningIconAriaLabel}>\n {warningText}\n </FormFieldWarning>\n )}\n {constraintText && (\n <ConstraintText id={slotIds.constraint} hasValidationText={!!errorText || !!warningText}>\n {constraintText}\n </ConstraintText>\n )}\n </div>\n )}\n </div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/form-field/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\nimport { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalGrid from '../grid/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport InternalIcon from '../icon/internal';\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport {\n DATA_ATTR_FIELD_ERROR,\n DATA_ATTR_FIELD_LABEL,\n getFieldSlotSeletor,\n getSubStepAllSelector,\n getTextFromSelector,\n} from '../internal/analytics/selectors';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalLiveRegion from '../internal/components/live-region/internal';\nimport { FormFieldContext, useFormFieldContext } from '../internal/context/form-field-context';\nimport { InfoLinkLabelContext } from '../internal/context/info-link-label-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { joinStrings } from '../internal/utils/strings';\nimport { InternalFormFieldProps } from './interfaces';\nimport { getAriaDescribedBy, getGridDefinition, getSlotIds } from './util';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface FormFieldErrorProps {\n id?: string;\n children?: React.ReactNode;\n errorIconAriaLabel?: string;\n}\n\ninterface FormFieldWarningProps {\n id?: string;\n children?: React.ReactNode;\n warningIconAriaLabel?: string;\n}\n\nexport function FormFieldError({ id, children, errorIconAriaLabel }: FormFieldErrorProps) {\n const i18n = useInternalI18n('form-field');\n const contentRef = useRef<HTMLDivElement | null>(null);\n const i18nErrorIconAriaLabel = i18n('i18nStrings.errorIconAriaLabel', errorIconAriaLabel);\n\n return (\n <>\n <div id={id} className={styles.error}>\n <div className={styles['error-icon-shake-wrapper']}>\n <div role=\"img\" aria-label={i18nErrorIconAriaLabel} className={styles['error-icon-scale-wrapper']}>\n <InternalIcon name=\"status-negative\" size=\"small\" />\n </div>\n </div>\n <span className={styles.error__message} ref={contentRef}>\n {children}\n </span>\n </div>\n\n <InternalLiveRegion assertive={true} tagName=\"span\" sources={[i18nErrorIconAriaLabel, contentRef]} />\n </>\n );\n}\n\nexport function FormFieldWarning({ id, children, warningIconAriaLabel }: FormFieldWarningProps) {\n const i18n = useInternalI18n('form-field');\n const contentRef = useRef<HTMLDivElement | null>(null);\n const i18nWarningIconAriaLabel = i18n('i18nStrings.warningIconAriaLabel', warningIconAriaLabel);\n\n return (\n <>\n <div id={id} className={styles.warning}>\n <div className={styles['warning-icon-shake-wrapper']}>\n <div role=\"img\" aria-label={i18nWarningIconAriaLabel} className={styles['warning-icon-scale-wrapper']}>\n <InternalIcon name=\"status-warning\" size=\"small\" />\n </div>\n </div>\n <span className={styles.warning__message} ref={contentRef}>\n {children}\n </span>\n </div>\n\n <InternalLiveRegion assertive={true} tagName=\"span\" sources={[i18nWarningIconAriaLabel, contentRef]} />\n </>\n );\n}\n\nexport function ConstraintText({\n id,\n hasValidationText,\n children,\n}: {\n id?: string;\n hasValidationText: boolean;\n children: React.ReactNode;\n}) {\n return (\n <div id={id} className={clsx(styles.constraint, hasValidationText && styles['constraint-has-validation-text'])}>\n {children}\n </div>\n );\n}\n\nexport default function InternalFormField({\n controlId,\n stretch = false,\n label,\n info,\n i18nStrings,\n children,\n secondaryControl,\n description,\n constraintText,\n errorText,\n warningText,\n __hideLabel,\n __internalRootRef = null,\n __disableGutters = false,\n __analyticsMetadata = undefined,\n ...rest\n}: InternalFormFieldProps) {\n const baseProps = getBaseProps(rest);\n const isRefresh = useVisualRefresh();\n\n const instanceUniqueId = useUniqueId('formField');\n const generatedControlId = controlId || instanceUniqueId;\n const formFieldId = controlId || generatedControlId;\n\n const { funnelIdentifier, funnelInteractionId, submissionAttempt, funnelState, errorCount } = useFunnel();\n const { stepIdentifier, stepNumber, stepNameSelector } = useFunnelStep();\n const { subStepErrorContext, subStepIdentifier, subStepSelector, subStepNameSelector } = useFunnelSubStep();\n\n const showWarning = warningText && !errorText;\n\n if (warningText && errorText) {\n warnOnce('FileUpload', 'Both `errorText` and `warningText` exist. `warningText` will not be shown.');\n }\n\n const slotIds = getSlotIds(\n formFieldId,\n label,\n description,\n constraintText,\n errorText,\n showWarning ? warningText : undefined\n );\n\n const ariaDescribedBy = getAriaDescribedBy(slotIds);\n\n const gridDefinition = getGridDefinition(stretch, !!secondaryControl, isRefresh);\n\n const {\n ariaLabelledby: parentAriaLabelledby,\n ariaDescribedby: parentAriaDescribedby,\n invalid: parentInvalid,\n warning: parentWarning,\n } = useFormFieldContext({});\n\n const contextValuesWithoutControlId = {\n ariaLabelledby: joinStrings(parentAriaLabelledby, slotIds.label) || undefined,\n ariaDescribedby: joinStrings(parentAriaDescribedby, ariaDescribedBy) || undefined,\n invalid: !!errorText || !!parentInvalid,\n warning: (!!warningText && !errorText) || (!!parentWarning && !parentInvalid),\n };\n\n const analyticsAttributes = {\n [DATA_ATTR_FIELD_LABEL]: slotIds.label ? getFieldSlotSeletor(slotIds.label) : undefined,\n [DATA_ATTR_FIELD_ERROR]: slotIds.error ? getFieldSlotSeletor(slotIds.error) : undefined,\n };\n\n useEffect(() => {\n if (funnelInteractionId && errorText && funnelState.current !== 'complete') {\n const stepName = getTextFromSelector(stepNameSelector);\n const subStepName = getTextFromSelector(subStepNameSelector);\n\n errorCount.current++;\n\n // We don't want to report an error if it is hidden, e.g. inside an Expandable Section.\n const errorIsVisible = (__internalRootRef?.current?.getBoundingClientRect()?.width ?? 0) > 0;\n\n if (errorIsVisible) {\n FunnelMetrics.funnelSubStepError({\n funnelInteractionId,\n funnelIdentifier,\n subStepSelector,\n subStepName,\n subStepNameSelector,\n subStepIdentifier,\n stepNumber,\n stepName,\n stepNameSelector,\n stepIdentifier,\n subStepErrorContext,\n fieldErrorSelector: `${getFieldSlotSeletor(slotIds.error)} .${styles.error__message}`,\n fieldLabelSelector: getFieldSlotSeletor(slotIds.label),\n subStepAllSelector: getSubStepAllSelector(),\n fieldIdentifier: __analyticsMetadata?.instanceIdentifier,\n fieldErrorContext: __analyticsMetadata?.errorContext,\n });\n }\n\n return () => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n errorCount.current--;\n };\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [funnelInteractionId, errorText, submissionAttempt, errorCount]);\n\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles.root)}\n ref={__internalRootRef}\n {...analyticsAttributes}\n {...copyAnalyticsMetadataAttribute(rest)}\n >\n <div className={clsx(styles['label-wrapper'], __hideLabel && styles['visually-hidden'])}>\n {label && (\n <label\n className={clsx(styles.label, analyticsSelectors.label)}\n id={slotIds.label}\n htmlFor={generatedControlId}\n >\n {label}\n </label>\n )}\n <InfoLinkLabelContext.Provider value={slotIds.label}>\n {!__hideLabel && info && <span className={styles.info}>{info}</span>}\n </InfoLinkLabelContext.Provider>\n </div>\n\n {description && (\n <div className={styles.description} id={slotIds.description}>\n {description}\n </div>\n )}\n\n <div className={clsx(styles.controls, __hideLabel && styles['label-hidden'])}>\n <InternalGrid gridDefinition={gridDefinition} disableGutters={__disableGutters}>\n <FormFieldContext.Provider\n value={{\n controlId: generatedControlId,\n ...contextValuesWithoutControlId,\n }}\n >\n {children && <div className={styles.control}>{children}</div>}\n </FormFieldContext.Provider>\n\n {secondaryControl && (\n <FormFieldContext.Provider value={contextValuesWithoutControlId}>\n <div className={styles['secondary-control']}>{secondaryControl}</div>\n </FormFieldContext.Provider>\n )}\n </InternalGrid>\n </div>\n\n {(constraintText || errorText || warningText) && (\n <div className={styles.hints}>\n {errorText && (\n <FormFieldError id={slotIds.error} errorIconAriaLabel={i18nStrings?.errorIconAriaLabel}>\n {errorText}\n </FormFieldError>\n )}\n {showWarning && (\n <FormFieldWarning id={slotIds.warning} warningIconAriaLabel={i18nStrings?.warningIconAriaLabel}>\n {warningText}\n </FormFieldWarning>\n )}\n {constraintText && (\n <ConstraintText id={slotIds.constraint} hasValidationText={!!errorText || !!warningText}>\n {constraintText}\n </ConstraintText>\n )}\n </div>\n )}\n </div>\n );\n}\n"]}
|
|
@@ -6,7 +6,7 @@ import clsx from 'clsx';
|
|
|
6
6
|
import { useAppLayoutToolbarEnabled } from '../app-layout/utils/feature-flags';
|
|
7
7
|
import { useInternalI18n } from '../i18n/context';
|
|
8
8
|
import { getBaseProps } from '../internal/base-component';
|
|
9
|
-
import
|
|
9
|
+
import InternalLiveRegion from '../internal/components/live-region/internal';
|
|
10
10
|
import { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';
|
|
11
11
|
import { createWidgetizedComponent } from '../internal/widgets';
|
|
12
12
|
import InternalStatusIndicator from '../status-indicator/internal';
|
|
@@ -19,7 +19,7 @@ export function HelpPanelImplementation(_a) {
|
|
|
19
19
|
const containerProps = Object.assign(Object.assign({}, baseProps), { className: clsx(baseProps.className, styles['help-panel'], isToolbar && styles['with-toolbar']) });
|
|
20
20
|
return loading ? (React.createElement("div", Object.assign({}, containerProps, { ref: __internalRootRef }),
|
|
21
21
|
React.createElement(InternalStatusIndicator, { type: "loading" },
|
|
22
|
-
React.createElement(
|
|
22
|
+
React.createElement(InternalLiveRegion, { tagName: "span" }, i18n('loadingText', loadingText))))) : (React.createElement("div", Object.assign({}, containerProps, { ref: __internalRootRef }),
|
|
23
23
|
header && React.createElement("div", { className: clsx(styles.header) }, header),
|
|
24
24
|
React.createElement(LinkDefaultVariantContext.Provider, { value: { defaultVariant: 'primary' } },
|
|
25
25
|
React.createElement("div", { className: styles.content }, children)),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/help-panel/implementation.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,0BAA0B,EAAE,MAAM,mCAAmC,CAAC;AAC/E,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,
|
|
1
|
+
{"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/help-panel/implementation.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,0BAA0B,EAAE,MAAM,mCAAmC,CAAC;AAC/E,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,kBAAkB,MAAM,6CAA6C,CAAC;AAC7E,OAAO,EAAE,yBAAyB,EAAE,MAAM,kDAAkD,CAAC;AAE7F,OAAO,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AAGnE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,UAAU,uBAAuB,CAAC,EAQf;QARe,EACtC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAO,EACP,WAAW,EACX,iBAAiB,OAEM,EADpB,SAAS,cAP0B,+EAQvC,CADa;IAEZ,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,SAAS,GAAG,0BAA0B,EAAE,CAAC;IAC/C,MAAM,IAAI,GAAG,eAAe,CAAC,YAAY,CAAC,CAAC;IAC3C,MAAM,cAAc,mCACf,SAAS,KACZ,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,EAAE,SAAS,IAAI,MAAM,CAAC,cAAc,CAAC,CAAC,GAChG,CAAC;IACF,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,6CAAS,cAAc,IAAE,GAAG,EAAE,iBAAiB;QAC7C,oBAAC,uBAAuB,IAAC,IAAI,EAAC,SAAS;YACrC,oBAAC,kBAAkB,IAAC,OAAO,EAAC,MAAM,IAAE,IAAI,CAAC,aAAa,EAAE,WAAW,CAAC,CAAsB,CAClE,CACtB,CACP,CAAC,CAAC,CAAC,CACF,6CAAS,cAAc,IAAE,GAAG,EAAE,iBAAiB;QAC5C,MAAM,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAG,MAAM,CAAO;QAC9D,oBAAC,yBAAyB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE;YACtE,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,QAAQ,CAAO,CACb;QACpC,MAAM,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,MAAM,CAAO,CACpD,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,yBAAyB,GAAG,yBAAyB,CAAC,uBAAuB,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { useAppLayoutToolbarEnabled } from '../app-layout/utils/feature-flags';\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalLiveRegion from '../internal/components/live-region/internal';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { createWidgetizedComponent } from '../internal/widgets';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport { HelpPanelProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\nexport type HelpPanelInternalProps = HelpPanelProps & InternalBaseComponentProps;\n\nexport function HelpPanelImplementation({\n header,\n footer,\n children,\n loading,\n loadingText,\n __internalRootRef,\n ...restProps\n}: HelpPanelInternalProps) {\n const baseProps = getBaseProps(restProps);\n const isToolbar = useAppLayoutToolbarEnabled();\n const i18n = useInternalI18n('help-panel');\n const containerProps = {\n ...baseProps,\n className: clsx(baseProps.className, styles['help-panel'], isToolbar && styles['with-toolbar']),\n };\n return loading ? (\n <div {...containerProps} ref={__internalRootRef}>\n <InternalStatusIndicator type=\"loading\">\n <InternalLiveRegion tagName=\"span\">{i18n('loadingText', loadingText)}</InternalLiveRegion>\n </InternalStatusIndicator>\n </div>\n ) : (\n <div {...containerProps} ref={__internalRootRef}>\n {header && <div className={clsx(styles.header)}>{header}</div>}\n <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>\n <div className={styles.content}>{children}</div>\n </LinkDefaultVariantContext.Provider>\n {footer && <div className={styles.footer}>{footer}</div>}\n </div>\n );\n}\n\nexport const createWidgetizedHelpPanel = createWidgetizedComponent(HelpPanelImplementation);\n"]}
|
|
@@ -5,7 +5,7 @@ import clsx from 'clsx';
|
|
|
5
5
|
import { useInternalI18n } from '../../../i18n/context';
|
|
6
6
|
import { useUniqueId } from '../../hooks/use-unique-id';
|
|
7
7
|
import { KeyCode } from '../../keycode';
|
|
8
|
-
import
|
|
8
|
+
import InternalLiveRegion from '../live-region/internal';
|
|
9
9
|
import ApplicationController from './application-controller';
|
|
10
10
|
import FocusOutline from './focus-outline';
|
|
11
11
|
import styles from './styles.css.js';
|
|
@@ -108,6 +108,6 @@ function ChartPlot({ width, height, transform, offsetTop, offsetBottom, offsetLe
|
|
|
108
108
|
ariaDescription && plotFocusable && (React.createElement("desc", { "aria-hidden": "true", id: internalDescriptionId }, ariaDescription)),
|
|
109
109
|
children,
|
|
110
110
|
React.createElement(FocusOutline, { elementRef: activeElementRef, elementKey: isApplicationFocused && activeElementKey, offset: activeElementFocusOffset }))),
|
|
111
|
-
React.createElement(
|
|
111
|
+
React.createElement(InternalLiveRegion, { hidden: true, tagName: "span" }, ariaLiveRegion)));
|
|
112
112
|
}
|
|
113
113
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/chart-plot/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useInternalI18n } from '../../../i18n/context';\nimport { useUniqueId } from '../../hooks/use-unique-id';\nimport { KeyCode } from '../../keycode';\nimport { Offset } from '../interfaces';\nimport LiveRegion from '../live-region/index';\nimport ApplicationController, { ApplicationRef } from './application-controller';\nimport FocusOutline from './focus-outline';\n\nimport styles from './styles.css.js';\n\nconst DEFAULT_PLOT_FOCUS_OFFSET = 3;\nconst DEFAULT_ELEMENT_FOCUS_OFFSET = 3;\n\nexport interface ChartPlotRef {\n svg: SVGSVGElement;\n focusPlot(): void;\n focusApplication(): void;\n}\n\nexport interface ChartPlotProps {\n width: number | string;\n height: number | string;\n transform?: string;\n offsetTop?: number;\n offsetBottom?: number;\n offsetLeft?: number;\n offsetRight?: number;\n focusOffset?: number;\n ariaLabel?: string;\n ariaLabelledby?: string;\n ariaDescription?: string;\n ariaDescribedby?: string;\n ariaRoleDescription?: string;\n activeElementKey?: null | string | number | boolean;\n activeElementRef?: React.RefObject<SVGGElement>;\n activeElementFocusOffset?: Offset;\n ariaLiveRegion?: string;\n isClickable?: boolean;\n isPrecise?: boolean;\n onClick?: (event: React.MouseEvent<SVGSVGElement>) => void;\n onMouseMove?: (event: React.MouseEvent<SVGSVGElement>) => void;\n onMouseOut?: (event: React.MouseEvent<SVGSVGElement>) => void;\n onApplicationFocus?: (event: React.FocusEvent<SVGGElement>, trigger: 'mouse' | 'keyboard') => void;\n onApplicationBlur?: (event: React.FocusEvent<SVGGElement>) => void;\n onKeyDown?: (event: React.KeyboardEvent<SVGGElement>) => void;\n children: React.ReactNode;\n}\n\n/**\n An extension for the SVG to be used for charts. It includes a controller element to\n handle the focus and keyboard interactions in a way that is supported by screen readers.\n\n The application mimics the aria-activedescendant behavior which is unsupported by Safari. The\n activeElementRef is the pointer to the secondary-focus element and activeElementKey denotes when\n the focus transition was made.\n\n Alternatively, ariaLiveRegion can be used to make announcements.\n*/\nexport default forwardRef(ChartPlot);\n\nfunction ChartPlot(\n {\n width,\n height,\n transform,\n offsetTop,\n offsetBottom,\n offsetLeft,\n offsetRight,\n ariaLabel,\n ariaLabelledby,\n ariaRoleDescription,\n ariaDescription,\n ariaDescribedby,\n activeElementKey,\n activeElementRef,\n ariaLiveRegion,\n isClickable,\n isPrecise,\n children,\n onClick,\n onKeyDown,\n focusOffset = DEFAULT_PLOT_FOCUS_OFFSET,\n activeElementFocusOffset = DEFAULT_ELEMENT_FOCUS_OFFSET,\n onMouseMove,\n onMouseOut,\n onApplicationBlur,\n onApplicationFocus,\n }: ChartPlotProps,\n ref: React.Ref<ChartPlotRef>\n) {\n const i18n = useInternalI18n('[charts]');\n const svgRef = useRef<SVGSVGElement>(null);\n const applicationRef = useRef<ApplicationRef>(null);\n const plotClickedRef = useRef(false);\n const [isPlotFocused, setPlotFocused] = useState(false);\n const [isApplicationFocused, setApplicationFocused] = useState(false);\n\n const internalDescriptionId = useUniqueId('awsui-chart-plot__description');\n const ariaDescriptionId = [ariaDescription && internalDescriptionId, ariaDescribedby].filter(Boolean).join(' ');\n\n useImperativeHandle(ref, () => ({\n svg: svgRef.current!,\n focusPlot: () => svgRef.current!.focus(),\n focusApplication: () => applicationRef.current!.focus(),\n }));\n\n const onPlotMouseDown = () => {\n // Record the click was made for the application focus handler.\n plotClickedRef.current = true;\n };\n const onPlotFocus = (event: React.FocusEvent<SVGSVGElement>) => {\n // If focused via click or an element was highlighted,\n // focus the internal application, which will manage and show focus accordingly on its internal elements.\n if (plotClickedRef.current || !!activeElementKey) {\n applicationRef.current!.focus();\n } else if (event.target === svgRef.current) {\n // Otherwise, focus the entire plot if it was focused with the keyboard.\n setPlotFocused(true);\n }\n };\n const onPlotClick = (event: React.MouseEvent<SVGSVGElement, MouseEvent>) => {\n onClick && onClick(event);\n };\n const onPlotBlur = (event: React.FocusEvent<SVGSVGElement>) => {\n if (event.target === svgRef.current) {\n setPlotFocused(false);\n }\n };\n // Once one of the expected keys is pressed the focus is delegated to the application controller.\n const onPlotKeyDown = (event: React.KeyboardEvent) => {\n if (isPlotFocused) {\n // Delegate the focus to the application if one of the expected keys was pressed.\n const codes = [KeyCode.space, KeyCode.enter, KeyCode.up, KeyCode.left, KeyCode.right, KeyCode.down];\n if (codes.indexOf(event.keyCode) !== -1) {\n applicationRef.current!.focus();\n }\n }\n };\n\n const onPlotApplicationFocus = (event: React.FocusEvent<SVGGElement>) => {\n onApplicationFocus && onApplicationFocus(event, plotClickedRef.current ? 'mouse' : 'keyboard');\n // \"Release\" the click reference to not affect the next call of this handler.\n plotClickedRef.current = false;\n setApplicationFocused(true);\n };\n const onPlotApplicationBlur = (event: React.FocusEvent<SVGGElement>) => {\n onApplicationBlur && onApplicationBlur(event);\n setApplicationFocused(false);\n };\n const onApplicationKeyDown = onKeyDown;\n\n const plotFocusable = !isApplicationFocused;\n const plotTabIndex = plotFocusable ? 0 : -1;\n const plotAria = !isApplicationFocused\n ? {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n 'aria-describedby': ariaDescriptionId,\n 'aria-roledescription': i18n('i18nStrings.chartAriaRoleDescription', ariaRoleDescription),\n }\n : {};\n\n return (\n <>\n <svg\n onMouseMove={onMouseMove}\n onMouseOut={onMouseOut}\n focusable={plotFocusable}\n tabIndex={plotTabIndex}\n role=\"application\"\n aria-hidden=\"false\"\n {...plotAria}\n ref={svgRef}\n style={{\n width,\n height,\n marginTop: offsetTop,\n marginBottom: offsetBottom,\n marginLeft: offsetLeft,\n marginRight: offsetRight,\n }}\n className={clsx(styles.root, {\n [styles.clickable]: isClickable,\n [styles.precise]: isPrecise,\n })}\n onMouseDown={onPlotMouseDown}\n onClick={onPlotClick}\n onFocus={onPlotFocus}\n onBlur={onPlotBlur}\n onKeyDown={onPlotKeyDown}\n >\n <FocusOutline elementRef={svgRef} elementKey={isPlotFocused} offset={focusOffset} />\n\n <g transform={transform}>\n <ApplicationController\n activeElementKey={(isApplicationFocused && activeElementKey) || null}\n activeElementRef={activeElementRef}\n ref={applicationRef}\n onFocus={onPlotApplicationFocus}\n onBlur={onPlotApplicationBlur}\n onKeyDown={onApplicationKeyDown}\n />\n\n {/* Only show description when plot is focusable to avoid repetition in Safari and Firefox */}\n {ariaDescription && plotFocusable && (\n <desc aria-hidden=\"true\" id={internalDescriptionId}>\n {ariaDescription}\n </desc>\n )}\n\n {children}\n\n <FocusOutline\n elementRef={activeElementRef}\n elementKey={isApplicationFocused && activeElementKey}\n offset={activeElementFocusOffset}\n />\n </g>\n </svg>\n\n <LiveRegion>{ariaLiveRegion}</LiveRegion>\n </>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/chart-plot/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useInternalI18n } from '../../../i18n/context';\nimport { useUniqueId } from '../../hooks/use-unique-id';\nimport { KeyCode } from '../../keycode';\nimport { Offset } from '../interfaces';\nimport InternalLiveRegion from '../live-region/internal';\nimport ApplicationController, { ApplicationRef } from './application-controller';\nimport FocusOutline from './focus-outline';\n\nimport styles from './styles.css.js';\n\nconst DEFAULT_PLOT_FOCUS_OFFSET = 3;\nconst DEFAULT_ELEMENT_FOCUS_OFFSET = 3;\n\nexport interface ChartPlotRef {\n svg: SVGSVGElement;\n focusPlot(): void;\n focusApplication(): void;\n}\n\nexport interface ChartPlotProps {\n width: number | string;\n height: number | string;\n transform?: string;\n offsetTop?: number;\n offsetBottom?: number;\n offsetLeft?: number;\n offsetRight?: number;\n focusOffset?: number;\n ariaLabel?: string;\n ariaLabelledby?: string;\n ariaDescription?: string;\n ariaDescribedby?: string;\n ariaRoleDescription?: string;\n activeElementKey?: null | string | number | boolean;\n activeElementRef?: React.RefObject<SVGGElement>;\n activeElementFocusOffset?: Offset;\n ariaLiveRegion?: string;\n isClickable?: boolean;\n isPrecise?: boolean;\n onClick?: (event: React.MouseEvent<SVGSVGElement>) => void;\n onMouseMove?: (event: React.MouseEvent<SVGSVGElement>) => void;\n onMouseOut?: (event: React.MouseEvent<SVGSVGElement>) => void;\n onApplicationFocus?: (event: React.FocusEvent<SVGGElement>, trigger: 'mouse' | 'keyboard') => void;\n onApplicationBlur?: (event: React.FocusEvent<SVGGElement>) => void;\n onKeyDown?: (event: React.KeyboardEvent<SVGGElement>) => void;\n children: React.ReactNode;\n}\n\n/**\n An extension for the SVG to be used for charts. It includes a controller element to\n handle the focus and keyboard interactions in a way that is supported by screen readers.\n\n The application mimics the aria-activedescendant behavior which is unsupported by Safari. The\n activeElementRef is the pointer to the secondary-focus element and activeElementKey denotes when\n the focus transition was made.\n\n Alternatively, ariaLiveRegion can be used to make announcements.\n*/\nexport default forwardRef(ChartPlot);\n\nfunction ChartPlot(\n {\n width,\n height,\n transform,\n offsetTop,\n offsetBottom,\n offsetLeft,\n offsetRight,\n ariaLabel,\n ariaLabelledby,\n ariaRoleDescription,\n ariaDescription,\n ariaDescribedby,\n activeElementKey,\n activeElementRef,\n ariaLiveRegion,\n isClickable,\n isPrecise,\n children,\n onClick,\n onKeyDown,\n focusOffset = DEFAULT_PLOT_FOCUS_OFFSET,\n activeElementFocusOffset = DEFAULT_ELEMENT_FOCUS_OFFSET,\n onMouseMove,\n onMouseOut,\n onApplicationBlur,\n onApplicationFocus,\n }: ChartPlotProps,\n ref: React.Ref<ChartPlotRef>\n) {\n const i18n = useInternalI18n('[charts]');\n const svgRef = useRef<SVGSVGElement>(null);\n const applicationRef = useRef<ApplicationRef>(null);\n const plotClickedRef = useRef(false);\n const [isPlotFocused, setPlotFocused] = useState(false);\n const [isApplicationFocused, setApplicationFocused] = useState(false);\n\n const internalDescriptionId = useUniqueId('awsui-chart-plot__description');\n const ariaDescriptionId = [ariaDescription && internalDescriptionId, ariaDescribedby].filter(Boolean).join(' ');\n\n useImperativeHandle(ref, () => ({\n svg: svgRef.current!,\n focusPlot: () => svgRef.current!.focus(),\n focusApplication: () => applicationRef.current!.focus(),\n }));\n\n const onPlotMouseDown = () => {\n // Record the click was made for the application focus handler.\n plotClickedRef.current = true;\n };\n const onPlotFocus = (event: React.FocusEvent<SVGSVGElement>) => {\n // If focused via click or an element was highlighted,\n // focus the internal application, which will manage and show focus accordingly on its internal elements.\n if (plotClickedRef.current || !!activeElementKey) {\n applicationRef.current!.focus();\n } else if (event.target === svgRef.current) {\n // Otherwise, focus the entire plot if it was focused with the keyboard.\n setPlotFocused(true);\n }\n };\n const onPlotClick = (event: React.MouseEvent<SVGSVGElement, MouseEvent>) => {\n onClick && onClick(event);\n };\n const onPlotBlur = (event: React.FocusEvent<SVGSVGElement>) => {\n if (event.target === svgRef.current) {\n setPlotFocused(false);\n }\n };\n // Once one of the expected keys is pressed the focus is delegated to the application controller.\n const onPlotKeyDown = (event: React.KeyboardEvent) => {\n if (isPlotFocused) {\n // Delegate the focus to the application if one of the expected keys was pressed.\n const codes = [KeyCode.space, KeyCode.enter, KeyCode.up, KeyCode.left, KeyCode.right, KeyCode.down];\n if (codes.indexOf(event.keyCode) !== -1) {\n applicationRef.current!.focus();\n }\n }\n };\n\n const onPlotApplicationFocus = (event: React.FocusEvent<SVGGElement>) => {\n onApplicationFocus && onApplicationFocus(event, plotClickedRef.current ? 'mouse' : 'keyboard');\n // \"Release\" the click reference to not affect the next call of this handler.\n plotClickedRef.current = false;\n setApplicationFocused(true);\n };\n const onPlotApplicationBlur = (event: React.FocusEvent<SVGGElement>) => {\n onApplicationBlur && onApplicationBlur(event);\n setApplicationFocused(false);\n };\n const onApplicationKeyDown = onKeyDown;\n\n const plotFocusable = !isApplicationFocused;\n const plotTabIndex = plotFocusable ? 0 : -1;\n const plotAria = !isApplicationFocused\n ? {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n 'aria-describedby': ariaDescriptionId,\n 'aria-roledescription': i18n('i18nStrings.chartAriaRoleDescription', ariaRoleDescription),\n }\n : {};\n\n return (\n <>\n <svg\n onMouseMove={onMouseMove}\n onMouseOut={onMouseOut}\n focusable={plotFocusable}\n tabIndex={plotTabIndex}\n role=\"application\"\n aria-hidden=\"false\"\n {...plotAria}\n ref={svgRef}\n style={{\n width,\n height,\n marginTop: offsetTop,\n marginBottom: offsetBottom,\n marginLeft: offsetLeft,\n marginRight: offsetRight,\n }}\n className={clsx(styles.root, {\n [styles.clickable]: isClickable,\n [styles.precise]: isPrecise,\n })}\n onMouseDown={onPlotMouseDown}\n onClick={onPlotClick}\n onFocus={onPlotFocus}\n onBlur={onPlotBlur}\n onKeyDown={onPlotKeyDown}\n >\n <FocusOutline elementRef={svgRef} elementKey={isPlotFocused} offset={focusOffset} />\n\n <g transform={transform}>\n <ApplicationController\n activeElementKey={(isApplicationFocused && activeElementKey) || null}\n activeElementRef={activeElementRef}\n ref={applicationRef}\n onFocus={onPlotApplicationFocus}\n onBlur={onPlotApplicationBlur}\n onKeyDown={onApplicationKeyDown}\n />\n\n {/* Only show description when plot is focusable to avoid repetition in Safari and Firefox */}\n {ariaDescription && plotFocusable && (\n <desc aria-hidden=\"true\" id={internalDescriptionId}>\n {ariaDescription}\n </desc>\n )}\n\n {children}\n\n <FocusOutline\n elementRef={activeElementRef}\n elementKey={isApplicationFocused && activeElementKey}\n offset={activeElementFocusOffset}\n />\n </g>\n </svg>\n\n <InternalLiveRegion hidden={true} tagName=\"span\">\n {ariaLiveRegion}\n </InternalLiveRegion>\n </>\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/chart-status-container/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAA0B,yBAAyB,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/chart-status-container/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAA0B,yBAAyB,EAAE,MAAM,cAAc,CAAC;AAKjF,UAAU,yBAA0B,SAAQ,kBAAkB;IAC5D,UAAU,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;IAE7C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,eAAe,CAAC,EAAE,yBAAyB,CAAC;IAG5C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,cAAc,CAAC,CAAC,EAAE,CAAC,EAAE,EACnC,YAAY,EACZ,WAAW,EACX,UAAU,GACX,EAAE;IACD,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAC/B,WAAW,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAC9B,UAAU,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;CAC9C;;;;EAKA;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,UAAU,EACV,SAAS,EACT,WAAW,EACX,YAAY,EACZ,OAAO,EACP,KAAK,EACL,eAAe,EACf,SAAS,EACT,OAAO,EACP,SAAS,GACV,EAAE,yBAAyB,eAwC3B"}
|
|
@@ -5,6 +5,7 @@ import { useInternalI18n } from '../../../i18n/context';
|
|
|
5
5
|
import InternalLink from '../../../link/internal';
|
|
6
6
|
import InternalStatusIndicator from '../../../status-indicator/internal';
|
|
7
7
|
import { fireNonCancelableEvent } from '../../events';
|
|
8
|
+
import InternalLiveRegion from '../live-region/internal';
|
|
8
9
|
import styles from './styles.css.js';
|
|
9
10
|
export function getChartStatus({ externalData, visibleData, statusType, }) {
|
|
10
11
|
const isEmpty = !visibleData || visibleData.length === 0;
|
|
@@ -36,6 +37,7 @@ export default function ChartStatusContainer({ statusType, errorText, loadingTex
|
|
|
36
37
|
return React.createElement("div", { className: styles.empty }, empty);
|
|
37
38
|
}
|
|
38
39
|
}, [i18n, statusType, onRecoveryClick, isEmpty, isNoMatch, recoveryText, loadingText, errorText, empty, noMatch]);
|
|
39
|
-
return (React.createElement("div", { className: styles.root
|
|
40
|
+
return (React.createElement("div", { className: styles.root },
|
|
41
|
+
React.createElement(InternalLiveRegion, null, !showChart && statusContainer)));
|
|
40
42
|
}
|
|
41
43
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/chart-status-container/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,uBAAuB,MAAM,oCAAoC,CAAC;AAEzE,OAAO,EAAE,sBAAsB,EAA6B,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/chart-status-container/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,uBAAuB,MAAM,oCAAoC,CAAC;AAEzE,OAAO,EAAE,sBAAsB,EAA6B,MAAM,cAAc,CAAC;AACjF,OAAO,kBAAkB,MAAM,yBAAyB,CAAC;AAEzD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAoBrC,MAAM,UAAU,cAAc,CAAO,EACnC,YAAY,EACZ,WAAW,EACX,UAAU,GAKX;IACC,MAAM,OAAO,GAAG,CAAC,WAAW,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,CAAC;IACzD,MAAM,SAAS,GAAG,OAAO,IAAI,WAAW,CAAC,MAAM,KAAK,YAAY,CAAC,MAAM,CAAC;IACxE,MAAM,SAAS,GAAG,UAAU,KAAK,UAAU,IAAI,CAAC,OAAO,CAAC;IACxD,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;AAC3C,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,UAAU,EACV,SAAS,EACT,WAAW,EACX,YAAY,EACZ,OAAO,EACP,KAAK,EACL,eAAe,EACf,SAAS,EACT,OAAO,EACP,SAAS,GACiB;IAC1B,MAAM,IAAI,GAAG,eAAe,CAAC,UAAU,CAAC,CAAC;IAEzC,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,MAAM,mBAAmB,GAAG,CAAC,KAAkB,EAAE,EAAE;YACjD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,sBAAsB,CAAC,eAAe,CAAC,CAAC;QAC1C,CAAC,CAAC;QACF,IAAI,UAAU,KAAK,OAAO,EAAE;YAC1B,MAAM,oBAAoB,GAAG,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;YAChE,OAAO,CACL;gBACE,oBAAC,uBAAuB,IAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAA2B;gBAAC,GAAG;gBACjG,CAAC,CAAC,oBAAoB,IAAI,CAAC,CAAC,eAAe,IAAI,CAC9C,oBAAC,YAAY,IAAC,QAAQ,EAAE,mBAAmB,EAAE,OAAO,EAAC,UAAU,IAC5D,oBAAoB,CACR,CAChB,CACI,CACR,CAAC;SACH;QAED,IAAI,UAAU,KAAK,SAAS,EAAE;YAC5B,OAAO,oBAAC,uBAAuB,IAAC,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,aAAa,EAAE,WAAW,CAAC,CAA2B,CAAC;SAC7G;QAED,IAAI,SAAS,EAAE;YACb,OAAO,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,OAAO,CAAO,CAAC;SACtD;QAED,IAAI,OAAO,EAAE;YACX,OAAO,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,KAAK,CAAO,CAAC;SACpD;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,eAAe,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IAElH,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI;QACzB,oBAAC,kBAAkB,QAAE,CAAC,SAAS,IAAI,eAAe,CAAsB,CACpE,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useMemo } from 'react';\n\nimport { useInternalI18n } from '../../../i18n/context';\nimport InternalLink from '../../../link/internal';\nimport InternalStatusIndicator from '../../../status-indicator/internal';\nimport { BaseComponentProps } from '../../base-component';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../../events';\nimport InternalLiveRegion from '../live-region/internal';\n\nimport styles from './styles.css.js';\n\ninterface ChartStatusContainerProps extends BaseComponentProps {\n statusType: 'loading' | 'finished' | 'error';\n\n empty?: React.ReactNode;\n noMatch?: React.ReactNode;\n\n loadingText?: string;\n errorText?: string;\n recoveryText?: string;\n\n onRecoveryClick?: NonCancelableEventHandler;\n\n // From `getChartStatus`\n isEmpty?: boolean;\n isNoMatch?: boolean;\n showChart?: boolean;\n}\n\nexport function getChartStatus<T, U>({\n externalData,\n visibleData,\n statusType,\n}: {\n externalData: ReadonlyArray<T>;\n visibleData: ReadonlyArray<U>;\n statusType: 'loading' | 'finished' | 'error';\n}) {\n const isEmpty = !visibleData || visibleData.length === 0;\n const isNoMatch = isEmpty && visibleData.length !== externalData.length;\n const showChart = statusType === 'finished' && !isEmpty;\n return { isEmpty, isNoMatch, showChart };\n}\n\nexport default function ChartStatusContainer({\n statusType,\n errorText,\n loadingText,\n recoveryText,\n noMatch,\n empty,\n onRecoveryClick,\n isNoMatch,\n isEmpty,\n showChart,\n}: ChartStatusContainerProps) {\n const i18n = useInternalI18n('[charts]');\n\n const statusContainer = useMemo(() => {\n const handleRecoveryClick = (event: CustomEvent) => {\n event.preventDefault();\n fireNonCancelableEvent(onRecoveryClick);\n };\n if (statusType === 'error') {\n const renderedRecoveryText = i18n('recoveryText', recoveryText);\n return (\n <span>\n <InternalStatusIndicator type=\"error\">{i18n('errorText', errorText)}</InternalStatusIndicator>{' '}\n {!!renderedRecoveryText && !!onRecoveryClick && (\n <InternalLink onFollow={handleRecoveryClick} variant=\"recovery\">\n {renderedRecoveryText}\n </InternalLink>\n )}\n </span>\n );\n }\n\n if (statusType === 'loading') {\n return <InternalStatusIndicator type=\"loading\">{i18n('loadingText', loadingText)}</InternalStatusIndicator>;\n }\n\n if (isNoMatch) {\n return <div className={styles.empty}>{noMatch}</div>;\n }\n\n if (isEmpty) {\n return <div className={styles.empty}>{empty}</div>;\n }\n }, [i18n, statusType, onRecoveryClick, isEmpty, isNoMatch, recoveryText, loadingText, errorText, empty, noMatch]);\n\n return (\n <div className={styles.root}>\n <InternalLiveRegion>{!showChart && statusContainer}</InternalLiveRegion>\n </div>\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown-footer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,UAAU,cAAc;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown-footer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,UAAU,cAAc;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAI5C,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import DropdownStatus from '../dropdown-status/index.js';
|
|
6
|
-
import
|
|
6
|
+
import InternalLiveRegion from '../live-region/internal';
|
|
7
7
|
import styles from './styles.css.js';
|
|
8
8
|
const DropdownFooter = ({ content, id, hasItems = true }) => (React.createElement("div", { className: clsx(styles.root, { [styles.hidden]: content === null, [styles['no-items']]: !hasItems }) },
|
|
9
|
-
React.createElement(
|
|
9
|
+
React.createElement(InternalLiveRegion, { id: id }, content && React.createElement(DropdownStatus, null, content))));
|
|
10
10
|
export default DropdownFooter;
|
|
11
11
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown-footer/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,cAAc,MAAM,6BAA6B,CAAC;AACzD,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown-footer/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,cAAc,MAAM,6BAA6B,CAAC;AACzD,OAAO,kBAAkB,MAAM,yBAAyB,CAAC;AAEzD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAQrC,MAAM,cAAc,GAA6B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,GAAG,IAAI,EAAkB,EAAE,EAAE,CAAC,CACrG,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC;IACvG,oBAAC,kBAAkB,IAAC,EAAE,EAAE,EAAE,IAAG,OAAO,IAAI,oBAAC,cAAc,QAAE,OAAO,CAAkB,CAAsB,CACpG,CACP,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport DropdownStatus from '../dropdown-status/index.js';\nimport InternalLiveRegion from '../live-region/internal';\n\nimport styles from './styles.css.js';\n\ninterface DropdownFooter {\n content?: React.ReactNode | null;\n hasItems?: boolean;\n id?: string;\n}\n\nconst DropdownFooter: React.FC<DropdownFooter> = ({ content, id, hasItems = true }: DropdownFooter) => (\n <div className={clsx(styles.root, { [styles.hidden]: content === null, [styles['no-items']]: !hasItems })}>\n <InternalLiveRegion id={id}>{content && <DropdownStatus>{content}</DropdownStatus>}</InternalLiveRegion>\n </div>\n);\n\nexport default DropdownFooter;\n"]}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The controller that manages a single live region container. It has a timer
|
|
3
|
+
* to make sure announcements are throttled correctly. It can also make sure
|
|
4
|
+
* that a message is announced again even if it matches the previous content
|
|
5
|
+
* of the live region.
|
|
6
|
+
*
|
|
7
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
|
|
8
|
+
*/
|
|
9
|
+
export declare class LiveRegionController {
|
|
10
|
+
readonly politeness: 'polite' | 'assertive';
|
|
11
|
+
readonly delay: number;
|
|
12
|
+
/**
|
|
13
|
+
* The default delay for announcements when no delay is explicitly provided.
|
|
14
|
+
* During internal unit testing, you can import this and explicitly set it to
|
|
15
|
+
* 0 to make the live region update the DOM without waiting for a timer.
|
|
16
|
+
*/
|
|
17
|
+
static defaultDelay: number;
|
|
18
|
+
private _element;
|
|
19
|
+
private _timeoutId;
|
|
20
|
+
private _lastAnnouncement;
|
|
21
|
+
private _addedTerminalPeriod;
|
|
22
|
+
private _nextAnnouncement;
|
|
23
|
+
constructor(politeness: 'polite' | 'assertive', delay?: number);
|
|
24
|
+
/**
|
|
25
|
+
* Reset the state of the controller and clear any active announcements.
|
|
26
|
+
*/
|
|
27
|
+
destroy(): void;
|
|
28
|
+
announce({ message, forceReannounce }: {
|
|
29
|
+
message?: string;
|
|
30
|
+
delay?: number;
|
|
31
|
+
forceReannounce?: boolean;
|
|
32
|
+
}): void;
|
|
33
|
+
private _updateElement;
|
|
34
|
+
}
|
|
35
|
+
//# sourceMappingURL=controller.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"controller.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/controller.ts"],"names":[],"mappings":"AAKA;;;;;;;GAOG;AACH,qBAAa,oBAAoB;aAeb,UAAU,EAAE,QAAQ,GAAG,WAAW;aAClC,KAAK;IAfvB;;;;OAIG;IACH,OAAc,YAAY,SAAK;IAE/B,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,UAAU,CAAqB;IACvC,OAAO,CAAC,iBAAiB,CAAqB;IAC9C,OAAO,CAAC,oBAAoB,CAAS;IACrC,OAAO,CAAC,iBAAiB,CAAM;gBAGb,UAAU,EAAE,QAAQ,GAAG,WAAW,EAClC,KAAK,SAAoC;IAU3D;;OAEG;IACH,OAAO;IAQP,QAAQ,CAAC,EAAE,OAAO,EAAE,eAAuB,EAAE,EAAE;QAAE,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,eAAe,CAAC,EAAE,OAAO,CAAA;KAAE;IAkB9G,OAAO,CAAC,cAAc;CAqBvB"}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
import styles from './styles.css.js';
|
|
4
|
+
/**
|
|
5
|
+
* The controller that manages a single live region container. It has a timer
|
|
6
|
+
* to make sure announcements are throttled correctly. It can also make sure
|
|
7
|
+
* that a message is announced again even if it matches the previous content
|
|
8
|
+
* of the live region.
|
|
9
|
+
*
|
|
10
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
|
|
11
|
+
*/
|
|
12
|
+
export class LiveRegionController {
|
|
13
|
+
constructor(politeness, delay = LiveRegionController.defaultDelay) {
|
|
14
|
+
this.politeness = politeness;
|
|
15
|
+
this.delay = delay;
|
|
16
|
+
this._addedTerminalPeriod = false;
|
|
17
|
+
this._nextAnnouncement = '';
|
|
18
|
+
this._element = document.createElement('div');
|
|
19
|
+
this._element.className = styles.announcer;
|
|
20
|
+
this._element.setAttribute('aria-live', this.politeness);
|
|
21
|
+
this._element.setAttribute('aria-atomic', 'true');
|
|
22
|
+
this._element.setAttribute('data-awsui-live-announcer', 'true');
|
|
23
|
+
document.body.appendChild(this._element);
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* Reset the state of the controller and clear any active announcements.
|
|
27
|
+
*/
|
|
28
|
+
destroy() {
|
|
29
|
+
var _a;
|
|
30
|
+
(_a = this._element) === null || _a === void 0 ? void 0 : _a.remove();
|
|
31
|
+
if (this._timeoutId !== undefined) {
|
|
32
|
+
clearTimeout(this._timeoutId);
|
|
33
|
+
this._timeoutId = undefined;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
announce({ message, forceReannounce = false }) {
|
|
37
|
+
if (!message) {
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
this._nextAnnouncement = message.trim();
|
|
41
|
+
if (this.delay === 0 || forceReannounce) {
|
|
42
|
+
// If the delay is 0, just skip the timeout shenanigans and update the
|
|
43
|
+
// element synchronously. Great for tests.
|
|
44
|
+
return this._updateElement(forceReannounce);
|
|
45
|
+
}
|
|
46
|
+
if (this._timeoutId === undefined) {
|
|
47
|
+
this._timeoutId = setTimeout(() => this._updateElement(false), this.delay * 1000);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
_updateElement(forceReannounce) {
|
|
51
|
+
if (this._nextAnnouncement !== this._lastAnnouncement) {
|
|
52
|
+
// The aria-atomic does not work properly in Voice Over, causing
|
|
53
|
+
// certain parts of the content to be ignored. To fix that,
|
|
54
|
+
// we assign the source text content as a single node.
|
|
55
|
+
this._element.textContent = this._nextAnnouncement;
|
|
56
|
+
this._addedTerminalPeriod = false;
|
|
57
|
+
}
|
|
58
|
+
else if (forceReannounce) {
|
|
59
|
+
// A (generally) safe way of forcing re-announcements is toggling the
|
|
60
|
+
// terminal period. If we only keep adding periods, it's going to be
|
|
61
|
+
// eventually interpreted as an ellipsis.
|
|
62
|
+
this._element.textContent = this._nextAnnouncement + (this._addedTerminalPeriod ? '' : '.');
|
|
63
|
+
this._addedTerminalPeriod = !this._addedTerminalPeriod;
|
|
64
|
+
}
|
|
65
|
+
// Track the announced text for deduplication.
|
|
66
|
+
this._lastAnnouncement = this._nextAnnouncement;
|
|
67
|
+
// Reset the state for the next announcement.
|
|
68
|
+
this._timeoutId = undefined;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
/**
|
|
72
|
+
* The default delay for announcements when no delay is explicitly provided.
|
|
73
|
+
* During internal unit testing, you can import this and explicitly set it to
|
|
74
|
+
* 0 to make the live region update the DOM without waiting for a timer.
|
|
75
|
+
*/
|
|
76
|
+
LiveRegionController.defaultDelay = 2;
|
|
77
|
+
//# sourceMappingURL=controller.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"controller.js","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/controller.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC;;;;;;;GAOG;AACH,MAAM,OAAO,oBAAoB;IAc/B,YACkB,UAAkC,EAClC,QAAQ,oBAAoB,CAAC,YAAY;QADzC,eAAU,GAAV,UAAU,CAAwB;QAClC,UAAK,GAAL,KAAK,CAAoC;QALnD,yBAAoB,GAAG,KAAK,CAAC;QAC7B,sBAAiB,GAAG,EAAE,CAAC;QAM7B,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9C,IAAI,CAAC,QAAQ,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;QAC3C,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QACzD,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;QAClD,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,2BAA2B,EAAE,MAAM,CAAC,CAAC;QAChE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC3C,CAAC;IAED;;OAEG;IACH,OAAO;;QACL,MAAA,IAAI,CAAC,QAAQ,0CAAE,MAAM,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,EAAE;YACjC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAC9B,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;SAC7B;IACH,CAAC;IAED,QAAQ,CAAC,EAAE,OAAO,EAAE,eAAe,GAAG,KAAK,EAAmE;QAC5G,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO;SACR;QAED,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,IAAI,EAAE,CAAC;QAExC,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,IAAI,eAAe,EAAE;YACvC,sEAAsE;YACtE,0CAA0C;YAC1C,OAAO,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;SAC7C;QAED,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,EAAE;YACjC,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;SACnF;IACH,CAAC;IAEO,cAAc,CAAC,eAAwB;QAC7C,IAAI,IAAI,CAAC,iBAAiB,KAAK,IAAI,CAAC,iBAAiB,EAAE;YACrD,gEAAgE;YAChE,2DAA2D;YAC3D,sDAAsD;YACtD,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,iBAAiB,CAAC;YACnD,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC;SACnC;aAAM,IAAI,eAAe,EAAE;YAC1B,qEAAqE;YACrE,oEAAoE;YACpE,yCAAyC;YACzC,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;YAC5F,IAAI,CAAC,oBAAoB,GAAG,CAAC,IAAI,CAAC,oBAAoB,CAAC;SACxD;QAED,8CAA8C;QAC9C,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC;QAEhD,6CAA6C;QAC7C,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;IAC9B,CAAC;;AA1ED;;;;GAIG;AACW,iCAAY,GAAG,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport styles from './styles.css.js';\n\n/**\n * The controller that manages a single live region container. It has a timer\n * to make sure announcements are throttled correctly. It can also make sure\n * that a message is announced again even if it matches the previous content\n * of the live region.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions\n */\nexport class LiveRegionController {\n /**\n * The default delay for announcements when no delay is explicitly provided.\n * During internal unit testing, you can import this and explicitly set it to\n * 0 to make the live region update the DOM without waiting for a timer.\n */\n public static defaultDelay = 2;\n\n private _element: HTMLElement;\n private _timeoutId: number | undefined;\n private _lastAnnouncement: string | undefined;\n private _addedTerminalPeriod = false;\n private _nextAnnouncement = '';\n\n constructor(\n public readonly politeness: 'polite' | 'assertive',\n public readonly delay = LiveRegionController.defaultDelay\n ) {\n this._element = document.createElement('div');\n this._element.className = styles.announcer;\n this._element.setAttribute('aria-live', this.politeness);\n this._element.setAttribute('aria-atomic', 'true');\n this._element.setAttribute('data-awsui-live-announcer', 'true');\n document.body.appendChild(this._element);\n }\n\n /**\n * Reset the state of the controller and clear any active announcements.\n */\n destroy() {\n this._element?.remove();\n if (this._timeoutId !== undefined) {\n clearTimeout(this._timeoutId);\n this._timeoutId = undefined;\n }\n }\n\n announce({ message, forceReannounce = false }: { message?: string; delay?: number; forceReannounce?: boolean }) {\n if (!message) {\n return;\n }\n\n this._nextAnnouncement = message.trim();\n\n if (this.delay === 0 || forceReannounce) {\n // If the delay is 0, just skip the timeout shenanigans and update the\n // element synchronously. Great for tests.\n return this._updateElement(forceReannounce);\n }\n\n if (this._timeoutId === undefined) {\n this._timeoutId = setTimeout(() => this._updateElement(false), this.delay * 1000);\n }\n }\n\n private _updateElement(forceReannounce: boolean) {\n if (this._nextAnnouncement !== this._lastAnnouncement) {\n // The aria-atomic does not work properly in Voice Over, causing\n // certain parts of the content to be ignored. To fix that,\n // we assign the source text content as a single node.\n this._element.textContent = this._nextAnnouncement;\n this._addedTerminalPeriod = false;\n } else if (forceReannounce) {\n // A (generally) safe way of forcing re-announcements is toggling the\n // terminal period. If we only keep adding periods, it's going to be\n // eventually interpreted as an ellipsis.\n this._element.textContent = this._nextAnnouncement + (this._addedTerminalPeriod ? '' : '.');\n this._addedTerminalPeriod = !this._addedTerminalPeriod;\n }\n\n // Track the announced text for deduplication.\n this._lastAnnouncement = this._nextAnnouncement;\n\n // Reset the state for the next announcement.\n this._timeoutId = undefined;\n }\n}\n"]}
|
|
@@ -1,65 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
export
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
visible?: boolean;
|
|
7
|
-
tagName?: 'span' | 'div';
|
|
8
|
-
id?: string;
|
|
9
|
-
/**
|
|
10
|
-
* Use a list of strings and/or existing DOM elements for building the
|
|
11
|
-
* announcement text. This avoids rendering separate content just for this
|
|
12
|
-
* LiveRegion.
|
|
13
|
-
*
|
|
14
|
-
* If this property is set, the `children` will be ignored.
|
|
15
|
-
*/
|
|
16
|
-
source?: Array<string | React.RefObject<HTMLElement> | undefined>;
|
|
17
|
-
}
|
|
18
|
-
/**
|
|
19
|
-
* The live region is hidden in the layout, but visible for screen readers.
|
|
20
|
-
* It's purpose it to announce changes e.g. when custom navigation logic is used.
|
|
21
|
-
*
|
|
22
|
-
* The way live region works differently in different browsers and screen readers and
|
|
23
|
-
* it is recommended to manually test every new implementation.
|
|
24
|
-
*
|
|
25
|
-
* If you notice there are different words being merged together,
|
|
26
|
-
* check if there are text nodes not being wrapped in elements, like:
|
|
27
|
-
* ```
|
|
28
|
-
* <LiveRegion>
|
|
29
|
-
* {title}
|
|
30
|
-
* <span><Details /></span>
|
|
31
|
-
* </LiveRegion>
|
|
32
|
-
* ```
|
|
33
|
-
*
|
|
34
|
-
* To fix, wrap "title" in an element:
|
|
35
|
-
* ```
|
|
36
|
-
* <LiveRegion>
|
|
37
|
-
* <span>{title}</span>
|
|
38
|
-
* <span><Details /></span>
|
|
39
|
-
* </LiveRegion>
|
|
40
|
-
* ```
|
|
41
|
-
*
|
|
42
|
-
* Or create a single text node if possible:
|
|
43
|
-
* ```
|
|
44
|
-
* <LiveRegion>
|
|
45
|
-
* {`${title} ${details}`}
|
|
46
|
-
* </LiveRegion>
|
|
47
|
-
* ```
|
|
48
|
-
*
|
|
49
|
-
* The live region is always atomic, because non-atomic regions can be treated by screen readers
|
|
50
|
-
* differently and produce unexpected results. To imitate non-atomic announcements simply use
|
|
51
|
-
* multiple live regions:
|
|
52
|
-
* ```
|
|
53
|
-
* <>
|
|
54
|
-
* <LiveRegion>{title}</LiveRegion>
|
|
55
|
-
* <LiveRegion><Details /></LiveRegion>
|
|
56
|
-
* </>
|
|
57
|
-
* ```
|
|
58
|
-
*
|
|
59
|
-
* If you place interactive content inside the LiveRegion, the content will still be
|
|
60
|
-
* interactive (e.g. as a tab stop). Consider using the `source` property instead.
|
|
61
|
-
*/
|
|
62
|
-
declare const _default: React.MemoExoticComponent<typeof LiveRegion>;
|
|
63
|
-
export default _default;
|
|
64
|
-
declare function LiveRegion({ assertive, delay, visible, tagName: TagName, children, id, source, ...restProps }: LiveRegionProps): JSX.Element;
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { LiveRegionProps } from './interfaces';
|
|
3
|
+
export { LiveRegionProps };
|
|
4
|
+
declare function LiveRegion({ assertive, hidden, tagName, ...restProps }: LiveRegionProps): JSX.Element;
|
|
5
|
+
export default LiveRegion;
|
|
65
6
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAG/C,OAAO,EAAE,eAAe,EAAE,CAAC;AAE3B,iBAAS,UAAU,CAAC,EAAE,SAAiB,EAAE,MAAc,EAAE,OAAe,EAAE,GAAG,SAAS,EAAE,EAAE,eAAe,eAcxG;AAID,eAAe,UAAU,CAAC"}
|