Skip to content

Commit

Permalink
translated default label
Browse files Browse the repository at this point in the history
  • Loading branch information
sirineJ committed Dec 9, 2024
1 parent c8649b7 commit daed6d3
Show file tree
Hide file tree
Showing 45 changed files with 162 additions and 35 deletions.
15 changes: 1 addition & 14 deletions packages/circuit-ui/components/Dialog/Dialog.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down Expand Up @@ -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(<Dialog {...dialogProps} />)).toThrow();
process.env.NODE_ENV = 'test';
vi.restoreAllMocks();
});

it('should render in closed state by default', () => {
const { container } = render(<Dialog {...props} />);
// eslint-disable-next-line testing-library/no-container
Expand Down
30 changes: 9 additions & 21 deletions packages/circuit-ui/components/Dialog/Dialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,19 +30,17 @@ 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';
import {
getFirstFocusableElement,
hasNativeDialogSupport,
} from './DialogService.js';
import { translations } from './translations/index.js';

export interface DialogProps
extends Omit<HTMLAttributes<HTMLDialogElement>, 'children'> {
Expand All @@ -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'
Expand All @@ -84,8 +82,8 @@ export interface DialogProps
export const animationDuration = 300;

export const Dialog = forwardRef<HTMLDialogElement, DialogProps>(
(
{
(props, ref) => {
const {
open,
onClose,
closeButtonLabel,
Expand All @@ -94,21 +92,11 @@ export const Dialog = forwardRef<HTMLDialogElement, DialogProps>(
className,
preventClose,
initialFocusRef,
...props
},
ref,
) => {
...rest
} = useI18n(props, translations);
const dialogRef = useRef<HTMLDialogElement>(null);
const lastFocusedElementRef = useRef<HTMLElement | null>(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(() => {
Expand Down Expand Up @@ -252,7 +240,7 @@ export const Dialog = forwardRef<HTMLDialogElement, DialogProps>(
classes.dialog,
variant === 'immersive' ? classes.immersive : '',
)}
{...props}
{...rest}
>
<CloseButton onClick={handleDialogClose} className={classes.close}>
{closeButtonLabel}
Expand Down
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/bg-BG.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Затвори"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/cs-CZ.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Zavřít"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/da-DK.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Luk"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/de-AT.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Schließen"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/de-CH.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Schliessen"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/de-DE.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Schließen"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/de-LU.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Schließen"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/el-CY.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Κλείσιμο"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/el-GR.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Κλείσιμο"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/en-AU.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Close"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/en-GB.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Close"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/en-IE.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Close"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/en-MT.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Close"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/en-US.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Close"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/es-CL.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Cerrar"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/es-CO.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Cerrar"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/es-ES.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Cerrar"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/es-MX.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Cerrar"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/es-PE.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Cerrar"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/es-US.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Cerrar"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/et-EE.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Sulge"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/fi-FI.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Sulje"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/fr-BE.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Fermer"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/fr-CH.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Fermer"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/fr-FR.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Fermer"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/fr-LU.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Fermer"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/hr-HR.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Zatvori"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/hu-HU.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Bezárás"
}
26 changes: 26 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/index.ts
Original file line number Diff line number Diff line change
@@ -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,
}),
);
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/it-CH.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Chiudi"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/it-IT.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Chiudi"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/lt-LT.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Uždaryti"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/lv-LV.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Aizvērt"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/nb-NO.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Lukk"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/nl-BE.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Sluit"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/nl-NL.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Sluiten"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/pl-PL.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Zamknij"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/pt-BR.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Fechar"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/pt-PT.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Fechar"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/ro-RO.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Închide"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/sk-SK.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Zatvoriť"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/sl-SI.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Zapri"
}
3 changes: 3 additions & 0 deletions packages/circuit-ui/components/Dialog/translations/sv-SE.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"closeButtonLabel": "Stäng"
}

0 comments on commit daed6d3

Please sign in to comment.