diff --git a/packages/circuit-ui/components/Dialog/Dialog.spec.tsx b/packages/circuit-ui/components/Dialog/Dialog.spec.tsx index 0930208afd..223bb04e41 100644 --- a/packages/circuit-ui/components/Dialog/Dialog.spec.tsx +++ b/packages/circuit-ui/components/Dialog/Dialog.spec.tsx @@ -47,7 +47,7 @@ import { act, } from '../../util/test-utils.js'; -import { animationDuration, Dialog, type DialogProps } from './Dialog.js'; +import { animationDuration, Dialog } from './Dialog.js'; import { hasNativeDialogSupport } from './DialogService.js'; vi.mock('./DialogService.js', async (importOriginal) => { @@ -93,19 +93,6 @@ describe('Dialog', () => { expect(dialog?.className).toContain(className); }); - it('should throw accessibility error when the field is not sufficiently labelled', () => { - const dialogProps = { - ...props, - closeButtonLabel: undefined, - } as unknown as DialogProps; - // Silence the console.error output and switch to development mode to throw the error - vi.spyOn(console, 'error').mockImplementation(() => undefined); - process.env.NODE_ENV = 'development'; - expect(() => render()).toThrow(); - process.env.NODE_ENV = 'test'; - vi.restoreAllMocks(); - }); - it('should render in closed state by default', () => { const { container } = render(); // eslint-disable-next-line testing-library/no-container diff --git a/packages/circuit-ui/components/Dialog/Dialog.tsx b/packages/circuit-ui/components/Dialog/Dialog.tsx index 7a30664e80..0e0a709634 100644 --- a/packages/circuit-ui/components/Dialog/Dialog.tsx +++ b/packages/circuit-ui/components/Dialog/Dialog.tsx @@ -30,12 +30,9 @@ import { CloseButton } from '../CloseButton/index.js'; import dialogPolyfill from '../../vendor/dialog-polyfill/index.js'; import { applyMultipleRefs } from '../../util/refs.js'; import { clsx } from '../../styles/clsx.js'; -import { - AccessibilityError, - isSufficientlyLabelled, -} from '../../util/errors.js'; import type { ClickEvent } from '../../types/events.js'; import { isEscape } from '../../util/key-codes.js'; +import { useI18n } from '../../hooks/useI18n/useI18n.js'; import classes from './Dialog.module.css'; import { createUseModalDialog } from './createUseModalDialog.js'; @@ -43,6 +40,7 @@ import { getFirstFocusableElement, hasNativeDialogSupport, } from './DialogService.js'; +import { translations } from './translations/index.js'; export interface DialogProps extends Omit, 'children'> { @@ -64,7 +62,7 @@ export interface DialogProps * Text label for the close button for screen readers. * Important for accessibility. */ - closeButtonLabel: string; + closeButtonLabel?: string; /** * Use the `immersive` variant to focus the user's attention on the dialog content. * default: 'contextual' @@ -84,8 +82,8 @@ export interface DialogProps export const animationDuration = 300; export const Dialog = forwardRef( - ( - { + (props, ref) => { + const { open, onClose, closeButtonLabel, @@ -94,21 +92,11 @@ export const Dialog = forwardRef( className, preventClose, initialFocusRef, - ...props - }, - ref, - ) => { + ...rest + } = useI18n(props, translations); const dialogRef = useRef(null); const lastFocusedElementRef = useRef(null); - // TODO add translated default close label - if (process.env.NODE_ENV !== 'production') { - if (!isSufficientlyLabelled(closeButtonLabel)) { - throw new AccessibilityError( - 'Dialog', - 'The `closeButtonLabel` prop is missing or invalid.', - ); - } - } + const hasNativeDialog = hasNativeDialogSupport(); useEffect(() => { @@ -252,7 +240,7 @@ export const Dialog = forwardRef( classes.dialog, variant === 'immersive' ? classes.immersive : '', )} - {...props} + {...rest} > {closeButtonLabel} diff --git a/packages/circuit-ui/components/Dialog/translations/bg-BG.json b/packages/circuit-ui/components/Dialog/translations/bg-BG.json new file mode 100644 index 0000000000..ddf333d07f --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/bg-BG.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Затвори" +} diff --git a/packages/circuit-ui/components/Dialog/translations/cs-CZ.json b/packages/circuit-ui/components/Dialog/translations/cs-CZ.json new file mode 100644 index 0000000000..78f6b38afd --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/cs-CZ.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Zavřít" +} diff --git a/packages/circuit-ui/components/Dialog/translations/da-DK.json b/packages/circuit-ui/components/Dialog/translations/da-DK.json new file mode 100644 index 0000000000..12c5d6f111 --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/da-DK.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Luk" +} diff --git a/packages/circuit-ui/components/Dialog/translations/de-AT.json b/packages/circuit-ui/components/Dialog/translations/de-AT.json new file mode 100644 index 0000000000..b6226360c4 --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/de-AT.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Schließen" +} diff --git a/packages/circuit-ui/components/Dialog/translations/de-CH.json b/packages/circuit-ui/components/Dialog/translations/de-CH.json new file mode 100644 index 0000000000..ddcc840f48 --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/de-CH.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Schliessen" +} diff --git a/packages/circuit-ui/components/Dialog/translations/de-DE.json b/packages/circuit-ui/components/Dialog/translations/de-DE.json new file mode 100644 index 0000000000..b6226360c4 --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/de-DE.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Schließen" +} diff --git a/packages/circuit-ui/components/Dialog/translations/de-LU.json b/packages/circuit-ui/components/Dialog/translations/de-LU.json new file mode 100644 index 0000000000..b6226360c4 --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/de-LU.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Schließen" +} diff --git a/packages/circuit-ui/components/Dialog/translations/el-CY.json b/packages/circuit-ui/components/Dialog/translations/el-CY.json new file mode 100644 index 0000000000..33d5e74c1d --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/el-CY.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Κλείσιμο" +} diff --git a/packages/circuit-ui/components/Dialog/translations/el-GR.json b/packages/circuit-ui/components/Dialog/translations/el-GR.json new file mode 100644 index 0000000000..33d5e74c1d --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/el-GR.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Κλείσιμο" +} diff --git a/packages/circuit-ui/components/Dialog/translations/en-AU.json b/packages/circuit-ui/components/Dialog/translations/en-AU.json new file mode 100644 index 0000000000..5fb33ad8f3 --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/en-AU.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Close" +} diff --git a/packages/circuit-ui/components/Dialog/translations/en-GB.json b/packages/circuit-ui/components/Dialog/translations/en-GB.json new file mode 100644 index 0000000000..5fb33ad8f3 --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/en-GB.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Close" +} diff --git a/packages/circuit-ui/components/Dialog/translations/en-IE.json b/packages/circuit-ui/components/Dialog/translations/en-IE.json new file mode 100644 index 0000000000..5fb33ad8f3 --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/en-IE.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Close" +} diff --git a/packages/circuit-ui/components/Dialog/translations/en-MT.json b/packages/circuit-ui/components/Dialog/translations/en-MT.json new file mode 100644 index 0000000000..5fb33ad8f3 --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/en-MT.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Close" +} diff --git a/packages/circuit-ui/components/Dialog/translations/en-US.json b/packages/circuit-ui/components/Dialog/translations/en-US.json new file mode 100644 index 0000000000..5fb33ad8f3 --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/en-US.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Close" +} diff --git a/packages/circuit-ui/components/Dialog/translations/es-CL.json b/packages/circuit-ui/components/Dialog/translations/es-CL.json new file mode 100644 index 0000000000..b46dc02916 --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/es-CL.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Cerrar" +} diff --git a/packages/circuit-ui/components/Dialog/translations/es-CO.json b/packages/circuit-ui/components/Dialog/translations/es-CO.json new file mode 100644 index 0000000000..b46dc02916 --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/es-CO.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Cerrar" +} diff --git a/packages/circuit-ui/components/Dialog/translations/es-ES.json b/packages/circuit-ui/components/Dialog/translations/es-ES.json new file mode 100644 index 0000000000..b46dc02916 --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/es-ES.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Cerrar" +} diff --git a/packages/circuit-ui/components/Dialog/translations/es-MX.json b/packages/circuit-ui/components/Dialog/translations/es-MX.json new file mode 100644 index 0000000000..b46dc02916 --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/es-MX.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Cerrar" +} diff --git a/packages/circuit-ui/components/Dialog/translations/es-PE.json b/packages/circuit-ui/components/Dialog/translations/es-PE.json new file mode 100644 index 0000000000..b46dc02916 --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/es-PE.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Cerrar" +} diff --git a/packages/circuit-ui/components/Dialog/translations/es-US.json b/packages/circuit-ui/components/Dialog/translations/es-US.json new file mode 100644 index 0000000000..b46dc02916 --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/es-US.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Cerrar" +} diff --git a/packages/circuit-ui/components/Dialog/translations/et-EE.json b/packages/circuit-ui/components/Dialog/translations/et-EE.json new file mode 100644 index 0000000000..a9d5010617 --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/et-EE.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Sulge" +} diff --git a/packages/circuit-ui/components/Dialog/translations/fi-FI.json b/packages/circuit-ui/components/Dialog/translations/fi-FI.json new file mode 100644 index 0000000000..10d8058a44 --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/fi-FI.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Sulje" +} diff --git a/packages/circuit-ui/components/Dialog/translations/fr-BE.json b/packages/circuit-ui/components/Dialog/translations/fr-BE.json new file mode 100644 index 0000000000..b071a84d05 --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/fr-BE.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Fermer" +} diff --git a/packages/circuit-ui/components/Dialog/translations/fr-CH.json b/packages/circuit-ui/components/Dialog/translations/fr-CH.json new file mode 100644 index 0000000000..b071a84d05 --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/fr-CH.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Fermer" +} diff --git a/packages/circuit-ui/components/Dialog/translations/fr-FR.json b/packages/circuit-ui/components/Dialog/translations/fr-FR.json new file mode 100644 index 0000000000..b071a84d05 --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/fr-FR.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Fermer" +} diff --git a/packages/circuit-ui/components/Dialog/translations/fr-LU.json b/packages/circuit-ui/components/Dialog/translations/fr-LU.json new file mode 100644 index 0000000000..b071a84d05 --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/fr-LU.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Fermer" +} diff --git a/packages/circuit-ui/components/Dialog/translations/hr-HR.json b/packages/circuit-ui/components/Dialog/translations/hr-HR.json new file mode 100644 index 0000000000..58c4e9bbb8 --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/hr-HR.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Zatvori" +} diff --git a/packages/circuit-ui/components/Dialog/translations/hu-HU.json b/packages/circuit-ui/components/Dialog/translations/hu-HU.json new file mode 100644 index 0000000000..f1f68c32e6 --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/hu-HU.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Bezárás" +} diff --git a/packages/circuit-ui/components/Dialog/translations/index.ts b/packages/circuit-ui/components/Dialog/translations/index.ts new file mode 100644 index 0000000000..d0df2ae94b --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/index.ts @@ -0,0 +1,26 @@ +/** + * Copyright 2024, SumUp Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { transformModulesToTranslations } from '../../../util/i18n.js'; + +export const translations = transformModulesToTranslations< + typeof import('./en-US.json') +>( + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore import.meta.glob is supported by Vite + import.meta.glob('./*.json', { + eager: true, + }), +); diff --git a/packages/circuit-ui/components/Dialog/translations/it-CH.json b/packages/circuit-ui/components/Dialog/translations/it-CH.json new file mode 100644 index 0000000000..73c3efb158 --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/it-CH.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Chiudi" +} diff --git a/packages/circuit-ui/components/Dialog/translations/it-IT.json b/packages/circuit-ui/components/Dialog/translations/it-IT.json new file mode 100644 index 0000000000..73c3efb158 --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/it-IT.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Chiudi" +} diff --git a/packages/circuit-ui/components/Dialog/translations/lt-LT.json b/packages/circuit-ui/components/Dialog/translations/lt-LT.json new file mode 100644 index 0000000000..b55cf74468 --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/lt-LT.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Uždaryti" +} diff --git a/packages/circuit-ui/components/Dialog/translations/lv-LV.json b/packages/circuit-ui/components/Dialog/translations/lv-LV.json new file mode 100644 index 0000000000..486fc0ee7a --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/lv-LV.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Aizvērt" +} diff --git a/packages/circuit-ui/components/Dialog/translations/nb-NO.json b/packages/circuit-ui/components/Dialog/translations/nb-NO.json new file mode 100644 index 0000000000..72f78d9c6a --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/nb-NO.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Lukk" +} diff --git a/packages/circuit-ui/components/Dialog/translations/nl-BE.json b/packages/circuit-ui/components/Dialog/translations/nl-BE.json new file mode 100644 index 0000000000..538d49ed54 --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/nl-BE.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Sluit" +} diff --git a/packages/circuit-ui/components/Dialog/translations/nl-NL.json b/packages/circuit-ui/components/Dialog/translations/nl-NL.json new file mode 100644 index 0000000000..f2a9127e10 --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/nl-NL.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Sluiten" +} diff --git a/packages/circuit-ui/components/Dialog/translations/pl-PL.json b/packages/circuit-ui/components/Dialog/translations/pl-PL.json new file mode 100644 index 0000000000..a1cb3d0112 --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/pl-PL.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Zamknij" +} diff --git a/packages/circuit-ui/components/Dialog/translations/pt-BR.json b/packages/circuit-ui/components/Dialog/translations/pt-BR.json new file mode 100644 index 0000000000..12ce2fa58f --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/pt-BR.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Fechar" +} diff --git a/packages/circuit-ui/components/Dialog/translations/pt-PT.json b/packages/circuit-ui/components/Dialog/translations/pt-PT.json new file mode 100644 index 0000000000..12ce2fa58f --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/pt-PT.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Fechar" +} diff --git a/packages/circuit-ui/components/Dialog/translations/ro-RO.json b/packages/circuit-ui/components/Dialog/translations/ro-RO.json new file mode 100644 index 0000000000..58d8225420 --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/ro-RO.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Închide" +} diff --git a/packages/circuit-ui/components/Dialog/translations/sk-SK.json b/packages/circuit-ui/components/Dialog/translations/sk-SK.json new file mode 100644 index 0000000000..73e63be91a --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/sk-SK.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Zatvoriť" +} diff --git a/packages/circuit-ui/components/Dialog/translations/sl-SI.json b/packages/circuit-ui/components/Dialog/translations/sl-SI.json new file mode 100644 index 0000000000..364b505566 --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/sl-SI.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Zapri" +} diff --git a/packages/circuit-ui/components/Dialog/translations/sv-SE.json b/packages/circuit-ui/components/Dialog/translations/sv-SE.json new file mode 100644 index 0000000000..2d332d9d2a --- /dev/null +++ b/packages/circuit-ui/components/Dialog/translations/sv-SE.json @@ -0,0 +1,3 @@ +{ + "closeButtonLabel": "Stäng" +}